JS 流行框架（二）：Express

最新推荐文章于 2024-06-29 20:16:01 发布

Reyn Morales

最新推荐文章于 2024-06-29 20:16:01 发布

阅读量1.5k

点赞数 1

分类专栏： JS 流行框架文章标签： javascript express 前端

本文链接：https://blog.csdn.net/Raymiles/article/details/128121833

版权

JS 流行框架专栏收录该内容

4 篇文章 1 订阅

订阅专栏

JS 流行框架（二）：Express

Express 是一个基于 NodeJS 的 Web Server 开发框架，可以帮助我们省略绝大部分繁琐且无技术含量的步骤、快速地构建 Web 服务器

基本使用

在使用 Express 之前，必须先下载 express，示例如下：

npm install express --save

在 express 下载完成之后，就可以非常快速地创建一个服务器应用程序，示例如下：

// 1. 导入 express 模块
const express = require('express');

// 2. 创建 express 实例
const app = express();

// 利用 express 实例处理 get 请求
app.get('/express/get', (req, res, next) => {
  res.end('Hello Express!');
});

// 利用 express 实例处理 post 请求
app.post('/express/post', (req, res, next) => {
  res.end('Hello Express!');
});

// 3. 利用 express 实例监听端口
app.listen(3000, () => {
  console.log('Listen Success');  // Listen Success
});

上述示例中，express 实例的 get 方法专门用于响应客户端在某个特定路由下的 get 请求，在匹配到特定的路由之后，将执行相应的回调函数，系统将自动传入请求实例 req、响应实例 res 以及 next 方法，req 和 res 即为 NodeJS 中 http 模块下的相应实例，不过 Express 为它们添加了很多实用的方法，而 next 方法的作用将在之后介绍

网页

静态资源

示例如下：

// 利用 express 实例返回静态资源
app.use(express.static(path.join(__dirname, 'public')));

动态资源

示例如下：

// 利用 express 实例返回动态资源

/* 1. 告诉 express 动态资源存储在哪里 */
app.set('views', path.join(__dirname, 'views'));

/* 2. 告诉 express 动态资源利用哪一种模板引擎 */
app.set('view engine', 'ejs');

/* 3. 匹配路由，将渲染之后的动态资源返回 */
app.get('/', (req, res, next) => {
  res.render('login', {
    username: 'Reyn Morales',
    password: '1024'
  });
});

上述示例中，res 实例的 render 方法是 Express 为响应实例添加的方法，默认的 res 并没有此方法，通过 render 方法可以非常简单地渲染动态资源，此外，必须注意的是，动态资源的扩展名必须为模板引擎的名称，例如示例中通过 ejs 模板引擎渲染动态资源，那么动态资源的名称即为 login.ejs

路由

非模块化

通常情况下，通过 express 实例的 get 和 post 方法就实现相应的路由，示例如下：

// 利用 express 实例处理 get 请求
app.get('api/goods/list', (req, res, next) => {
  res.end('GET: api/goods/list');
});
app.get('api/user/info', (req, res, next) => {
  res.json({
    username: 'Reyn Morales',
    age: 21,
    gender: 'Male',
    method: 'GET'
  });
});

// 利用 express 实例处理 post 请求
app.post('api/goods/new', (req, res, next) => {
  res.end('POST: api/goods/new');
});
app.post('api/user/login', (req, res, next) => {
  res.json({
    username: 'Reyn Morales',
    password: '1024',
    method: 'POST'
  })
});

模块化

实际上，也可以通过 Express 的 Router 实例以模块化的方式路由，示例如下：

/router/user

// 1. 导入 express 模块
const express = require('express');

// 2. 利用 express 的 Router 方法创建 router 实例
const router = express.Router();

// 利用 router 的 get 方法实现路由
router.get('/info', (req, res, next) => {
  res.json({
    username: 'Reyn Morales',
    age: 21,
    gender: 'Male',
    method: 'GET'
  });
});

