从Express开始学习node.js（一）基础使用

何以庆余年
481 阅读3分钟

从Express开始学习node.js（一）基础使用

引言

在前端开发工作中，调用后端接口是一个非常重要的部分。但小伙伴们是否清楚一下这些问题：

  • 服务器端是如何响应客户端的请求的？
  • 发出去的request在服务器端经过了怎样的处理？
  • 什么是静态资源？什么是服务器端的路由匹配？
  • postman是什么，为什么要用它来测试请求？
  • ...

我们接下来将通过Express，来学习node服务器端是如何启动服务、接受请求、返回资源的。

本篇文章作为node.js系列的第一章节，主要内容有：

  • 如何用express创建、启动一个node服务

  • 如何使用postman来发送请求

  • express的基本路由

  • express是如何处理post请求的

注：本章节所有的内容，都需要node.js环境，请确保自己已安装node环境

一、快速上手

1、初始化项目

在这一步，我们创建了一个名为study-express的文件夹，用来保存我们的项目，同时创建了package.json文件，安装了express依赖。

# 创建文件夹
mkdir study-express

# 进入文件夹
cd study-express

# 初始化项目，创建package.json文件。一路回车即可
npm init

# 安装express依赖
npm install express

2、测试项目是否可以成功运行

在这一步，我们创建一个简单的hello world程序，来测试我们创建的study-express项目是否能够成功运行。

1. 编写express服务

在根目录下创建一个index.js文件，作为项目启动的入口文件

// index.js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
2. 启动项目

在命令行执行index.js文件，执行成功后，会在命令行中出现Example app listening on port 3000的提示信息。

node index.js
3. 测试项目

我们在浏览器中访问localhost:3000，或者在命令行中curl localhost:3000，如果得到Hello World!的结果，即表示我们的项目正确运行。

3、用postman来发送网络请求

在实际使用中，我们可能会遇到需要登录、或者需要传递参数的情况，这时采用localhost服务或者是curl的方式就显得比较笨拙了，所以我们大多会采用postman来发送、测试我们的网络请求。

postman是一个用来发送网络请求的应用程序，可以在postman官网进行下载，下载后一路回车即可完成安装。

在安装好postman之后，首先进行登录，如果没有登录过，需要先注册新账号，这里比较简单，就不多做介绍了。

登录之后，首先进入的是postman的首页，我们选择创建一个collection：

postman_overview.png

然后,我们创建一个request:

postman_create_request.png

request由request和response两个区域组成:

postman_request_desc.png

最后，我们利用postman来请求我们用express启动的node服务：

postman_request_demo.png

注：在本文后续的所有示例中，均会使用postman来进行测试

二、编写基本路由

我们在客户端会发送一些GET、POST、PUT、DELETE请求，告诉服务器端我们需要获取怎样的资源。而服务器端是如何通过客户端的请求来找到对应的资源的呢？答案就是路由。

1、语法

在express中，路由采用以下结构：

/**
* app是express的实例
* METHOD是http的请求方法：GET、POSt等
* PATH是服务器上的路径
* HANDLER是当路由匹配上时的执行函数
*/
app.METHOD(PATH, HANDLER)

2、示例

大家还记得我们在前面的测试项目中的hello world吗？我们来做一个简单的解析：

app.get('/', (req, res) => { res.send('Hello World!') })

  • app指的是我们通过const app = express()生成的express实例

  • get指的是我们这个路由处理的是GET请求

  • '/'指的是客户端请求根路由对应的资源

  • (req, res) => { res.send('Hello World!') }是回调函数，指的是当收到根路由的请求时，返回一个'Hello World!'字符串

3、更复杂的情况

接下来，我们来编写一下稍微复杂一点的路由，让我们的程序能够处理更多的请求。

1. 多层路由
  • 我们添加一个名为/china的路由，来处理针对/china路由所对应的GET资源请求：
app.get('/china', (req, res) => {
    res.send('Hello China!')
})

当我们用postman请求localhost:3000/china时，会返回一个'Hello China!'字符串

  • 我们添加一个名为/china/:province的路由，来处理针对/china/:province路由所对应的GET资源请求：
app.get('/china/:province', (req, res) => {
    const { province } = req.params;
    res.send(`Hello, I am China's ${province}`)
})

当我们用postman请求localhost:3000/china/shanghai时，会返回一个Hello, I am China's shanghai字符串

2. POST请求
  • 我们添加一个名为/age的路由，来处理针对age路由所对应的POST资源请求：
...
const bodyParser = require('body-parser')
const jsonParser = bodyParser.json()
...

app.post('/age', jsonParser, (req, res) => {
    const {name, birthday} = req.body;
    const age = new Date().getFullYear() - Number(birthday);
    res.send(`Hello ${name}, Your age is ${age}`)
})

age路由的功能是：当收到一个名为age的post请求时，用当前的年份减去客户端传入的birthday参数，然后与客户端传入的name参数进行拼接，返回一个Hello ${name}, Your age is ${age}的字符串。

在处理这个post请求时，需要引入一个新的依赖body-parser。

body-parser用于处理 post请求的body中的参数。由于我们在postman请求时，传入JSON格式的参数，所以使用bodyParser.json()来处理参数。如果传入的格式不是JSON，请根据实际情况进行匹配设置。

我们用postman来请求localhost:3000/age。

  1. 我们将METHOD设置为POST
  2. 然后依次选择body --> row --> JSON，设置参数 ：
{
    "name": "张楚岚",
    "birthday": "1998"
}
  1. 最后点击send发送请求

postman_post.png

  1. 在response部分，由于代码执行的时间是在2023年，所以我们得到了Hello 张楚岚, Your age is 25。

总结

在这一节，我们用express启动了一个node服务、学习了如何使用postman来发送请求、处理了传递JSON格式参数的post请求，同时我们学习了express的基本路由结构。接下来我们会继续介绍静态资源、中间件、模板引擎、接入数据库等知识，让我们一起来领略编程的乐趣吧！

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。

avatar
文章
阅读
粉丝