JS 流行框架（二）：Express
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
- 项目启动
- cross-env
- Production
- ajv
- 模板引擎
- redis
- mysql2
- sequelize
- connect-redis
- express 项目中 redis 相关的中间件
- cookie-parser
- express 项目中 cookie 相关的中间件
- express-session
- express 项目中 session 相关的中间件
- http-errors
- express 项目中错误处理相关的中间件
- morgan
- express 项目中日志记录相关的中间件
- ajv