// 利用 router 的 post 方法实现路由
router.post('/login', (req, res, next) => {
  res.json({
    username: 'Reyn Morales',
    password: '1024',
    method: 'POST'
  })
});

// 3. 导出 user 相关的 router
module.exports = router;

/app.js

// 4. 导入 user 相关的 router
const userRouter = require('./router/user');
// 5. 利用 router 处理路由
app.use('/api/user', userRouter);

参数

get 请求

示例如下：

// 获取 get 请求参数
app.get('/api/user/info', (req, res, next) => {
  console.log(req.query); /* { username: 'reyn' } */
});

上述示例中，通过 req 实例的 query 属性可以直接获取被转换为实例的 get 请求参数

post 请求

示例如下：

// 获取 post 请求参数

/* 1. 告诉 express 可以解析 application/json 类型的请求参数 */
app.use(express.json());

/* 2. 告诉 express 可以解析 application/x-www-form-urlencoded 类型的请求参数 */
app.use(express.urlencoded({extended: false}));

/* 3. 匹配路由，输出 post 请求参数 */
app.post('/api/user/login',  (req, res, next) => {
  console.log(req.body); /* [Object: null prototype] { username: 'ReynMorales', password: '1024' } | { username: 'Reyn Morales', password: 1024 } */
});

上述示例中，通过 req 实例的 body 属性可以直接获取被转换为实例的 post 请求参数

Cookie

添加

示例如下：

// 添加 Cookie
app.get('/api/user/login', (req, res, next) => {
  res.cookie('name', 'reyn', {
    httpOnly: true,
    path: '/',
    maxAge: 60000
  });
  res.end();
});

获取

示例如下：

// 1. 下载并导入 cookie-parser
const cookieParser = require('cookie-parser');

// 2. 告诉 Express 利用 cookieParser 解析 Cookie
app.use(cookieParser());

// 3. 通过 req 实例的 cookies 就可以访问被转换为实例的 Cookie
app.get('/api/user/info', (req, res, next) => {
  console.log(req.cookies); // { name: 'reyn' }
});

next 方法

实际上，如果利用 Express 相关的实例通过 get 或 post 方法处理请求时，系统将从上至下依次将路由匹配每一个 use、get 和 post，如果匹配成功，那么将停止匹配，且执行相应方法中回调函数的代码，示例如下：

app.use((req, res, next) => {
  console.log('USE: No Route');
});
app.use('/', (req, res, next) => {
  console.log('USE: Root Route');
});
app.get('/',(req, res, next)=>{
  console.log('First GET');
});
app.get('/',(req, res, next)=>{
  console.log('Second GET');
});
app.post('/',(req, res, next)=>{
  console.log('First POST');
});
app.post('/',(req, res, next)=>{
  console.log('Second POST');
});

上述示例中，如果在浏览器中利用根路由访问此程序(不论是通过 get 请求方式，还是 post 请求方式)，那么将输出 USE: No Route，如果将第一个和第二个 use 方法的位置互换，那么将输出 USE: Root Route，总结如下：

use 方法既可以处理没有路由地址的请求，也可以处理有路由地址的请求
use 方法既可以处理 get 请求，也可以处理 post 请求
程序获取客户端请求时，将从上至下依次匹配每一个处理方法，当匹配成功后就停止，并执行相应处理方法中的回调函数

如果在每个回调函数中都调用 next 方法，那么输出结果将完全不同，示例如下：

app.use((req, res, next) => {
  console.log('USE: No Route');
  next();
});
app.use('/', (req, res, next) => {
  console.log('USE: Root Route');
  next();
});
app.get('/',(req, res, next)=>{
  console.log('First GET');
  next();
});
app.get('/',(req, res, next)=>{
  console.log('Second GET');
  next();
});
app.post('/',(req, res, next)=>{
  console.log('First POST');
  next();
});
app.post('/',(req, res, next)=>{
  console.log('Second POST');
  next();
});

如果通过 get 请求方式利用根路由地址访问，那么输出内容如下：

USE: No Route
USE: Root Route
First GET
Second GET

