Node.js 系列之 Express 框架入门实战教程

1 Node.js是什么

官方解释为：Node.js是一个开源的，跨平台的 javascript 运行环境
通俗来讲：Node.js就是一款应用程序，是一款软件，它可以运行 javascript

2 Express初体验

Express 是最流行的 Node 框架，是许多其他流行 Node 框架 的底层库
接下来，要使用 express 实现一个效果：当浏览器使用get方法，访问/home时，服务端会返回响应：{data: {name: dddd, age: 18}}

进入编辑器，初始化一个项目

npm init

会生成 package.json 、node_module 等文件

安装 express

npm i express

新建文件： 01_初体验.js

// 1 导入 express
const express = require('express')

// 2 创建一个对象
const app = express()

// 3 创建路由
app.get('/home', (req, res) => {
  // 当使用get方法，访问/home时，会触发下面
  // req请求报文封装对象 res响应报文封装对象
  res.setHeader('content-type', 'text/html;charset=utf-8')
  res.end('{data: {name: dddd, age: 18}}')  // 做一个响应
})

// 监听端口
app.listen(3000, () => {
  console.log('服务已启动，端口3000正在监听....')
})

接下来在命令行中，使用 node 去启动

node .\01_初体验.js

或者可以安装 nodemon 来监控 node.js 源代码的任何变化和自动重启你的服务器（推荐）

npm install -g nodemon

运行：

nodemon .\01_初体验.js

在浏览器中访问：
http://localhost:3000/home

效果：

3 Express 路由

3.1 什么是路由

路由确定了应用程序如何相应客户端对特定端点的请求

3.2 路由的使用

一个路由的组成包含：请求方法、路径、回调函数
express 中使用路由格式如下：

app.<method>(path, callback)

举例：

// get
app.get('/home', (req, res) => {
  res.end('hello hello')
})

// post
app.post('/login', (req, res) => {
  res.end('login')
})

// 所有请求
app.all('/test', (req, res) => {
  res.end('test')
})

3.3 获取路由参数

如何获取如下 URL 的参数：123

http://localhost:3000/123.html

代码如下：

app.get('/:id.html', (req, res) => {
  res.setHeader('content-type', 'text/html;charset=utf-8')
  console.log('id值', req.params.id)
  res.end('HTML')  // 做一个响应
})

4 常见响应设置

4.1 express 响应方法

app.get('/test', (req, res) => {
  res.status(200)  // 设置状态码
  res.set('testHeader', '111')  // 设置响应头
  res.send('响应体')  // 设置响应体
})

当使用 express 的 send() 方法返回响应体时，响应头会自动添加：

Content-Type:text/html; charset=utf-8

4.2 原生响应方法

app.get('/test', (req, res) => {
  res.statusCode = 200
  res.statusMessage = 'test'
  res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
  res.write('设置响应体')
  res.end('设置响应')
})

5 express 中间件

5.1 中间件作用

使用函数封装公共操作，简化代码

5.2 中间件类型

• 全局中间件
• 路由中间件

5.3 全局中间件

每一个请求到达服务端后，都会执行

// 1 声明中间件函数
let recordMiddleware = function(req,res, next) {
  // 实现业务代码
  console.log('全局中间件')
  // .....
  // 执行完中间件函数后，若继续执行后续路由中的回调，则调用next
  next()
}
// 2 使用中间件函数
app.use(recordMiddleware)

// 路由代码
app.get('/test', (req, res) => {
  //.....
})

5.4 路由中间件

在固定路由才会执行的中间件

// 1 声明路由中间件函数
let checkCodeMiddleware = function(req,res, next) {
  // 实现业务代码
  console.log('test路由中间件')
  // .....
  // 执行完中间件函数后，若继续执行后续路由中的回调，则调用next
  next()
}

// 2 在test路由中使用中间件
app.get('/test', checkCodeMiddleware, (req, res) => {
  // ....
})

6 获取请求体数据

express 可以使用 body-parser 包 处理请求体
安装包：

npm i body-parser

以供处理的数据类型分为：

• application/x-www-form-urlencoded 格式，使用：bodyParser.urlencoded({extended: false})
• application/json 格式，使用：let jsonParser = bodyParser.json()

完整代码：

// 处理 application/x-www-form-urlencoded 格式
let urlParser = bodyParser.urlencoded({extended: false})
// 处理 application/json 格式
let jsonParser = bodyParser.json()

// 在路由中，使用urlParser 
// 使用 req.body 打印请求体数据
app.post('/test', urlParser,  (req, res) => {
  console.log(req.body) // ----打印请求体数据-----
  res.statusCode = 200
  res.statusMessage = 'test'
  res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
  res.write('设置响应体')
  res.end('设置响应')
})

前端创建表单，提交username数据

  <div>
    <form action="http://localhost:3000/test" method="post">
      用户名： <input type="text" name="username">
      <button>登录</button>
    </form>
  </div>

username输入：ddd，点击登录，控制台会打印出：

[Object: null prototype] { username: 'ddd' }

7 路由模块化

如果将所有的路由都罗列在同一个文件中，代码会变得臃肿
Express中为了解决这个问题，提供了模块化路由。 我们可以根据某种条件将路由进行分类。 将不同的路由放置在不同的模块中。

首先新建 routes/homeRouter.js 文件，声明路由：

// 导入 express
const express = require('express')
// 导入json数据
const dataList = require('../data/data.json')

// 创建路由对象
const router = express.Router()

router.get('/home', (req, res) => {
  // 当使用get方法，访问/home时，会触发下面
  // req请求报文封装对象 res响应报文封装对象
  res.setHeader('content-type', 'text/html;charset=utf-8')
  res.end(JSON.stringify(dataList))  // 做一个响应
})

// 暴漏 router
module.exports = router

其中，响应的 json 数据，需要创建 data.json 文件

{
  "docker": [
    {
      "name": "ancker",
      "age": "18"
    }
  ],
  "snwver": [
    {
      "name": "laoce",
      "age": "28"
    }
  ]
}

将路由 homeRouter.js 导入：

// 导入路由
const homeRouter = require('./routes/homeRouter') 

// 使用路由
app.use(homeRouter) 

运行node
访问 http://localhost:3000/home
得到返回：