有时候如果我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。那么好多图片就会资源请求失败返回 403。

第三方平台怎么处理图片资源保护的？

服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

Referer 是什么东西？

扩展参考：http://www.ruanyifeng.com/blog/2019/06/http-referer.html

1

Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。

需要注意的是 referer 实际上是 “referrer” 误拼写。参见 HTTP referer on Wikipedia （HTTP referer 在维基百科上的条目）来获取更详细的信息。

怎么解决？

不要发送 referrer ，对方服务端就不知道你从哪来的了，姑且认为是你是自己人吧。

如何设置不发送 referrer？

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：

1

<img src="http://……" referrerpolicy="no-referrer" />

或者直接在 HTMl 页面头中通过 meta 属性全局配置：

1

<meta name="referrer" content="no-referrer" />

Node.js

一、Node.js 基础

1、Node.js 是什么

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，用于后端 开发。通俗来讲，Node.js 就是一款应用程序、一款软件，它可以运行 JavaScript 。

JavaScript 有两种运行环境：浏览器和 Node.js。在浏览器中 JavaScript 通过调用浏览器内置的 DOM、BOM 这样的 API 函数（接口）操作 DOM 和 BOM，并被浏览器的 JavaScript 解析引擎（例如 Chrome 的 V8 引擎）所解析运行。同样在 Node.js 中也是这样，只不过他们各自的内置 API 不同

2、Node.js 可以做什么

• 基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用
• 基于 Electron 框架（https://electronjs.org/），可以构建跨平台的*桌面 应用*
• 基于 restify 框架（http://restify.com/），可以快速构建 API 接口项目
• _读写和操作数据库_、创建实用的命令行工具辅助前端开发、etc…

二、计算机基础知识

1、计算机基本组成

计算机由硬件和软件两大部分组成。硬件主要有以下部分：

CPU：中央处理器，计算机最核心的配件，负责所有的计算、逻辑处理

内存：用来存储数据。程序、运行的游戏、打开的浏览器都要加载到内存中才能运行，程序读取的数据、计算的结果也都在内存中，内存的大小决定了能加载的东西的多少。特点是读写速度较快，断电丢失数据

硬盘：用来存储数据。特点是读写数据较慢，断电不丢失数据

主板：存放在内存中数据需要被 CPU 读取，CPU 计算完成后，还要把数据写入到内存中，然而 CPU 不能直接插在内存上，这就需要主板出马了，主板上很多个插槽，CPU 和内存都是插在主板上，主板的芯片组和总线解决了 CPU 和内存之间的通讯问题，芯片组控制数据传输的流转，决定数据从哪里流向哪里，总线是实际数据传输的告诉公里，总线速度决定了数据的传输速度

显卡：显卡里有 GPU 图形处理器，主要负责图形渲染，它将处理完的信号传递给显示器，最终由显示器呈现画面。使用图形界面操作系统的计算机，显卡是必不可少的。现在的主板都带了内置的显卡，如果想玩游戏、做图形渲染，一般需要一张单独的显卡，插在主板上

计算机软件分为系统软件和应用软件两大类。系统软件是指各类操作系统，如 Windows、Linux、UNIX、MacOS 等。操作系统本质上也是一种应用程序，用来管理和调度硬件资源。比如操作系统可以决定 CPU 处理哪些程序，比如操作系统可以与硬盘交互，读写文件。可以还包括操作系统的补丁程序及硬件驱动程序都属于系统类软件。应用程序是指用户可以使用的各种程序设计语言，以及各种程序设计语言编制的应用程序的集合。

2、程序运行的基本流程

当我们打开一个程序的时候，首先系统会将程序从硬盘中载入到内存中，再交由 CPU 处理。CPU 处理完之后如果遇到图形信号将其交由显卡做进一步处理，最终呈现图像。遇到声音信号交由声卡处理最终呈现声音。

3、进程与线程

进程：可以理解为程序的一次执行过程。比如打开资源管理器，我们可以看到计算机正在执行的进程

线程：线程是一个进程中执行的一个执行流。一个线程一定是属于某个进程的。一个进程可以分成很多个线程。可以将进程理解为一个完整的大的项目，而线程是这个项目中的某一个功能模块

三、内置模块 Buffer（缓冲器）

1、概念

Buffer 是一个类似于数组的对象 ，用于表示固定长度的字节序列。 Buffer 本质是一段内存空间，专门用来处理 二进制数据

2、特点

• Buffer 大小固定且无法调整
• Buffer 性能较好，可以直接对计算机内存进行操作
• 每个元素的大小为 1 字节（byte）

3、使用

Buffer.alloc 创建 Buffer

Buffer.allocUnsafe 创建 Buffer

Buffer.from 创建 Buffer

toString 方法将 Buffer 转为字符串

toString 默认是按照 utf-8 编码方式进行转换的

四、内置模块 fs 文件系统

fs 全称为 file system ，称为文件系统 ，是 Node.js 中的内置模块，可以对计算机中的磁盘进行操作

1、文件写入

文件写入就是将数据保存到文件中，我们可以使用如下几个方法来实现该效果

writeFile 异步写入

语法： fs.writeFile(file, data[, options], callback)

参数说明：

• file 文件路径
• data 待写入的数据
• options 选项设置 （可选）
• callback 写入 err 回调

返回值： undefined

代码示例：

1
2
3
4
5
6
7
8
9
10
11

// require 是 Node.js 环境中的'全局'变量，用来导入模块
const fs = require("fs");
//将 『三人行，必有我师焉。』 写入到当前文件夹下的『座右铭.txt』文件中
fs.writeFile("./座右铭.txt", "三人行，必有我师焉。", (err) => {
  //如果写入失败，则回调函数调用时，会传入错误对象，如写入成功，会传入 null
  if (err) {
    console.log(err);
    return;
  }
  console.log("写入成功");
});

writeFileSync 同步写入

语法: fs.writeFileSync(file, data[, options])

参数与 fs.writeFile 大体一致，只是没有 callback 参数

返回值： undefined

代码示例：

1
2
3
4
5

try {
  fs.writeFileSync("./座右铭.txt", "三人行，必有我师焉。");
} catch (e) {
  console.log(e);
}

注意 writeFile 和 writeFileSync 会将文件中原有的内容覆盖掉，因此有了追加写入

appendFile / appendFileSync 追加写入

appendFile 作用是在文件尾部追加内容，appendFile 语法与 writeFile 语法完全相同

代码示例：

1
2
3
4
5

fs.appendFile("./座右铭.txt", "择其善者而从之，其不善者而改之。", (err) => {
  if (err) throw err;
  console.log("追加成功");
});
fs.appendFileSync("./座右铭.txt", "\r\n温故而知新, 可以为师矣");

createWriteStream 流式写入

语法： fs.createWriteStream(path[, options])

返回值： Object

代码示例：

1
2
3
4
5
6

let ws = fs.createWriteStream("./观书有感.txt");
ws.write("半亩方塘一鉴开\r\n");
ws.write("天光云影共徘徊\r\n");
ws.write("问渠那得清如许\r\n");
ws.write("为有源头活水来\r\n");
ws.end();

程序打开一个文件是需要消耗资源的 ，流式写入可以减少打开关闭文件的次数。 流式写入方式适用于 大文件写入或者频繁写入 的场景, writeFile 适合于 写入频率较低的场景

写入文件的场景

文件写入 在计算机中是一个非常常见的操作，下面的场景都用到了文件写入

• 下载文件
• 安装软件
• 保存程序日志，如 Git
• 编辑器保存文件
• 视频录制

当 需要持久化保存数据 的时候，应该想到 文件写入

2、文件读取

文件读取顾名思义，就是通过程序从文件中取出其中的数据，我们可以使用如下几种方式：

