JavaScript全解析——Express框架介绍与入门

輝訊

本文为千锋资深前端教学老师带来的【JavaScript全解析】系列，文章内含丰富的代码案例及配图，从0到1讲解JavaScript相关知识点，致力于教会每一个人学会JS！
文末有本文重点总结，可以收藏慢慢看~ 更多技术类内容，主页关注一波！

目录

• express 的基本使用
  
  
  
  • express 是什么?
    
  • 1.基本搭建
    
  • 2.配置静态资源
    
    
    
    • 之前约定:
      
      
      
      • 组装:
        
      
      
    • 3.配置接口服务器
      
    
    
  
  
• express 的路由
  
• express 的中间件
  
  
  
  • 概念
    
    
    
    • 分类
      
      
      
      • 全局中间件
        
      • 路由级中间件
        
      • 请求级中间件
        
      • 错误中间件
        
      • token 的使用
        
      • 1.加密
        
      • 2.解密
        
      
      
    
    
  
  

express 的基本使用

express 是什么?

express是一个node的第三方开发框架
把启动服务器包括操作的一系列内容进行的完整的封装，不过在使用之前, 需要下载第三方
指令: npm install express
1.基本搭建

1. // 0. 下载: npm install express
3. // 0. 导入
4. const express = express();
6. // 1. 创建服务器
7. const server = express();
9. // 2. 给服务器配置监听端口号
10. server.listen(8080, () => {
11.     console.log("服务器启动成功");
12. });

复制代码

2.配置静态资源

之前约定:

1.所有静态资源以 /static 开头
2.按照后面给出的文件名自己去组装的路径
组装:

1.准备了初始目录 './client/'
2.按照后缀去添加二级目录
3.按照文件名去查找内容
例子: /static/index.html
1.自动去 './client/views/index.html'
b.现在:
i.约定:
1.所有静态资源以 /static 开头
2.按照 /static 后面的路径去访问指定文件
3.要求: 在 /static 以后的内容需要按照 二级路径的正确方式书写
a. 假设你需要请求的是 './client/views/index.html' 文件
b.你的请求地址需要书写 '/static/views/index.html'
c.语法:
i. express.static('开放的静态目录地址')
ii.server.use('访问这个地址的时候', 去到开放的静态目录地址)

1. // 0. 下载: npm install express
2. // 0. 导入
3. // 1. 创建服务器
5. // 1.1 配置静态资源
6. server.use("/static", express.static("./client/"));
8. // 2. 给服务器配置监听端口号

复制代码

3.配置接口服务器

1. // 0. 下载: npm install express
2. // 0. 导入
3. // 1. 创建服务器
4. // 1.1 配置静态资源
6. // 1.2 配置服务器接口
7. server.get("/goods/list", (req, res) => {
8.     /**
9.      *  req(request): 本次请求的相关信息
10.      *  res(response): 本次响应的相关信息
11.      *
12.      *  req.query: 对 GET 请求体请求参数的解析
13.      *      如果有参数, req.query 就是 {a:xxx, b:yyy}
14.      *      如果没有参数, req.query 就是 {}
15.      */
16.     console.log(req.query);
17.     // res.end(JSON.stringify({code: 1, msg: '成功'}))
18.     res.send({ code: 1, msg: "成功" });
19. });
21. server.post("/users/login", (req, res) => {
22.     console.log(req.query);
23.     // 注意! express 不会自动解析 post 请求的 请求体
24.     res.send({
25.         code: 1,
26.         msg: "接收 POST 请求成功, 但是还没有解析请求体, 参数暂时不能带回",
27.     });
28. });
30. // 2. 给服务器配置监听端口号

复制代码

express 的路由

express 提供了一个方法能够让我们制作一张 "路由表"
目的就是为了帮助我们简化 服务器index.js 内部的代码量
服务器根目录/router/goods.js

1. // 专门存放于 goods 相关的路由表
2. const express = require("express");
4. // 创建一个路由表
5. const Router = express.Router();
7. // 向表上添加内容, 添加内容的语法, 向服务上添加的语法一样
8. Router.get("/info", (req, res) => {
9.     res.send({
10.         code: 1,
11.         message: "您请求 /goods/list 成功",
12.     });
13. });
15. // 导出当前路由表
16. module.exports.goodsRouter = Router

复制代码