如果通过 post 请求方法利用根路由地址访问，那么输出内容如下：

USE: No Route
USE: Root Route
First POST
Second POST

根据上述示例，相关总结如下：

在执行完毕相应的回调函数之后，如果调用 next 方法，那么路由匹配将不会停止
在执行完毕相应的回调函数之后，如果没有调用 next 方法，那么路由匹配将停止

利用 next 方法可以将同一个业务逻辑的不同步骤放在不同的方法中，以提高代码的可读性和可维护性，示例如下：

/* 判断用户是否登录 */
app.get('/api/user/info', (req, res, next) => {
  if (req.query.isLogin === 'false') {
    res.end('Login Please!');
  } else {
    // 如果用户已经登录，那么移至下一个方法中
    next();
  }
});

/* 将用户信息返回至客户端 */
app.get('/api/user/info', (req, res, next) => {
  res.json({
    username: 'Reyn Morales',
    age: 21,
    gender: 'Male'
  });
});

实际上，不论是 use、get 还是 post 方法，都可将编写无限个回调函数，示例如下：

app.get('/api/user/info', (req, res, next) => {
  if (req.query.isLogin === 'false') {
    res.end('Login Please!');
  } else {
    // 如果用户已经登录，那么移至下一个方法中处理剩余的业务逻辑
    next();
  }
}, (req, res, next) => {
  res.json({
    username: 'Reyn Morales', age: 21, gender: 'Male'
  });
});

上述示例实现的功能和上一个示例完全相同，区别是将不同请求的回调函数放在了同一个请求中（路由地址都是相同的），如此的方式同样符合路由匹配规则，如果在请求的第一个回调函数中没有调用 next 方法，那么此请求的剩余回调函数将都不被执行

错误处理

利用 Express 的路由匹配规则可以在所有请求的最后实现错误处理，示例如下：

// 1. 下载并导入 http-errors
const createError = require('http-errors');

app.post('/api/user/login', (req, res, next) => {
  res.end('Login');
});
app.get('/api/user/info', (req, res, next) => {
  res.end('Info');
});

// 2. 路由地址匹配失败
app.use((req, res, next) => {
  next(createError(404, 'Not Found'));  // 新建一个错误实例
}, (err, req, res, next)=>{
  console.log(err.status, err.message);
  res.end(err.message); // 将错误信息返回至客户端
});

上述示例中，由于每个请求方法中都没有调用 next 方法，所以如果请求路由匹配那么将不会出现错误，如果路由地址都不匹配，由于 use 可以匹配任何路由地址，所以将执行 use 方法中的回调函数，从而实现错误处理

中间件

在 Express 中，中间件的本质就是一个函数，此函数接收 3 个参数：request 请求实例，response 响应实例，next 函数，每出现一个请求，程序将从上至下依次匹配每一个中间件，如果匹配则执行此中间件中的代码，通过中间件可以将一个请求的所有处理过程分发到若干个环节中，从而提高代码的可读性和可维护性，分类如下：

应用
- 绑定到 express 实例上的中间件
路由
- 绑定到 router 实例上的中间件
错误处理
- 错误处理中间件可以传入 4 个参数：err、req、res、next
内置
- express.static()、express.json()、express.urlencoded()、…
第三方
- cookie-parser、…

generate-express

generate-express 是一个 express 项目的脚手架工具，通过此工具可以快速生成一个功能齐全的项目框架，步骤如下：

下载 generate-express
```
npm install generate-express -g
```
利用 npx 命令创建一个 express 项目
```
npx generate-express <ProjectName>
```

常用模块

Development
- cross-env
  - 环境切换
- nodemon
  - 项目启动
Production
- ajv
  - 模板引擎
- redis
- mysql2
- sequelize
- connect-redis
  - express 项目中 redis 相关的中间件
- cookie-parser
  - express 项目中 cookie 相关的中间件
- express-session
  - express 项目中 session 相关的中间件
- http-errors
  - express 项目中错误处理相关的中间件
- morgan
  - express 项目中日志记录相关的中间件