readFile 异步读取

语法： fs.readFile(path[, options], callback)

返回值： undefined

代码示例：

1
2
3
4
5
6
7
8
9
10

//导入 fs 模块
const fs = require("fs");
fs.readFile("./座右铭.txt", (err, data) => {
  if (err) throw err;
  console.log(data);
});
fs.readFile("./座右铭.txt", "utf-8", (err, data) => {
  if (err) throw err;
  console.log(data);
});

readFileSync 同步读取

语法： fs.readFileSync(path[, options])

返回值： string | Buffer

代码示例：

1
2

let data = fs.readFileSync("./座右铭.txt");
let data2 = fs.readFileSync("./座右铭.txt", "utf-8");

createReadStream 流式读取

语法： fs.createReadStream(path[, options])

返回值： Object

代码示例：

1
2
3
4
5
6
7
8
9
10
11

//创建读取流对象
let rs = fs.createReadStream("./观书有感.txt");
//每次取出 64k 数据后执行一次 data 回调
rs.on("data", (data) => {
  console.log(data);
  console.log(data.length);
});
//读取完毕后, 执行 end 回调
rs.on("end", () => {
  console.log("读取完成");
});

读取文件应用场景

• 电脑开机
• 程序运行
• 编辑器打开文件
• 查看图片
• 播放视频
• 播放音乐
• Git 查看日志
• 上传文件
• 查看聊天记录

3、文件移动与重命名

在 Node.js 中，我们可以使用 rename 或 renameSync 来移动或重命名文件或文件夹

语法：fs.rename(oldPath, newPath, callback)

fs.renameSync(oldPath, newPath)

代码示例：

1
2
3
4
5

fs.rename("./观书有感.txt", "./论语/观书有感.txt", (err) => {
  if (err) throw err;
  console.log("移动完成");
});
fs.renameSync("./座右铭.txt", "./论语/我的座右铭.txt");

4、文件删除

在 Node.js 中，我们可以使用 unlink 或 unlinkSync 来删除文件

语法：

fs.unlink(path, callback)

fs.unlinkSync(path)

代码示例：

1
2
3
4
5
6

const fs = require("fs");
fs.unlink("./test.txt", (err) => {
  if (err) throw err;
  console.log("删除成功");
});
fs.unlinkSync("./test2.txt");

5、文件夹操作

借助 Node.js 的能力，我们可以对文件夹进行 创建 、 读取 、 删除 等操作

mkdir 创建文件夹

在 Node.js 中，我们可以使用 mkdir 或 mkdirSync 来创建文件夹

语法：fs.mkdir(path[, options], callback)

fs.mkdirSync(path[, options])

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12

//异步创建文件夹
fs.mkdir("./page", (err) => {
  if (err) throw err;
  console.log("创建成功");
});
//递归异步创建
fs.mkdir("./1/2/3", { recursive: true }, (err) => {
  if (err) throw err;
  console.log("递归创建成功");
});
//递归同步创建文件夹
fs.mkdirSync("./x/y/z", { recursive: true });

readdir 读取文件夹

在 Node.js 中，我们可以使用 readdir 或 readdirSync 来读取文件夹

语法：fs.readdir(path[, options], callback)

fs.readdirSync(path[, options])

示例代码：

1
2
3
4
5
6
7
8

//异步读取
fs.readdir("./论语", (err, data) => {
  if (err) throw err;
  console.log(data);
});
//同步读取
let data = fs.readdirSync("./论语");
console.log(data);

rmdir 删除文件夹

在 Node.js 中，我们可以使用 rmdir 或 rmdirSync 来删除文件夹

语法： fs.rmdir(path[, options], callback)

fs.rmdirSync(path[, options])

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//异步删除文件夹
fs.rmdir("./page", (err) => {
  if (err) throw err;
  console.log("删除成功");
});
//异步递归删除文件夹
fs.rmdir("./1", { recursive: true }, (err) => {
  if (err) {
    console.log(err);
  }
  console.log("递归删除");
});
//同步递归删除文件夹
fs.rmdirSync("./x", { recursive: true });

6、路径问题

fs 模块对资源进行操作时，路径的写法有两种：

相对路径

• ./座右铭.txt 当前目录下的座右铭.txt
• 座右铭.txt 等效于上面的写法
• ../座右铭.txt 当前目录的上一级目录中的座右铭.txt

绝对路径

• D:/Program Files windows 系统下的绝对路径
• /usr/bin Linux 系统下的绝对路径

相对路径中所谓的 当前目录 ，指的是 命令行的工作目录 ，而并非是文件的所在目录。所以当命令行的工作目录与文件所在目录不一致时，会出现一些 BUG。因此可以使用 dirname 与文件名拼接成绝对路径。dirname 与 require 类似，都是 Node.js 环境中的’全局’变量。**dirname 保存着 当前文件所在目录的绝对路径。使用 fs 模块的时候，尽量使用 **dirname 将路径转化为绝对路径，这样可以避免相对路径产生的 Bug

五、内置模块 path

path 模块提供了操作路径的功能，几个较为常用的 API：

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const path = require("path");
//获取路径分隔符
console.log(path.sep);
//拼接绝对路径
console.log(path.resolve(__dirname, "test"));
//解析路径
let pathname = "D:/program file/nodejs/node.exe";
console.log(path.parse(pathname));
//获取路径基础名称
console.log(path.basename(pathname));
//获取路径的目录名
console.log(path.dirname(pathname));
//获取路径的扩展名
console.log(path.extname(pathname));

六、http

1、http 协议

HTTP（hypertext transport protocol）协议，中文叫超文本传输协议。是一种基于 TCP/IP 的应用层通信协议，它详细规定了 浏览器 和万维网 服务器 之间互相通信的规则

协议中主要规定了两个方面的内容

• 客户端：用来向服务器发送数据，可以被称之为请求报文
• 服务端：向客户端返回数据，可以被称之为响应报文

请求报文的组成

• 请求行
• 请求头
• 空行
• 请求体

HTTP 的请求行

• 请求方法（get、post、put、delete 等）
• 请求 URL（统一资源定位器）
• HTTP 协议版本号

HTTP 请求头

常见的请求头有：

HTTP 的请求体

请求体内容的格式是非常灵活的， （可以是空）==> GET 请求， （也可以是字符串，还可以是 JSON）===> POST 请求

例如：

• 字符串：keywords=手机&price=2000
• JSON：{“keywords”:”手机”,”price”:2000}

响应报文的组成

响应行

HTTP/1.1 200 OK

• HTTP/1.1：HTTP 协议版本号
• 200：响应状态码
• OK：响应状态描述

响应头

• Cache-Control:缓存控制 private 私有的，只允许客户端缓存数据
• Connection: 链接设置
• Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为 html，字符集 utf-8
• Content-Length:响应体的长度，单位为字节

空行

响应体

响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON

2、IP 地址

IP 地址就是接入互联网的每台计算机的唯一地址，用来标识接入互联网的设备。通常用“点分十进制”表示成（a.b.c.d）的形式，其中，a,b,c,d 都是 0~255 之间的十进制整数。例如：用 点分十进表示的 IP 地址 （192.168.1.1）

共享 IP

为了更好的利用 IP 地址，节省资源。以家庭为例，手机、电脑、打印机、电视连接到同一路由器，路由器为他们分配各自的 IP，这就形成了一个局域网（私网），局域网中的设备之间可以互相通信。为了能够访问外部资源，还需接入到互联网才行。这样一个家庭中的所有设备就可以通过一个公网（广域网）IP 访问互联网了，实现了 IP 共享