服务器根目录 /router/index.js

1. // 专门存放于 goods 相关的路由表
2. const express = require("express");
4. // 创建一个路由表
5. const Router = express.Router();
7. // 向表上添加内容, 添加内容的语法, 向服务上添加的语法一样
8. Router.get("/info", (req, res) => {
9. res.send({
10. code: 1,
11. message: "您请求 /goods/list 成功",
12. });
13. });
15. // 导出当前路由表
16. module.exports.goodsRouter = Router

复制代码

服务器根目录 /index.js

1. // 0. 下载并导入 express
2. const express = require("express");
4. const router = require("./router"); // 相当于 ./router/index.js
6. // 1. 创建服务器
7. const server = express();
9. // 1.1 配置静态资源
10. server.use("/static", express.static("./client"));
12. // 1.2 配置接口
13. server.use("/api", router);
15. // 2. 给服务器监听端口号
16. server.listen(8080, () => {
17.     console.log("服务启动成功, 端口号8080~~~");
18. });

复制代码

express 的中间件

概念

○在任意两个环节之间添加的一个环节, 就叫做中间件
分类

全局中间件

■语法: server.use(以什么开头, 函数)
●server: 创建的服务器, 一个变量而已
●以什么开头: 可以不写, 写的话需要是字符串
●函数: 你这个中间件需要做什么事

1. // 0. 下载并导入第三方模块
2. const express = require("express");
3. // 0. 引入路由总表
4. const router = require("./router");
5. // 0. 引入内置的 fs 模块
6. const fs = require("fs");
8. // 1. 开启服务器
9. const app = express();
11. // 1.1 开启静态资源
12. app.use("/static", express.static("./client/"));
14. // 1.2 添加一个 中间件, 让所有请求进来的时候, 记录一下时间与请求地址
15. app.use(function (req, res, next) {
16.     fs.appendFile("./index.txt", `${new Date()} --- ${req.url} \n`, () => {});
18.     next(); // 运行完毕后, 去到下一个中间件
19. });
21. // 1.3 开启路由表
22. app.use("/api", router);
24. // 2. 给服务添加监听
25. app.listen(8080, () => console.log("服务器开启成功, 端口号8080~"));

复制代码

路由级中间件

■语法: router.use(以什么开头, 函数)
●router: 创建的路由表, 一个变量而已
●以什么开头: 可以不写, 写的话需要是字符串
●函数: 你这个中间件需要做什么事

1. // 路由分表
2. const router = require("express").Router();
4. // 导入 cart 中间件
5. const cartMidd = require("../middleware/cart");
7. // 添加路由级中间件
8. router.use(function (req, res, next) {
9.     /**
10.      *  1. 验证 token 存在并且没有过期才可以
11.      *          规定: 请求头内必须有 authorization 字段携带 token 信息
12.      */
13.     const token = req.headers.authorization;
15.     if (!token) {
16.         res.send({
17.             code: 0,
18.             msg: "没有 token, 不能进行 该操作",
19.         });
20.     }
22.     next();
23. });
25. router.get("/list", cartMidd.cartlist, (req, res) => {
26.     res.send({
27.         code: 1,
28.         msg: "请求 /cart/list 接口成功",
29.     });
30. });
32. router.get("/add", (req, res) => {
33.     res.send({
34.         code: 1,
35.         msg: "请求 /cart/add 接口成功",
36.     });
37. });
39. module.exports.cartRouter = router;

复制代码

请求级中间件

■直接在请求路由上, 在路由处理函数之前书写函数即可

1. // 路由分表
2. const router = require("express").Router();
3. // 导入 cart 中间件
4. const cartMidd = require("../middleware/cart");
6. router.get("/list", cartMidd.cartlist, (req, res) => {
7.     res.send({
8.         code: 1,
9.         msg: "请求 /cart/list 接口成功",
10.     });
11. });
13. router.get("/add", (req, res) => {
14.     res.send({
15.         code: 1,
16.         msg: "请求 /cart/add 接口成功",
17.     });
18. });
20. module.exports.cartRouter = router;
22. // ../middleware/cart.js
23. const cartlist = (req, res, next) => {
24.     // 1. 判断参数是否传递
25.     const { current, pagesize } = req.query;
26.     if (!current || !pagesize) {
27.         res.send({
28.             code: 0,
29.             msg: "参数current或者参数pagesize没有传递",
30.         });
31.         return;
32.     }
33.     if (isNaN(current) || isNaN(pagesize)) {
34.         res.send({
35.             code: 0,
36.             msg: "参数current或者参数pagesize 不是 数字类型的, 请处理",
37.         });
38.         return;
39.     }
41.     next();
42. };
44. module.exports.cartlist = cartlist