此外，还有一类 IP 称为本机回环 IP 地址，比如 127.0.0.1，访问这个 IP 地址实际上就是访问本机，等价于 loacalhost

端口号

在一台电脑中，可以运行成百上千个 web 服务。每个 web 服 务都对应一个唯一的端口号。客户端发送过来的 网络请求，通过端口号，可以 被准确地交给对应的 web 服务进行处理

域名和域名服务器

尽管 IP 地址能够唯一地标记网络上的计算机，但 IP 地址是一长串数字， 不直观，而且不便于记忆，于是人们又发明了另一套 字符型的地址方案，即所谓的域名（Domain Name）地址。 IP 地址和域名是一一对应的关系，这就好比人名和身份证 ID 一样。这份对应关系存放在一种叫做域名服务器(DNS，Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可，对应的转换工作由域名服务器 实现。因此，域名服务器就是提供 IP 地址和域名之间的转换服务的服务器

3、创建 http 服务

使用 nodejs 创建 HTTP 服务

1
2
3
4
5
6
7
8
9
10
11
12

//1. 导入 http 模块
const http = require("http");
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
  response.end("Hello HTTP server");
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
  console.log("服务已经启动, 端口 9000 监听中...");
});

注意事项

响应内容中文乱码的解决办法

1

response.setHeader("content-type", "text/html;charset=utf-8");

HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000， 8080，8090，9000 等

获取 HTTP 请求报文

想要获取请求的数据，需要通过 request 对象

注意事项：

• request.url 只能获取路径以及查询字符串(端口号以后的内容)，无法获取 URL 中的域名以及协议的内容
• request.headers 将请求信息转化成一个对象，并将属性名都转化成了『小写』
• 关于路径：如果访问网站的时候，只填写了 IP 地址或者是域名信息，此时请求的路径为『 / 』
• 关于 favicon.ico：这个请求是属于浏览器自动发送的请求

设置 HTTP 响应报文

练习

搭建 HTTP 服务，响应一个 4 行 3 列的表格，并且要求表格有 隔行换色效果 ，且 点击 单元格能 高亮显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

//导入 http 模块
const http = require("http");
//创建服务对象
const server = http.createServer((request, response) => {
  response.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
padding: 20px 40px;
}
table tr:nth-child(odd){
background: #aef;
}
table tr:nth-child(even){
background: #fcb;
}
table, td{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<script>
//获取所有的 td
let tds = document.querySelectorAll('td');
//遍历
tds.forEach(item => {
item.onclick = function(){
this.style.background = '#222';
}
})
</script>
</body>
</html>
`); //设置响应体
});
//监听端口, 启动服务
server.listen(9000, () => {
  console.log("服务已经启动....");
});

网页资源的基本加载过程

网页资源的加载都是循序渐进的，首先获取 HTML 的内容， 然后解析 HTML 在发送其他资源的请求，如 CSS，Javascript，图片等

静态资源服务

静态资源是指 内容长时间不发生改变的资源 ，例如图片，视频，CSS 文件，JS 文件，HTML 文件，字体文 件等

动态资源是指 内容经常更新的资源 ，例如百度首页，网易首页，京东搜索列表页面等

网站根目录或静态资源目录

HTTP 服务在哪个文件夹中寻找静态资源，那个文件夹就是 静态资源目录 ，也称之为 网站根目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

require("http")
  .createServer((request, response) => {
    //获取请求的方法已经路径
    let { url, method } = request;
    //判断请求方式以及请求路径
    if (method == "GET" && url == "/index.html") {
      //需要响应文件中的内容
      let data = require("fs").readFileSync(__dirname + "/index.html");
      response.end(data);
    } else if (method == "GET" && url == "/css/app.css") {
      //需要响应文件中的内容
      let data = require("fs").readFileSync(__dirname + "/public/css/app.css");
      response.end(data);
    } else if (method == "GET" && url == "/js/app.js") {
      //需要响应文件中的内容
      let data = require("fs").readFileSync(__dirname + "/public/js/app.js");
      response.end(data);
    } else {
      //404响应
      response.statusCode = 404;
      response.end("<h1>404 Not Found</h1>");
    }
  })
  .listen(80, () => {
    console.log("80端口正在启动中....");
  });

上面这段代码根据路径和方法相应不同的资源，显然这种方式不够完美，我们需要更简洁的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

require("http")
  .createServer((request, response) => {
    //获取请求的方法已经路径
    let { url, method } = request;
    //文件夹路径
    let rootDir = __dirname + "/public";
    //拼接文件路径
    let filePath = rootDir + url;
    //读取文件内容
    fs.readFile(filePath, (err, data) => {
      //判断
      if (err) {
        //如果出现错误，响应404状态码
        response.statusCode = 404;
        response.end("<h1>404 Not Found</h1>");
      } else {
        //响应文件内容
        response.end(data);
      }
    });
  })
  .listen(80, () => {
    console.log("80端口正在启动中....");
  });

通过这种方法可以根据请求路径动态响应资源

设置资源类型（mime 类型）

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、 文件或字节流的性质和格式。

HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型，浏览器会根据该类型决定如何处理 资源

下面是常见文件对应的 mime 类型

GET 和 POST

• GET 主要用来获取数据，POST 主要用来提交数据
• GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求， POST 带参数请求是将参数放到请求体中
• POST 请求相对 GET 安全一些，因为在浏览器中参数会暴露在地址栏
• GET 请求大小有限制，一般为 2K，而 POST 请求则没有大小限制

以下均为 GET 请求：

• 在地址栏直接输入 url 访问
• 点击 a 链接
• link 标签引入 css
• script 标签引入 js
• img 标签引入图片
• form 标签中的 method 为 get （不区分大小写）
• ajax 中的 get 请求

以下均为 POST 请求：

• form 标签中的 method 为 post（不区分大小写）
• AJAX 的 post 请求

七、模块化

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过 程。对于整个系统来说，模块是可组 合、分解和更换的单元 编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相 依赖的多个小模块

把代码进行模块化拆分的好处

• 防止命名冲突
• 高复用性
• 高维护性

common.js 暴露数据

• module.exports = value
• exports.name = value

注意

• module.exports 可以暴露 任意 数据
• 不能使用 exports = value 的形式暴露数据。exports = module.exports = {} ，require 返回的永远是目标模块中 module.exports 的值（因为 exports 和 module.exports 是对象，存的是引用。如果直接使用 exports = value 赋值，相当于将 exports 与原来 module.exports 的链接断开了 ）

common.js 导入（引入、加载）模块

在模块中使用 require 传入文件路径即可引入文件

1

const test = require("./me.js");

require 使用的一些注意事项：

• 对于自定义模块，导入时路径建议写相对路径 ，且不能省略 ./ 和 ../
• js 和 json 文件导入时可以不用写后缀，c/c++编写的 node 扩展文件也可以不写后缀，但是一 般用不到
• 如果导入的路径是个文件夹，则会 首先 检测该文件夹下 package.json 文件中 main 属性对应 的文件。如果存在则导入，反之如果文件不存在会报错。如果 main 属性不存在，或者 package.json 不存在，则会尝试导入文件夹下的 index.js 和 index.json 。如果还是没找到，就会报错
• 导入 node.js 内置模块时，直接 require 模块的名字即可，无需加路径

八、包管理工具

包管理工具是一个通用的概念，很多编程语言都有包管理工具

npm 全称 Node Package Manager ，翻译为中文意思是『Node 的包管理工具』。它是 node.js 官方内置的包管理工具

npm 初始化

npm init 命令的作用是将文件夹初始化为一个『包』， 交互式创建 package.json 文件。package.json 是包的配置文件，每个包都必须要有 package.json。也可以使用 npm init -y 或者 npm init –yes 极速创建 package.json。下面是一个 package.json 的示例

1
2
3
4
5
6
7
8
9
10
11
12

{
"name": "1-npm", #包的名字
"version": "1.0.0", #包的版本
"description": "", #包的描述
"main": "index.js", #包的入口文件
"scripts": { #脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", #作者
"license": "ISC" #开源证书
}

nodemodules 文件夹用来存放所有已安装到项目中的包。注意：今后在项目开发中，一定要把 nodemodules 文件夹，添加 到 .gitignore 忽略文件中

package-lock.json 配置文件用来记录 node_modules 目录下的每一个包 的下载信息，例如包的名字、版本号、下载地址等

生产依赖与开发依赖

我们可以在安装时设置选项来区分 依赖的类型 ，目前分为两类：

全局安装

我们可以执行安装选项 -g 进行全局安装

1

npm i -g nodemon

全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令

环境变量 Path

Path 是操作系统的一个环境变量，可以设置一些文件夹的路径，在当前工作目录下找不到可执行文件 时，就会在环境变量 Path 的目录中挨个的查找，如果找到则执行，如果没有找到就会报错

如果希望某个程序在任何工作目录下都能正常运行，可以将该程序的所在目录配置到环境 变量 Path 中

安装包依赖

1
2

npm i
npm install

安装指定版本的包

1
2
3
4

## 格式
npm i <包名@版本号>
## 示例
npm i jquery@1.11.2

删除依赖

1
2
3
4
5

## 局部删除
npm remove uniq
npm r uniq
## 全局删除
npm remove -g nodemon

yarn

yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具，官方网址：https://yarnpkg.com/

yarn 官方宣称的一些特点

• 速度超快：yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大 化资源利用率，因此安装速度更快
• 超级安全：在执行代码之前，yarn 会通过算法校验每个安装包的完整性
• 超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，yarn 能够保证在不同系统上无差异的 工作

yarn 常用命令

nvm

nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具，方便切换不同版本的 Node.js

nvm 的使用非常的简单，跟 npm 的使用方法类似

首先先下载 nvm，下载地址 https://github.com/coreybutler/nvm-windows/releases，选择 nvm-setup.exe 下载即可

常用命令

九、express 框架

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架http://www.expressjs.com.cn/

对于前端程序员来说，最常见的两种服务器分别是：

• Web 网站服务器：专门对外提供 Web 网页资源的服务器
• API 接口服务器：专门对外提供 API 接口的服务器

使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口 的服务器

1、express 使用

express 本身是一个 npm 包，所以可以通过 npm 安装

1

npm i express

express 初体验

1
2
3
4
5
6
7
8
9
10
11
12

//1. 导入 express
const express = require("express");
//2. 创建应用对象
const app = express();
//3. 创建路由规则
app.get("/home", (req, res) => {
  res.send("hello express server");
});
//4. 监听端口 启动服务
app.listen(3000, () => {
  console.log("服务已经启动, 端口监听为 3000...");
});

在浏览器访问 http://127.0.0.1:3000/home

2、express 路由

官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求

路由的使用

一个路由的组成有请求方法 ， 路径和回调函数 组成

express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.(path，callback)

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//导入 express
const express = require("express");
//创建应用对象
const app = express();
//创建 get 路由
app.get("/home", (req, res) => {
  res.send("网站首页");
});
//首页路由
app.get("/", (req, res) => {
  res.send("我才是真正的首页");
});
//创建 post 路由
app.post("/login", (req, res) => {
  res.send("登录成功");
});
//匹配所有的请求方法
app.all("/search", (req, res) => {
  res.send("1 秒钟为您找到相关结果约 100,000,000 个");
});
//自定义 404 路由
app.all("*", (req, res) => {
  res.send("<h1>404 Not Found</h1>");
});
//监听端口 启动服务
app.listen(3000, () => {
  console.log("服务已经启动, 端口监听为 3000");
});

路由的匹配过程

每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后， 才会调用对应的处理函数

在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的 URL 同时 匹配成功，则 Express 会将这次请求，转交给对应的 function 函数进行处理

注意

• 路由匹配按照定义的先后顺序进行匹配
• 请求类型和请求的 URL 同时匹配成功， 才会调用对应的处理函数

模块化路由

为了方便对路由进行模块化的管理，Express 不建议将路由直接挂载到 app 上，而是推荐将路由抽离为单独的模块。 将路由抽离为单独模块的步骤如下：

• 创建路由模块对应的 .js 文件
• 调用 express.Router() 函数创建路由对象
• 向路由对象上挂载具体的路由
• 使用 module.exports 向外共享路由对象
• 使用 app.use() 函数注册路由模块

1
2
3
4
5
6
7
8
9
10
11
12
13

//1. 导入 express
const express = require("express");
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get("/", (req, res) => {
  res.send("首页");
});
router.get("/cart", (req, res) => {
  res.send("购物车");
});
//4. 暴露
module.exports = router;

express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象

导入使用路由

1
2
3
4
5
6
7
8
9

const express = require("express");
const app = express();
//5.引入子路由文件
const homeRouter = require("./routes/homeRouter");
//6.设置和使用中间件
app.use(homeRouter);
app.listen(3000, () => {
  console.log("3000 端口启动....");
});

为路由模块添加前缀

1
2
3
4

//1、导入路由模块
const userRouter = require("./router/user.js");
//2、使用app.use()注册路由模块，并添加统一的访问前缀 /api
app.use("/api", userRouter);

获取 URL 中的查询参数

通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到 服务器的参数：

1
2
3
4
5
6

app.get("/", (req, res) => {
  // req.query默认是一个空对象
  //  客户端使用?name=zs&age=20这种查询字符串的形式发送到服务器的参数，
  //  可以通过req.query对象访问到
  console.log(req.query);
});

获取 URL 中的动态参数

通过 req.params 对象，可以访问到 URL 中，通过 : 匹配到的动态参数

1
2
3
4
5

app.get("/user/:id", (req, res) => {
  // req.params默认是一个空对象
  //  里面存放着通过:动态匹配到的参数值
  console.log(req.params);
});

express 响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//获取请求的路由规则
app.get("/response", (req, res) => {
  //1. express 中设置响应的方式兼容 HTTP 模块的方式
  res.statusCode = 404;
  res.statusMessage = "xxx";
  res.setHeader("abc", "xyz");
  res.write("响应体");
  res.end("xxx");
  //2. express 的响应方法
  res.status(500); //设置响应状态码
  res.set("xxx", "yyy"); //设置响应头
  res.send("中文响应不乱码"); //设置响应体
  //连贯操作
  res.status(404).set("xxx", "yyy").send("你好朋友");
  //3. 其他响应
  res.redirect("http://atguigu.com"); //重定向
  res.download("./package.json"); //下载响应
  res.json(); //响应 JSON
  res.sendFile(__dirname + "/home.html"); //响应文件内容
});

注意，使用 res.send()发送的中文并没有乱码，这是因为 express 自动在响应头添加了res.setHeader(‘content-type’,’text/html;charset=utf-8’);

3、express 中间件

中间件（Middleware）本质是一个回调函数

中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）

中间件的作用 就是 使用函数封装公共操作，简化代码

当一个请求到达 Express 的服务器之后，可以连续调用多个中间件，从而 对这次请求进行预处理

注意：中间件函数的形参列表中，必须包含 next 参数。而路由处理函数中 只包含 req 和 res。**next 函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下 一个中间件或路由

定义全局中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生 效的中间件

声明中间件函数

1
2
3
4
5
6

let recordMiddleware = function (request, response, next) {
  //实现功能代码
  //.....
  //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
  next();
};

应用中间件

通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件

1

app.use(recordMiddleware);

声明时可以直接将匿名函数传递给 use

1
2
3
4

app.use(function (request, response, next) {
  console.log("定义第一个中间件");
  next();
});

定义多个全局中间件

可以使用 app.use() 连续定义多个全局中间件。客户端请求到达服务器之 后，会按照中间件定义的先后顺序依次进行调用

局部生效的中间件(路由中间件)

如果只需要对某一些路由进行功能封装 ，则就需要路由中间件。路由中间件不使用 app.use() 定义,调用格式如下：

1
2
3

app.get("/路径", `中间件函数`, (request, response) => {});
// 使用多个路由中间件
app.get("/路径", `中间件函数1`, `中间件函数2`, (request, response) => {});

中间件的 几个使用注意事项

• 一定要在路由之前注册中间件
• 客户端发送过来的请求，可以连续调用多个中间件进行处理
• 执行完中间件的业务代码之后，不要忘记调用 next() 函数
• 为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码
• 连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象

Express 内置的中间件

自 Express 4.16.0 版本开始，Express 内置了 3 个常用的中间件，极大 的提高了 Express 项目的开发效率和体验

• express.static 快速托管静态资源的内置中间件，例如： HTML 文件、 图片、CSS 样式等（无兼容性）
• express.json 解析 JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
• express.urlencoded 解析 URL-encoded 格式的请求体数据（有兼容性， 仅在 4.16.0+ 版本中可用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//引入express框架
const express = require("express");
//创建服务对象
const app = express();
// 配置解析application/json格式数据的内置中间件
app.use(express.json());
// 配置解析application/x-www-form-urlencoded格式数据的内置中间件
app.use(express.urlencoded({ extended: false }));
//静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static("./public")); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化，还是需要设置路由
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
//则谁书写在前，优先执行谁
app.get("/index.html", (request, response) => {
  response.send("首页");
});
//监听端口
app.listen(3000, () => {
  console.log("3000 端口启动....");
});

4、防盗链

我们在访问第三方资源（如图片）的时候，有时可能会出现资源 403、404 的情况，这是因为服务端做了防盗链处理，只允许指定的域名访问资源

服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。

实现防盗链

在服务端只需通过中间件即可实现防盗链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

app.use((req, res, next) => {
  //检测请求头中的referer是否为127.0.0.1
  //获取referer
  let referer = req.get("referer");
  if (referer) {
    //实例化
    let url = new URL(referer);
    //获取hostname
    let hostname = url.hostname;
    //判断
    if (hostname !== "127.0.0.1") {
      //响应404
      res.status(404).send("<h1>404 Not Found</h1>");
      return;
    }
  }
  next();
});

如果第三方设置了防盗链，我们又想访问该怎么做呢

设置不发送 referrer 就行了

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：

1

<img src="http://……" referrerpolicy="no-referrer" />

或者直接在 HTMl 页面头中通过 meta 属性全局配置：

1

<meta name="referrer" content="no-referrer" />

扩展参考：http://www.ruanyifeng.com/blog/2019/06/http-referer.html

5、EJS 模板引擎

模板引擎是分离用户界面和业务数据 的一种技术

EJS 是一个高效的 Javascript 的模板引擎。官网: https://ejs.co/

中文站：https://ejs.bootcss.com/

EJS 使用

下载安装 EJS

1

npm i ejs --save

代码示例

1
2
3
4
5
6
7
8
9

//1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记，作用是输出当前表达式的执行结构
let html = ejs.render(‘<%= person.join(",") %>’, {person:person});
//4.输出结果
console.log(html);

render 渲染函数会将其第一个参数中<% %>中的值替换为第二个参数（也就是数据）进行解析渲染

EJS 常用语法

执行 JS 代码(可以认为里面是 js 语句，如条件语句、循环语句等)

1

<% code %>

输出转义的数据到模板上(可以认为里面是 js 表达式)

1

<%= code %>

实际上，我们通常将需要渲染的界面和数据分离开来

新建 test.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>我爱你<%=name%></h2>
    <hr />
    <h4><%=word%></h4>
  </body>
</html>

主文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const express = require("express");
const ejs = require("ejs");
const fs = require("fs");
const app = express();
const name = "中国";
const word = "亲爱的母亲";
const str = fs.readFileSync(__dirname + "/test.ejs").toString();
const result = ejs.render(str, { name: name, word: word });
app.get("/", (req, res) => {
  res.send(result);
});
app.listen(3000, () => {
  console.log("服务器启动了...");
});

EJS 列表渲染

test.ejs 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <%name.forEach(item=>{%>
      <li><%=item%></li>
      <%})%>
    </ul>
  </body>
</html>

EJS 条件渲染

test.ejs 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <%if(isLogin){%>
    <span>欢迎回来</span>
    <%}else{%> <button>登录</button><button>注册</button> <%}%>
  </body>
</html>

express 中使用 EJS

在之前我们使用 fs 去手动读取 ejs 中的数据并交给 ejs.render 函数去渲染。但在 express 中我们有更简便的方法，无需手动读取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const express = require("express");
const path = require("path");
const ejs = require("ejs");
const app = express();
//将express中的模板引擎设置为ejs
app.set("view engine", "ejs");
//设置模板文件的存放位置
app.set("views", path.resolve(__dirname, "./views"));
app.get("/", (req, res) => {
  const title = "人生得意须尽欢";
  res.render("test", { title });
});
app.listen(3000, () => {
  console.log("服务器启动了...");
});

6、express-generator

express-generator 是一款官方推荐的 Express 应用程序生成器，通过它可以快速创建一个 Express 应用骨架

可以通过 npx（包含在 Node.js8.2.0 及更高版本中）命令来运行 Express 应用程序生成器

1

$ npx express-generator

对于较老的 Node 版本，可以通过 npm 将 Express 应用程序生成器安装到全局环境中并使用

1
2

$ npm install -g express-generator
$ express

使用如下命令就可以快速创建一个 Express 应用骨架。其中-e 表示添加 EJS 模板引擎支持，dirname 是要创建的文件夹名称

1

$ express -e dirname

文件上传处理

使用如下命令快速创建应用骨架

1

$ express -e file

在 file/routes/index.js 中新增两个头像上传的路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const express = require("express");
const router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});
router.get("/portrait", function (req, res, next) {
  res.render("portrait");
});
router.post("/portrait", function (req, res, next) {
  res.send("111");
});
module.exports = router;

对应的在 views 文件下创建 portrait.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 对于文件上传，必须将enctype属性设置为multipart/form-data -->
    <form action="/portrait" method="post" enctype="multipart/form-data">
      <input type="text" name="username" placeholder="用户名" />
      <input type="file" name="portrait" placeholder="上传头像" />
      <hr />
      <button>上传</button>
    </form>
  </body>
</html>

接下来需要使用一个包叫 formidable 对上传的文件作进一步处理

1

npm i formidable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const express = require("express");
//导入formidable
const formidable = require("formidable");
const router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});
router.get("/portrait", function (req, res, next) {
  res.render("portrait");
});
router.post("/portrait", function (req, res, next) {
  const form = formidable({ multiples: true });
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    res.json({ fields, files });
  });
});
module.exports = router;

查看浏览器，可以看到 fields 里面存放的是一般表单的数据，比如 text、radio、select、checkbox 这种类型。而 files 里面保存的是 file 类型的数据

一般拿到客户端上传的文件之后，可以将其保存在静态资源目录下以方便用户访问。并将访问的路径保存在数据库里，并且返回给用户。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const express = require("express");
//导入formidable
const formidable = require("formidable");
const router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});
router.get("/portrait", function (req, res, next) {
  res.render("portrait");
});
router.post("/portrait", function (req, res, next) {
  const form = formidable({
    multiples: true,
    //设置文件上传保存的路径
    uploadDir: __dirname + "/../public/images",
    //保持文件后缀
    keepExtensions: true,
  });
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    //通过files.portrait.newFilename拼接保存文件上传的路径
    let url = "/images/" + files.portrait.newFilename;
    res.send(url);
  });
});
module.exports = router;

7、账单案例

使用 express-generator 快速生成一个应用骨架 accounts

在 routes/index.js 中新增/account 和/account/create 路由中间件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

const express = require("express");
const router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});
// 账单列表页
router.get("/account", function (req, res, next) {
  const accounts = [
    {
      time: "2023-04-01",
      title: "吃饭",
      type: "-1",
      account: 36,
    },
    {
      time: "2023-04-20",
      title: "发工资",
      type: "1",
      account: 15000,
    },
  ];
  res.render("list", { accounts });
});
//新增记录页
router.get("/account/create", function (req, res, next) {
  res.render("create");
});
//处理新增记录
router.post("/account", function (req, res, next) {
  res.send("提交成功");
});
module.exports = router;

并在 views 中新建 list.ejs 和 create.ejs，这样账单的基本静态页面就搭建起来了

list.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
    <style>
      label {
        font-weight: normal;
      }
      .panel-body .glyphicon-remove {
        display: none;
      }
      .panel-body:hover .glyphicon-remove {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>记账本</h2>
          <hr />
          <div class="accounts">
            <% accounts.forEach(item => { %>
            <div
              class="panel <%= item.type==='-1' ? 'panel-danger' : 'panel-success' %>"
            >
              <div class="panel-heading"><%= item.time %></div>
              <div class="panel-body">
                <div class="col-xs-6"><%= item.title %></div>
                <div class="col-xs-2 text-center">
                  <span
                    class="label <%= item.type==='-1' ? 'label-warning' : 'label-success' %>"
                    ><%= item.type==='-1' ? '支出' : '收入' %></span
                  >
                </div>
                <div class="col-xs-2 text-right"><%= item.account %> 元</div>
                <div class="col-xs-2 text-right">
                  <a href="/account/<%= item.id %>">
                    <span
                      class="glyphicon glyphicon-remove"
                      aria-hidden="true"
                    ></span>
                  </a>
                </div>
              </div>
            </div>
            <% }) %>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

create.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加记录</title>
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap-datepicker.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <h2>添加记录</h2>
          <hr />
          <form method="post" action="/account">
            <div class="form-group">
              <label for="item">事项</label>
              <input name="title" type="text" class="form-control" id="item" />
            </div>
            <div class="form-group">
              <label for="time">时间</label>
              <input name="time" type="text" class="form-control" id="time" />
            </div>
            <div class="form-group">
              <label for="type">类型</label>
              <select name="type" class="form-control" id="type">
                <option value="-1">支出</option>
                <option value="1">收入</option>
              </select>
            </div>
            <div class="form-group">
              <label for="account">金额</label>
              <input
                name="account"
                type="text"
                class="form-control"
                id="account"
              />
            </div>

            <div class="form-group">
              <label for="remarks">备注</label>
              <textarea
                name="remarks"
                class="form-control"
                id="remarks"
              ></textarea>
            </div>
            <hr />
            <button type="submit" class="btn btn-primary btn-block">
              添加
            </button>
          </form>
        </div>
      </div>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

注意：需要将 ejs 文件中引用到的 css 和 js 文件放在静态资源 public 目录下，并将 ejs 文件中的路径设置为绝对路径

十、MongoDB

1、MongoDB 基础知识

MongoDB 是一个基于分布式文件存储的数据库，官方地址 https://www.mongodb.com/

数据库（DataBase）是按照数据结构来组织、存储和管理数据的 应用程序

数据库的主要作用就是 管理数据 ，对数据进行 增（c）、删（d）、改（u）、查（r）

相比于纯文件管理数据，数据库管理数据有如下特点：

• 速度更快
• 扩展性更强
• 安全性更强

市面上的数据库有很多种，最常见的数据库有如下几个：

• MySQL 数据库（目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise）
• Oracle 数据库（收费）
• SQL Server 数据库（收费）
• Mongodb 数据库（Community + Enterprise）

其中，MySQL、Oracle、SQL Server 属于传统型数据库（又叫做：关系型数据库 或 SQL 数据库），这三者的 设计理念相同，用法比较类似

而 Mongodb 属于新型数据库（又叫做：非关系型数据库 或 NoSQL 数据库），它在一定程度上弥补了传统型 数据库的缺陷

Mongodb 中有三个重要概念需要掌握

• 数据库（database） 数据库是一个数据仓库，数据库服务下可以创建很多数据库，数据库中可以存 放很多集合
• 集合（collection） 集合类似于 JS 中的数组，在集合中可以存放很多文档 文档（document）
• 文档是数据库中的最小单位，类似于 JS 中的对象

Mongodb 下载地址： https://www.mongodb.com/try/download/community

配置步骤如下:

1. 将压缩包移动到 C:\Program Files 下，然后解压
2. 创建 C:\data\db 目录，mongodb 会将数据默认保存在这个文件夹
3. 以 mongodb 中 bin 目录作为工作目录，启动命令行
4. 运行命令 mongod

此时 Mongodb 的数据库服务已经启动了

重新打开一个以 mongodb 中 bin 目录作为工作目录的终端，使用 mongo 命令连接本机的 mongodb 服务

注意： 为了方便后续方便使用 mongod 命令，可以将 bin 目录配置到环境变量 Path 中 千万不要选中服务端窗口的内容 ，选中会停止服务，可以 敲回车 取消选中

2、命令行交互

数据库命令

显示所有的数据库

1

show dbs

切换到指定的数据库，如果数据库不存在会自动创建数据库

1

use 数据库名

显示当前所在的数据库

1

db

删除当前数据库

1
2

use 库名
db.dropDatabase()

集合命令

创建集合

1

db.createCollection('集合名称')

显示当前数据库中的所有集合

1

show collections

删除某个集合

1

db.集合名.drop()

重命名集合

1

db.集合名.renameCollection('newName')

文档命令

插入文档

1

db.集合名.insert(文档对象)

查询文档

1

db.集合名.find(查询条件)

_id 是 mongodb 自动生成的唯一编号，用来唯一标识文档

更新文档

1
2

db.集合名.update(查询条件,新的文档)
db.集合名.update({name:'张三'},{$set:{age:19}})

直接使用 db.集合名.update(查询条件,新的文档)这种方式，会覆盖式更新，因此可以使用第二种方式精确（局部）更新

删除文档

1

db.集合名.remove(查询条件)

3、Mongoose

Mongoose 是一个对象文档模型库，官网 http://www.mongoosejs.net/

它的本质就是一个包，方便使用代码操作 mongodb 数据库。取代我们之前在终端中使用 mongo 命令行的方式操作数据库

使用流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//1. 安装 mongoose
//2. 导入 mongoose
const mongoose = require("mongoose");
//3. 连接数据库,27017是mongodb的默认端口号，可以省略。如果bilibili数据库不存在则会自动创建
// mongodb是MongoDB的连接协议，正如我们之前http服务使用http协议一样，MongoDB数据库服务使用mongodb协议
mongoose.connect("mongodb://127.0.0.1:27017/bilibili");
//4. 设置连接回调
//连接成功
mongoose.connection.on("open", () => {
  console.log("连接成功");
  //5. 创建文档结构对象
  let BookSchema = new mongoose.Schema({
    title: String,
    author: String,
    price: Number,
  });
  //6. 创建文档模型对象
  let BookModel = mongoose.model("book", BookSchema);
  //7. 插入文档
  BookModel.create({
    title: "西游记",
    author: "吴承恩",
    price: 19.9,
  })
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
});
//连接出错
mongoose.connection.on("error", () => {
  console.log("连接出错~~");
});
//连接关闭
mongoose.connection.on("close", () => {
  console.log("连接关闭");
});

字段类型

文档结构可选的常用字段类型列表

字段值验证

Mongoose 有一些内建验证器，可以对字段值进行验证

必填项

1
2
3
4

title: {
  type: String,
  required: true // 设置必填项
}

默认值

1
2
3
4

author: {
  type: String,
  default: '匿名' //默认值
}

枚举值

1
2
3
4

gender: {
  type: String,
  enum: ['男','女'] //设置的值必须是数组中的
}

唯一值

1
2
3
4

username: {
  type: String,
  unique: true
}

unique 需要 重建集合 才能有效果

Mongoose 操作数据库的基本操作：增加（create），删除（delete），修改（update），查（read）

增加

插入一条

1
2
3
4
5
6
7

BookModel.create({
  title: "西游记",
  author: "吴承恩",
  price: 19.9,
})
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

批量插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//批量插入
BookModel.insertMany([
  {
    title: "红楼梦",
    author: "曹雪芹",
    price: 29.9,
  },
  {
    title: "水浒传",
    author: "施耐庵",
    price: 39.9,
  },
  {
    title: "三国演义",
    author: "罗贯中",
    price: 49.9,
  },
])
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

删除

删除一条数据

1
2
3
4

//删除一条
BookModel.deleteOne({ title: "红楼梦" })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

批量删除

1
2
3
4

//批量删除
BookModel.deleteMany({ author: "罗贯中" })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

更新

更新一条数据

1
2
3
4

//更新一条
BookModel.updateOne({ author: "罗贯中" }, { price: 9.9 })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

批量更新数据

同上

查询

查询一条数据

1
2
3
4
5
6
7

BookModel.findOne({ name: "三国演义" })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
//根据id查询
BookModel.findById({ _id: "6438c46df163eb812a612bb5" })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

批量查询数据

1
2
3
4
5
6
7
8

//不加条件查询
BookModel.find()
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
//加条件查询
BookModel.find({ author: "余华" })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

条件控制

Mongoose 中主要有运算符、 逻辑运算、正则匹配三中条件控制

运算符

在 mongodb 不能 > < >= <= !== 等运算符，需要使用替代符号

• > 使用 $gt
• < 使用 $lt
• = 使用 $gte
• <= 使用 $lte
• !== 使用 $ne

1
2
3

BookModel.find({ price: { $gt: 60 } })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

逻辑运算

$or 逻辑或

1
2
3

BookModel.find({ $or: [{ author: "罗贯中" }, { price: 59.8 }] })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

$and 逻辑与

1
2
3

BookModel.find({ $and: [{ price: { $gt: 20 } }, { price: { $lt: 30 } }] })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

正则匹配

条件中可以直接使用 JS 的正则语法，通过正则可以进行模糊查询

1
2
3

BookModel.find({ name: /三/ })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

个性化读取

字段筛选

1
2
3
4
5
6
7

//0:不要的字段
//1:要的字段
BookModel.find()
  .select({ name: 1, author: 1 })
  .exec()
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

将筛选字段的条件放在 select 函数中，值为 1 表示需要筛选出来，为 0 表示该字段不需要。回调函数放在 exec 中。当然 find 函数中也可以写入筛选条件

数据排序

1
2
3
4
5

BookModel.find()
  .sort({ price: 1 })
  .exec()
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

sort 函数函数中参数名表示排序的字段名，值为 1 表示升序，-1 表示降序

数据截取

1
2
3
4
5

BookModel.find()
  .skip(3)
  .limit(2)
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

skip 表示跳过前 3 个，limit 表示取 2 个，因此最终取值结果为第 4 个至第 5 个

图形化管理工具

我们可以使用图形化的管理工具来对 Mongodb 进行交互

• Robo 3T 免费 https://github.com/Studio3T/robomongo/releases
• Navicat 收费 https://www.navicat.com.cn/

Mongoose 模块化

随着业务的增多，我们可以将 Mongoose 操作分模块管理

主要思路如下：

将连接成功之后的回调函数里面的操作单独拿出来放在 index.js，剩下的内容以函数的形式进行封装放在 db 目录下的 index.js，并通过 module.exports 暴露出去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = function (success, err) {
  //1. 安装 mongoose
  //2. 导入 mongoose
  const mongoose = require("mongoose");
  //3. 连接数据库,27017是mongodb的默认端口号，可以省略。如果bilibili数据库不存在则会自动创建
  // mongodb是MongoDB的连接协议，正如我们之前http服务使用http协议一样，MongoDB数据库服务使用mongodb协议
  mongoose.connect("mongodb://127.0.0.1:27017/bilibili");
  //4. 设置连接回调
  //连接成功
  mongoose.connection.on("open", () => {
    success();
  });
  //连接出错
  mongoose.connection.on("error", () => {
    err();
  });
  //连接关闭
  mongoose.connection.on("close", () => {
    console.log("连接关闭");
  });
};

index.js 引入 db/index.js，并将连接成功之后的回调函数里面的操作作为 success 函数参数传递过去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = function (success, err) {
  //1. 安装 mongoose
  //2. 导入 mongoose
  const mongoose = require("mongoose");
  //3. 连接数据库,27017是mongodb的默认端口号，可以省略。如果bilibili数据库不存在则会自动创建
  // mongodb是MongoDB的连接协议，正如我们之前http服务使用http协议一样，MongoDB数据库服务使用mongodb协议
  mongoose.connect("mongodb://127.0.0.1:27017/bilibili");
  //4. 设置连接回调
  //连接成功
  mongoose.connection.on("open", () => {
    success();
  });
  //连接出错
  mongoose.connection.on("error", () => {
    err();
  });
  //连接关闭
  mongoose.connection.on("close", () => {
    console.log("连接关闭");
  });
};

由于随着业务的增多，后面可能会有越来越多的文档，因此我们可以将创建文档的代码继续拆分出去。在 models 目录下新建 BookModles.js 和 MovieModles.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//导入 mongoose
const mongoose = require("mongoose");
//创建文档的结构对象
//设置集合中文档的属性以及属性值的类型
let BookSchema = new mongoose.Schema({
  name: String,
  author: String,
  price: Number,
});

//创建模型对象  对文档操作的封装对象
let BookModel = mongoose.model("books", BookSchema);

//暴露模型对象
module.exports = BookModel;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//导入 mongoose
const mongoose = require("mongoose");

// 创建文档结构
const MovieSchema = new mongoose.Schema({
  title: String,
  director: String,
});

//创建模型对象
const MovieModel = mongoose.model("movie", MovieSchema);

//暴露
module.exports = MovieModel;

index.js 主文件中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//导入 db 文件
const db = require("./db/db");
//导入 mongoose
const mongoose = require("mongoose");
//导入 BookModel
const BookModel = require("./models/BookModel");

// 调用函数
db(
  () => {
    //7. 新增
    BookModel.create(
      {
        name: "西游记",
        author: "吴承恩",
        price: 19.9,
      },
      (err, data) => {
        //判断是否有错误
        if (err) {
          console.log(err);
          return;
        }
        //如果没有出错, 则输出插入后的文档对象
        console.log(data);
        //8. 关闭数据库连接 (项目运行过程中, 不会添加该代码)
        mongoose.disconnect();
      }
    );
  },
  () => {
    console.log("连接失败...");
  }
);

接下来 db 目录下的 index.js 中我们连接的数据库地址和集合名称是写死的，我们可以新建一个 config/config.js 文件单独进行配置

1
2
3
4
5
6

//配置文件
module.exports = {
  DBHOST: "127.0.0.1",
  DBPORT: 27017,
  DBNAME: "bilibili",
};

db 下的 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
 *
 * @param {*} success 数据库连接成功的回调
 * @param {*} error 数据库连接失败的回调
 */
module.exports = function (success, error) {
  //1. 安装 mongoose
  //2. 导入 mongoose
  const mongoose = require("mongoose");
  //导入 配置文件
  const { DBHOST, DBPORT, DBNAME } = require("../config/config.js");

  //设置 strictQuery 为 true
  mongoose.set("strictQuery", true);

  //3. 连接 mongodb 服务                        数据库的名称
  mongoose.connect(`mongodb://${DBHOST}:${DBPORT}/${DBNAME}`);

  //4. 设置回调
  // 设置连接成功的回调  once 一次   事件回调函数只执行一次
  mongoose.connection.once("open", () => {
    success();
  });

  // 设置连接错误的回调
  mongoose.connection.on("error", () => {
    error();
  });

  //设置连接关闭的回调
  mongoose.connection.on("close", () => {
    console.log("连接关闭");
  });
};

接下来可以对之前做过的账单案例进行优化了。将数据库的操作应用到案例中

十一、接口

接口是 前后端通信的桥梁

简单理解：一个接口就是 服务中的一个路由规则 ，根据请求响应结果

一般情况下，接口返回的都是 json 格式

RESTful API

RESTful API 是一种特殊风格的接口，主要特点有如下几个：

• URL 中的路径表示 资源 ，路径中不能有 动词 ，例如 create , delete , update 等这些都不能有
• 操作资源要与 HTTP 请求方法对应
• 操作结果要与 HTTP 响应状态码对应

规则示例：

扩展阅读：https://www.ruanyifeng.com/blog/2014/05/restful_api.html

基于 RESTful API 我们可以给之前的账单案例添加 API 接口

在 routes 目录下新建 web 文件夹（专门用来存放路由文件），将原来 routes 下的 index.js 文件放到 web 文件夹下。在 routes 目录下新建 api 文件夹（专门用来存放对外的 api 接口文件），并将 index.js 文件中的内容复制一份，方便我们进行改造

在 app.js 中引入 account.js 接口文件，并配置中间件，这样外部就可以通过/api/xxx 来访问接口了

1
2

const accountRouter = require("./routes/api/account");
app.use("/api", accountRouter);

接下来我们对 account.js 进行改造即可

获取账单列表接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

router.get("/account", checkToken, function (req, res, next) {
  AccountModel.find()
    .sort({ time: -1 })
    .exec()
    .then((data) =>
      res.json({
        code: "0000",
        msg: "读取成功",
        data: data,
      })
    )
    .catch(() => {
      res.json({
        code: "1001",
        msg: "读取失败",
        data: null,
      });
    });
});

添加账单记录接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

router.post("/account", checkToken, function (req, res, next) {
  AccountModel.create(req.body)
    .then((data) => {
      res.json({
        code: "0000",
        msg: "新增成功",
        data: data,
      });
    })
    .catch(() => {
      res.json({
        code: "1002",
        msg: "新增失败",
        data: null,
      });
    });
});

删除账单记录接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

router.delete("/account/:id", checkToken, function (req, res, next) {
  AccountModel.deleteOne({ _id: req.params.id })
    .then(() => {
      res.json({
        code: "0000",
        msg: "删除成功",
        data: null,
      });
    })
    .catch(() => {
      res.json({
        code: "1003",
        msg: "删除失败",
        data: null,
      });
    });
});

获取单条账单记录接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//获取单条记录
router.get("/account/:id", checkToken, function (req, res, next) {
  AccountModel.find({ _id: req.params.id })
    .then((data) => {
      res.json({
        code: "0000",
        msg: "获取成功",
        data: data,
      });
    })
    .catch(() => {
      res.json({
        code: "1004",
        msg: "获取失败",
        data: null,
      });
    });
});

更新账单接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

router.patch("/account/:id", checkToken, function (req, res, next) {
  AccountModel.updateOne({ _id: req.params.id }, req.body)
    .then((data) => {
      res.json({
        code: "0000",
        msg: "更新成功",
        data: data,
      });
    })
    .catch(() => {
      res.json({
        code: "1005",
        msg: "更新失败",
        data: null,
      });
    });
});

注意 patch 是局部更新，而 put 是覆盖式更新

以上接口均可以通过接口测试工具去测试是否正常。

在之前的 res 响应中，我们都是通过 res.render 去响应一个页面。而接口则是只需响应一个 json（一般情况下）格式的数据即可。由前端拿到数据后去做进一步的处理，最终呈现页面。

十二、会话控制

1、Web 开发模式

目前主流的 Web 开发模式有两种，分别是：

• 基于服务端渲染的传统 Web 开发模式
• 基于前后端分离的新型 Web 开发模式

服务端渲染的传统 Web 开发模式：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接，动态生成的（或者模板引擎 ejs）。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据

服务端渲染的优缺点

优点：

• 前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电
• 有利于 SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于 SEO

缺点：

• 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力
• 不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度高的项目，不利于 项目高效开发

前后端分离的 Web 开发模式：依赖于 Ajax 技术的广泛应用。简而言之，前后端分离的 Web 开发模式， 就是后端只负责提供 API 接口，前端使用 Ajax 调用接口的开发模式

前后端分离的优缺点

优点：

• 开发体验好。前端专注于 UI 页面的开发，后端专注于 api 的开发，且前端有更多的选择性
• 用户体验好。Ajax 技术的广泛应用，极大的提高了用户的体验，可以轻松实现页面的局部刷新
• 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的

缺点：

• 不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成，所以爬虫对无法爬取页面的有效信息。（解决方 案：利用 Vue、React 等前端框架的 SSR （server side render）技术能够很好的解决 SEO 问题！）

如何选择 Web 开发模式

不谈业务场景而盲目选择使用何种开发模式都是耍流氓。

• 比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的 SEO，则这时我们就需要使用服务器端渲染
• 而类似后台管理项目，交互性比较强，不需要考虑 SEO，那么就可以使用前后端分离的开发模式

另外，具体使用何种开发模式并不是绝对的，为了同时兼顾了首页的渲染速度和前后端分离的开发效率，一些网站采用了 首屏服务器端渲染 + 其他页面前后端分离的开发模式

HTTP 是一种无状态的协议。所谓 HTTP 协议的无状态性，指的是客户端的每次 HTTP 请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次 HTTP 请求的状态。因此它没有办法区分多次的请求是否来自于同一个客户端， 无法区分用户 而产品中又大量存在的这样的需求，所以我们需要通过 会话控制 来解决该问题

常见的会话控制技术有三种：

• cookie
• session
• token

对于服务端渲染和前后端分离这两种开发模式来说，分别有着不同的身份认证方案：

• 服务端渲染推荐使用 Session 认证机制
• 前后端分离推荐使用 JWT 认证机制

2、Cookie

Cookie 是 HTTP 服务器发送到用户浏览器并存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用 于控制 Cookie 有效期、安全性、使用范围的可选属性组成。

不同域名下的 Cookie 各自独立，每当客户端发起请求时，会自动把当前域名下所有未过期的 Cookie 一同发送到服务器

客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的 Cookie，客户端会自动 将 Cookie 保存在浏览器中

随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证相关的 Cookie，通过请求头的形式发送给 服务器，服务器即可验明客户端的身份

Cookie 就像我们去办某个店的会员，当我们成为会员之后，店子会给我们发一张会员卡。后续我们出示会员卡来店即可认证我们的身份

express 中可以使用 cookie-parser 操作 cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34