复制代码

错误中间件

■本质上就是一个全局中间件, 只不过处理的内容

1. // 0. 下载并导入第三方模块
2. const express = require("express");
3. // 0. 引入路由总表
4. const router = require("./router");
5. // 0. 引入内置的 fs 模块
6. const fs = require("fs");
8. // 1. 开启服务器
9. const app = express();
11. // 1.1 开启静态资源
12. app.use("/static", express.static("./client/"));
14. // 1.2 开启路由表
15. app.use("/api", router);
17. // 1.3 注册全局错误中间件(必须接收四个参数)
18. app.use(function (err, req, res, next) {
19.     if (err === 2) {
20.         res.send({
21.             code: 0,
22.             msg: "参数current或者参数pagesize没有传递",
23.         });
24.     } else if (err === 3) {
25.         res.send({
26.             code: 0,
27.             msg: "参数current或者参数pagesize 不是 数字类型的, 请处理",
28.         });
29.     } else if (err === 4) {
30.         res.send({
31.             code: 0,
32.             msg: "没有 token, 不能进行 该操作",
33.         });
34.     }
35. });
37. // 2. 给服务添加监听
38. app.listen(8080, () => console.log("服务器开启成功, 端口号8080~"));
39. /*
40. *      4. 错误中间件
41. *          为了统一进行错误处理
42. *
43. *      例子:
44. *          接口参数少
45. *              请求 /goods/list 参数少
46. *              请求 /cart/list 参数少
47. *              请求 /news/list 参数少
48. *              res.send({code: 0, msg: '参数数量不对'})
49. *          接口参数格式不对
50. *              请求 /users/login 格式不对
51. *              请求 /goods/list 格式不对
52. *              res.send({code: 0, msg: '参数格式不对})
53. *
54. *      思考:
55. *          正确的时候, 直接返回结果给前端
56. *          只要出现了错误, 统一回到全局路径上
57. *
58. *      操作:
59. *          当你在任何一个环节的中间件内
60. *          => 调用 next() 的时候, 表示的都是去到下一个环节
61. *          => 调用 next(参数) 的时候, 表示去到的都是全局错误环节
62. *      参数:
63. *          参数的传递需要自己和自己约定一些暗号
64. *          2: 表示 接口参数少
65. *          3: 表示 接口参数格式不对
66. *          4: 表示没有token
67. *          5: XXXX....
68. */

复制代码

token 的使用

●token 的使用分为两步
○加密
■比如用户登陆成功后, 将一段信息加密生成一段 token, 然后返回给前端
○解密
■比如用户需要访问一些需要登陆后才能访问的接口, 就可以把登录时返回的token保存下来
■在访问这些接口时, 携带上token即可
■而我们接收到token后, 需要解密token, 验证是否为正确的 token 或者 过期的 token
1.加密

1. /**
2. *  使用一个 第三方包   jsonwebtoken
3. */
4. const jwt = require("jsonwebtoken");
6. /**
7. *  1. 加密
8. *      语法: jwt.sign(你要存储的信息, '密钥', {配置信息})
9. */
10. const info = { id: 1, nickname: "肠旺面" };
11. const token = jwt.sign(info, "XXX", { expiresIn: 60 });
13. // console.log(token);
14. /*
15.     eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
16.     eyJpZCI6MSwibmlja25hbWUiOiLogqDml7rpnaLliqDnjKrohJoiLCJpYXQiOjE2NzAxNTYwMDgsImV4cCI6MTY3MDE1NjA2OH0.
17.     12-87hSrMYmpwXRMuYAbf08G7RDSXM2rEI49jaK5wMw
18. */

复制代码

2.解密

1. jwt.verify(token, "XXX", (err, data) => {
2.     if (err) return console.log(err); // JsonWebTokenError: invalid signature
3.     console.log(data);
4. });

复制代码

来源:https://www.cnblogs.com/qian-fen/p/17441180.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！