# nodejs_notes

**Repository Path**: js-class/nodejs_notes

## Basic Information

- **Project Name**: nodejs_notes
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-18
- **Last Updated**: 2024-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Node 第 1 天



### 1.  学习目标

◆  能够知道什么是 `Node.js`
◆  能够知道 `Node.js` 可以做什么
◆  能够说出 `Node.js` 中的 `JavaScript` 的组成部分
◆  能够使用 `fs` 模块读写操作文件
◆  能够使用 `path` 模块处理路径
◆  能够使用 `http` 模块写一个基本的 `web` 服务器



---

### 2.  回顾和思考



#### 2.1  为什么 JavaScript 可以在浏览器中执行

##### 2.1.1 已经掌握了哪些技术

![](./images/Day_001/001 - 已经掌握的技术.png)



##### 2.1.2  浏览器中的 JavaScript 的组成部分

![](./images/Day_001/002 - 浏览器中的 JavaScript 的组成部分.png)







##### 2.1.3  为什么  JavaScript 可以在浏览器中被执行 

![](./images/Day_001/003 - 为什么 JavaScript 可以在浏览器中被执行.png)







#### 2.2  JavaScript 可以操作 `DOM` 和 `BOM`

-  每个浏览器都内置了 `DOM`、`BOM` 这样的 `API` 函数，因此，浏览器中的 `JavaScript` 才可以调用它们。

![](./images/Day_001/004 - 为什么浏览器可以解析DOM和BOM.png)





#### 2.3  浏览器中的 JavaScript 运行环境

运行环境是指代码正常运行所需的必要环境

<img src="./images/Day_001/005 - 运行环境.png" alt="运行环境" style="zoom:80%;" />



总结： 

	1.    `V8` 引擎负责解析和执行 `JavaScript` 代码
 	2.    内置 `API` 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用



#### 2.4  JavaScript 能否做后端开发

1.  `JavaScript` 可以做后台开发，只不过需要借助 `Node.js`
2.  `JavaScript` 作为一门语言，代码的执行肯定需要运行环境，浏览器能够解析 `JavaScript` 代码，因为浏览器是一个运行环境，恰好，`Node.js` 也集成了一个 `JavaScript` 运行环境，也可以对 `JavaScript` 代码进行解析，不过 `Node` 是一个后端的运行环境，也是因此 `JavaScript` 能够进行后台的开发





---

### 3.  初识 `Node`

#### 3.1  什么是 `Node`

> 能够了解 Node 是一个运行环境，并不是一门后台语言



​	`Node.js` 是一个基于 `Chrome V8` 引擎的 `JavaScript` 运行环境

​	**Node 实际上就是一个 `JavaScript` 运行环境，它集成了 `v8`  引擎， 从而能对 `JavaScript` 代码进行解析**



![](./images/Day_001/006 - node.png)





#### 3.2 `Node` 中的 `JavaScript` 环境

> 能够知道 Node 运行环境包含哪两个部分
>
> 能够知道 Node 运行环境和 浏览器运行环境的区别



1.  Node 运行环境包含两个部分，分别是：

   - `V8` 引擎，主要负责解析 `JavaScript` 代码
   -  内置 `API`，我们学习 `Node.js` 重点就是学习这些内置的 `API`，从而能够完成后台的开发

   

2.   `Node` 运行环境和 浏览器运行环境的区别

   - 浏览器是 `JavaScript` 的前端运行环境
   - `Node.js` 是 `JavaScript` 的后端运行环境

   -  `Node` 环境中 **没有 `DOM` 和 `BOM` 的 `API`**，即在 `Node` 中无法调用 `DOM` 和 `BOM` 等浏览器内置 `API`

      同理，在浏览器中也不能够调用 `Node` 内置 `API`

     

![](./images/Day_001/007 - Node.js 中的 JavaScript 运行环境.png)





#### 3.3  Node 学习路径

##### 3.3.1 Node 可以做什么

`Node` 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 `API`。然而，基于 `Node` 提供的这些基础能，很多强大
的工具和框架如雨后春笋，层出不穷，所以学会了 `Node` ，可以让前端程序员胜任更多的工作和岗位

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



##### 3.3.2 Node 学习路径

  JavaScript 基础语法   -->   **`Node.js` 内置 `API` 模块**（`fs`、`path`、`http` 等）  -->   **第三方 `API` 模块**（express、`mysql` 等）





#### 3.4  下载并安装 Node

##### 3.4.1  下载 Node 的方式

1.  如果希望通过 `Node.js` 来运行 `Javascript` 代码，则必须在计算机上安装 `Node.js` 环境才行

2.  安装包在 `Node.js` 官网首页直接[下载](https://nodejs.org/en/)，点击绿色的按钮，下载所需的版本后，双击直接安装即可

   

![](./images/Day_001/008 - Node.png)



##### 3.4.2 区分 `LTS` 版本和 Current 版本的不同

1.  **`LTS `为长期稳定版**，对于追求稳定性的企业级项目来说，推荐安装 `LTS` 版本的 `Node.js`
2.  **`Current` 为新特性尝鲜版**，对热衷于尝试新特性的用户来说，推荐安装 `Current` 版本的 `Node.js`。但是，`Current` 版本中可能存在隐藏的 `Bug` 或安全性漏洞，因此不推荐在企业级项目中使用 `Current` 版本的 `Node.js`







#### 3.5  查看已安装的 Node 的版本号

1.  打开终端，在终端输入命令 `node –v` 后，按下回车键，即可查看已安装的 `Node.js` 的版本号

2.  Windows 系统快速打开终端的方式：使用快捷键 (Windows徽标键 + R) 打开运行面板，输入 `cmd` 后直接回车，即可打开终端

   

![查看已安装的 Node 的版本号](./images/Day_001/009 - 查看已安装的 Node 的版本号.png)





#### 3.6  什么是终端

1.  终端（英文：Terminal）是专门为开发人员设计的，用于实现人机交互的一种方式
2.  作为一名合格的程序员，我们有必要识记一些常用的终端命令，来辅助我们更好的操作与使用计算机



#### 3.7  Node 环境执行 JavaScript 代码

1.  在项目根目录下打开终端

2.  输入 node 要执行的 `js`文件的路径，例如

   ```js
   node 1.js
   ```

   ![](./images/Day_001/010 - Node 执行 js 代码.png)





#### 3.8  更快捷的打开终端

1.  在文件夹地址栏区域，输入 cmd ，既可以打开终端

   <img src="./images/Day_001/011 - cmd.png" style="zoom:80%;" />

2.  按照鼠标 shift，同时点击鼠标左键，在此处打开 `powershell`

   <img src="./images/Day_001/012 - powershell.png" alt="powershell" style="zoom:80%;" />





#### 3.9  终端中的快捷键

在 `Windows` 的 `powershell` 或 `cmd` 终端中，我们可以通过如下快捷键，来提高终端的操作效率：

1.  使用 `↑` 键，可以快速定位到上一次执行的命令
2.  使用 `tab` 键，能够快速补全路径
3.  使用 `esc` 键，能够快速清空当前已输入的命令
4.  输入 `cls` 命令，可以清空终端



---

### 4.  `fs` 文件系统



#### 4.1  `fs` 文件系统模块

1.  `fs` 模块是 `Node.js` 官方提供的、用来**操作文件**的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求

   - `fs.readFile()` 方法，用来读取指定文件中的内容

   - `fs.writeFile()` 方法，用来向指定的文件中写入内容



 2.   如果要在 `JavaScript` 代码中，使用 `fs` 模块来操作文件，则需要使用如下的方式先导入它

      ```js
      const fs = require('fs')
      ```

      

#### 4.2  读取指定文件中的内容

##### 4.2.1  `fs.readFile()` 的语法格式

使用 `fs.readFile()` 方法，可以读取指定文件中的内容，语法格式如下：

```js
fs.readFile(path[, options], callback)
```



参数解读：

1.  参数1：必选参数，字符串，表示文件的路径
2.  参数2：可选参数，表示以什么编码格式来读取文件
3.  参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果



##### 4.2.2  `fs.readFile()` 的示例代码

```js
// 1. 导入 fs 模块
const fs = require('fs')

// 2. 调用 fs.readFile() 方法读取文件
//  参数 1： 读取文件的存放路径
//  参数 2： 读取文件时候的编码格式，一般默认是 utf8
//  参数 3： 回调函数，拿到读取失败和成功的结果， err 以及 data
fs.readFile('./Tom.txt', 'utf8', function (err, data) {
  // 3. err
  // 如果读取失败，则 err 的值为 null
  // 如果读取失败，则 err 的值为错误对象， data 的值为 undefined
  console.log(err)

  // 4. data 打印成功的结果
  console.log(data)
})

```



##### 4.2.3  判断文件是否读取成功

可以判断 err 对象是否为 null，从而知晓文件读取的结果

1.  结果是 null ，说明文件读取成功
2.  如果不为 null，说明文件读取失败

```js
const fs = require('fs')

fs.readFile('./Tom.txt', 'utf8', function (err, data) {
  // 判断 err 对象是否为 null
  if (err) {
    return console.log('文件读取失败：', err.message)
  }

  console.log('文件读取成功，内容是：', data)
})

```





#### 4.3  向指定的文件中写入内容

##### 4.3.1  `fs.writeFile()` 的语法格式

使用 `fs.writeFile()` 方法，可以向指定的文件中写入内容，语法格式如下

```js
fs.writeFile(file, data[, options], callback)
```



参数解读：

1.  参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径
2.  参数2：必选参数，表示要写入的内容
3.  参数3：可选参数，表示以什么格式写入文件内容，默认值是 `utf8`
4.  参数4：必选参数，文件写入完成后的回调函数



##### 4.3.2  `fs.writeFile()` 的示例代码

```js
// 1. 导入 fs 文件系统模块
const fs = require('fs')

// 2. 调用 fs.writeFile() 方法，写入文件的内容
//  参数 1：表示文件的存放路径
//  参数 2：表示要写入的内容
//  参数 3：回调函数
fs.writeFile('./Tom.txt', ' Jerry', function (err) {
  // 3. err
  // 3.1 如果文件写入成功，则 err 的值等于 null
  // 3.2 如果文件写入失败，则 err 的值等于一个错误对象 
  console.log(err)
})

```



##### 4.3.3  判断文件是否写入成功

可以判断 err 对象是否为 null，从而知晓文件写入的结果

```js
const fs = require('fs')

fs.writeFile('./Tom.txt', 'Tom And Jerry', function (err) {
  if (err) {
    return console.log('文件写入失败', err.message)
  }

  console.log('文件写入成功')
})

```





#### 4.4   `fs` 整理考试成绩案例

#####  4.4.1 需求分析

使用 `fs` 文件系统模块，将素材目录下成绩 `.txt` 文件中的考试数据，整理到 `成绩-ok.txt` 文件中，整理前，`成绩.txt` 文件中的数据格式如下：

```js
小红=99 小白=100 小黄=70 小黑=66 小绿=88
```

整理完成之后，希望得到的 `成绩-ok.txt` 文件中的数据格式如下：

```js
小红: 99
小白: 100
小黄: 70
小黑: 66
小绿: 88
```



##### 4.4.2  实现思路分析

1.  导入需要的 `fs` 文件系统模块
2.  使用 `fs.readFile()` 方法，读取素材目录下的 `成绩.txt` 文件
3.  判断文件是否读取失败
4.  文件读取成功后，处理成绩数据
5.  将处理完成的成绩数据，调用 `fs.writeFile()` 方法，写入到新文件 `成绩-ok.txt` 中



##### 4.4.3  实现步骤

1.  读取成绩文件

   ```js
   // 1. 导入 fs 文件系统
   const fs = require('fs')
   
   // 2.调用 fs.rendFile() 读取文件的内容
   fs.readFile('./成绩.txt', 'utf8', function (err, data) {
     // 3. 判断是否读取成功
     if (err) {
       return console.log('读取文件失败！', err.message)
     }
   
     console.log('读取文件成功', data)
   })
   
   ```

   

2.  处理成绩

   ```js
   // 1. 导入 fs 文件系统
   const fs = require('fs')
   
   // 2.调用 fs.rendFile() 读取文件的内容
   fs.readFile('./成绩.txt', 'utf8', function (err, data) {
     // 3. 判断是否读取成功
     if (err) {
       return console.log('读取文件失败！', err.message)
     }
   
     // 4.1 将成绩按照空格进行分割
     const oldArr = data.split(' ')
     // 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作
     const newArr = []
     oldArr.forEach(item => {
       // console.log(item)
       newArr.push(item.replace('=', ': '))
     })
     // 4.3 将新数组中的每一项，进行合并，得到一个新的字符串
     const newStr= newArr.join('\r\n')
     console.log(newStr)
   })
   
   ```



3.  将整理好的成绩写入到新文件

   ```js
   // 1. 导入 fs 文件系统
   const fs = require('fs')
   
   // 2.调用 fs.rendFile() 读取文件的内容
   fs.readFile('./成绩.txt', 'utf8', function (err, data) {
     // 3. 判断是否读取成功
     if (err) {
       return console.log('读取文件失败！', err.message)
     }
   
     // 4.1 将成绩按照空格进行分割
     const oldArr = data.split(' ')
     // 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作
     const newArr = []
     oldArr.forEach(item => {
       // console.log(item)
       newArr.push(item.replace('=', ': '))
     })
     // 4.3 将新数组中的每一项，进行合并，得到一个新的字符串
     const newStr= newArr.join('\r\n')
     // console.log(newStr)
   
     fs.writeFile('./成绩-ok.txt', newStr, function (err) {
       if (err) {
         return console.log('文件写入失败' + err.message)
       }
   
       console.log('成绩写入成功')
     })
   })
   
   ```

   

### 5.  `fs` 路径问题

#### 5.1  `fs` 模块路径动态拼接的问题

  在使用 `fs` 模块操作文件时，如果提供的操作路径是以 `./` 或 `../ `开头的相对路径时，很容易出现路径动态拼接错误的问题

  原因：代码在运行的时候，会以`执行 node 命令时所处的目录`，动态拼接出被操作文件的完整路径

  解决方案：在使用 `fs` 模块操作文件时，直接提供完整的路径，不要提供 `./` 或 `../` 开头的相对路径，从而防止路径动态拼接的问题





#### 5.2  使用完整路径替换相对路径

使用完整路径替换相对路径，但这种写法移植性比较差，不利于后期的维护

```js
const fs = require('fs')

fs.readFile('F:\\001 - 双元大课程\\009 - 服务器编程node\\003 - Node Code\\Day_001\\Tom.txt', 'utf8', function (err, data) {
  // 判断 err 对象是否为 null
  if (err) {
    return console.log('文件读取失败：', err.message)
  }

  console.log('文件读取成功，内容是：', data)
})
```



#### 5.3  使用 `__dirname` 解决路径拼接问题

`__dirname` 属性 `Node` 给提供的一个全局的属性，表示当前文件所处的目录

```js
const fs = require('fs')

// __dirname 属性解决路径拼接问题
fs.readFile(__dirname + '/Tom.txt', 'utf8', function (err, data) {
  // 判断 err 对象是否为 null
  if (err) {
    return console.log('文件读取失败：', err.message)
  }

  console.log('文件读取成功，内容是：', data)
})

```







### 6.  `path` 路径模块

#### 6.1  什么是 path 路径模块

1.  `path` 模块是 `Node.js` 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求，例如：

   - `path.join()` 方法，用来将多个路径片段拼接成一个完整的路径字符串

   - `path.basename()` 方法，用来从路径字符串中，将文件名解析出来



 2.   如果要在 JavaScript 代码中，使用 path 模块来处理路径，则需要使用如下的方式先导入它

      ```js
      const path = rquire('path')
      ```

      



#### 6.2  path 路径拼接

##### 6.2.1  `path.join()` 的语法格式

使用 `path.join()` 方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下

```js
path.join([...paths])
```



参数解读：

1.  `...paths`  <string> 路径片段的序列
2.  返回值:  <string>





##### 6.2.2  `path.join()` 的代码示例

使用 `path.join()` 方法，可以把多个路径片段拼接为完整的路径字符串

注意：今后凡是涉及到路径拼接的操作，**都要使用 `path.join()` 方法进行处理**。不要直接使用 + 进行字符串的拼接

```js
const fs = require('fs')
const path = require('path')

// 使用 path.join() 做路径分割
fs.readFile(path.join(__dirname, '/Tom.txt'), 'utf8', function (err, data) {
  // 判断 err 对象是否为 null
  if (err) {
    return console.log('文件读取失败：', err.message)
  }

  console.log('文件读取成功，内容是：', data)
})

```



#### 6.3  获取路径中的文件名

##### 6.3.1 `path.basename()` 的语法格式

使用 `path.basename()` 方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下

```js
path.basename(path[, ext])
```



参数解读：

1.  path <string> 必选参数，表示一个路径的字符串
2.  ext <string> 可选参数，表示文件扩展名
3.  返回: <string> 表示路径中的最后一部分



##### 6.3.2  `path.basename()` 的代码示例

使用 `path.basename()` 方法，可以从一个文件路径中，获取到文件的名称部分

```js
const path = require('path')

const fpath = '/a/b/c/d/index.html' // 文件的存放路径

var fullName = path.basename(fpath)
console.log(fullName)  // index.html 打印出文件的名称

var extName = path.basename(fpath, '.html')
console.log(extName)  // index 打印文件的名称，但是忽略后缀名

```



#### 6.4  获取路径中的文件扩展名

##### 6.4.1 `path.extname()` 的语法格式

使用 `path.extname()` 方法，可以获取路径中的扩展名部分，语法格式如下

```js
path.extname(path)
```



参数解读：

1. `path` <string >必选参数，表示一个路径的字符串
2.  返回: <string> 返回得到的扩展名字符串



##### 6.4.2  `path.extname()` 的代码示例

使用 `path.extname()` 方法，可以获取路径中的扩展名部分

```js
const path = require('path')

const fpath = '/a/b/c/d/index.html' // 文件的存放路径

var fullName = path.extname(fpath)
console.log(fullName)  // .html 返回文件的拓展名
```





---

### 7.  时钟案例

#### 7.1  案例介绍

1.  案例要实现的功能

   <img src="./images/Day_001/013 - 要实现的功能.png" style="zoom:80%;" />

   
   
2.   案例的实现步骤

   - 创建两个正则表达式，分别用来匹配  `<style>` 和 `<script>` 标签
   - 使用 `fs` 模块，读取需要被处理的 `HTML` 文件
   - 自定义 `resolveCSS` 方法，来写入 `index.css` 样式文件
   - 自定义 `resolveJS` 方法，来写入 `index.js` 脚本文件
   - 自定义 `resolveHTML` 方法，来写入 `index.html` 文件

   

#### 7.2  案例实现步骤

1.  导入需要的模块并创建正则表达式

   ```js
   // 1.1 导入 fs 文件系统模块
   const fs = require('fs')
   // 1.2 导入 path 路径处理模块
   const path = require('path')
   
   // 1.3 匹配 <style></style> 标签的正则
   // \s 表示空白字符  \S 表示非空字符  * 表示匹配任意次
   const regStyle = /<style>[\s\S]*<\/style>/
   
   // 1.4 匹配 <script></script> 标签的正则
   const regScript = /<script>[\s\S]*<\/script>/
   
   ```

   

2.  使用 `fs.readFile` 方法读取 `html` 文件的内容

   ```js
   // 1.1 导入 fs 文件系统模块
   
   // 其他代码略……
   
   // 2.1 调用 fs.readFile() 方法读取文件
   fs.readFile(path.join(__dirname, '/index.html'), 'utf8', function (err, data) {
     // 2.2 读取 html 文件失败
     if (err) return console.log('读取文件失败' + err.message)
   
     // 2.3 读取文件成功后，调用对应的 3 个方法，解析出 css、js、html 内容
   })
   
   ```

   

3.  自定义 `resolveCss` 方法提取样式表文件

   ```js
   // 3.1 处理 css 样式
   function resolveCss(htmlStr) {
     // 3.2 使用正则提取页面中的 <style></style>
     const r1 = regStyle.exec(htmlStr)
   
     // 3.3 将提取出来的样式字符串，做进一步的处理
     const newCss = r1[0].replace('<style>', '').replace('</style>', '')
   
     // 3.4 将提取出来的 css 样式，写入到 index.css 文件中
     fs.writeFile(path.join(__dirname, '/style/index.css'), newCss, err => {
       if (err) return console.log('写入 css 样式表失败 ！', err.message)
   
       console.log('写入文件成功')
     })
   }
   
   ```

   

4.  自定义 `resolveJS`方法

   ```js
   // 4.1 处理 js 脚本
   function resolveJs (htmlStr) {
     // 4.2 使用正则表达式提取出页面中的 <script></script> 标签
     const r2 = regScript.exec(htmlStr)
   
     // 4.3 将提取出来的脚本字符串，做进一步处理
     const newJs = r2[0].replace('<script>', '').replace('</script>', '')
   
     // 4.4 将提取出来的 js 脚本，写入到 index.js 文件中
     fs.writeFile(path.join(__dirname, '/script/index.js'), newJs, err => {
       if (err) return console.log('写入 JavaScript 脚本失败', err.message)
   
       console.log('写入脚本文件成功 !')
     })
   }
   
   ```

   

5.  自定义 `resolveHTML` 方法

   ```js
   // 5.1 处理 html 文件函数
   function resolveHtml(htmlStr) {
     // 5.2 使用字符串的 replace 方法，把内嵌的 <script> 和 <style> 标签，替换为外联的 <link> 和 <script> 标签
     const newHtml = htmlStr
       .replace(regStyle, '<link rel="stylesheet" href="./style/index.css" />')
       .replace(regScript, '<script src="./script/index.js"></script>')
   
     // 5.3 将替补完成之后的 html 代码，写入到 index.html 中
     fs.writeFile(path.join(__dirname, '/time.html'), newHtml, err => {
       if (err) return console.log('写入文件失败', err.message)
   
       console.log('写入 html 页面成功 ！')
     })
   }
   
   ```

   

6.  案例的两个注意点
   -  `fs.writeFile()` 方法只能用来创建文件，不能用来创建路径
   -  重复调用 `fs.writeFile()` 写入同一个文件，新写入的内容会覆盖之前的旧内容



## Node 第 2 天



### 1.  学习目标

◆  能够使用 `http` 模块写一个基本的 `web` 服务器

◆  能够说出模块化的好处

◆  能够知道 `CommonJS` 规定了哪些内容

◆  能够说出 `Node.js` 中模块的三大分类各自是什么

◆  能够使用 `npm` 管理包



### 2.  `http` 模块

####  2.1  什么是 `http` 模块

1.  `http` 模块是 `Node.js` 官方提供的、用来创建 `web` 服务器的模块。通过 `http` 模块提供的 `http.createServer()` 方法，就能方便的把一台普通的电脑，变成一台 `Web` 服务器，从而对外提供 `Web` 资源服务

   

2.  如果要希望使用 `http` 模块创建 `Web` 服务器，则需要先导入它

   ```js
   const http = require('http')
   ```



#### 2.2 进一步理解 `http` 模块的作用

1. 服务器和普通电脑的区别在于，服务器上安装了 `web` 服务器软件

   -  例如：`IIS`、`Apache` 等。通过安装这些服务器软件，就能把一台普通的电脑变成一台 web 服务器

     

2.  在 `Node.js` 中，我们不需要使用 `IIS`、`Apache` 等这些第三方 `web` 服务器软件。因为我们可以基于 `Node.js` 提供的 `http` 模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供 `web` 服务



### 3.  服务器相关的概念

#### 3.1  `ip` 地址

1. `IP 地址`就是互联网上每台计算机的唯一地址，因此 `IP 地址` 具有唯一性
2.  `IP 地址` 的格式：通常用“点分十进制”表示成`(a.b.c.d)`的形式，其中，`a,b,c,d` 都是 0~255 之间的十进制整数
   - 例如：用点分十进表示的 `IP`地址`（192.168.1.1）`



**注意事项**： 

   	1.   **互联网中每台 `Web` 服务器，都有自己的 `IP` 地址**
        - 例如：大家可以在 `Windows` 的终端中运行 `ping www.baidu.com` 命令，即可查看到百度服务器的 `IP 地址`
            	2.   在开发期间，自己的电脑既是一台服务器，也是一个客户端，为了方便测试，可以在自己的浏览器中输入 `127.0.0.1` 这个 `IP 地址`，就能把自己的电脑当做一台服务器进行访问了





#### 3.2  域名和域名服务器

1.  尽管 `IP 地址` 能够唯一地标记网络上的计算机，但 `IP地址` 是一长串数字，不直观，而且不便于记忆，于是人们又发明了另一套字符型的地址方案，即所谓的**域名地址(Domain Name)**

   

2.  `IP地址 `和 `域名` 是一一对应的关系，这份对应关系存放在一种叫做域名服务器 `(DNS，Domain name server)` 的电脑中。使用者只需通过好记的域名访问对应的服务器即可，对应的转换工作由域名服务器实现。因此，**域名服务器就是提供 `IP 地址` 和域名之间的转换服务的服务器**



**注意事项：**

	1.    单纯使用 `IP 地址`，互联网中的电脑也能够正常工作。但是有了域名的加持，能让互联网的世界变得更加方便
 	2.    在开发测试期间， `127.0.0.1` 对应的域名是 `localhost`，它们都代表我们自己的这台电脑，在使用效果上没有任何区别





#### 3.3  端口号

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

![端口号](./images/Day_002/001 - 端口号.png)







### 4.  创建web服务器

#### 4.1 实现步骤和核心代码

1.   导入 `http 模块`

   ```js
   const http = require('http')
   ```

   

2.  创建 `web` 服务器实例

   ```js
   // 调用 http.createServer() 方法，即可快速创建一个 web 服务器实例
   
   const server = http.createServer()
   ```

   

3.  为服务器实例绑定 `request` 事件

   ```js
   // 为服务器实例绑定 request 事件，即可监听客户端发送过来的网络请求
   
   // 使用服务器实例的 .on() 方法，为服务器绑定一个 request 事件
   server.on('request', (req, res) => {
     // 只要有客户端来请求我们自己的服务器，就会被触发 request 事件，从而调用这个事件处理程序
     console.log('访问服务器成功')
   })
   ```

   

4.  启动服务器

   ```js
   // 调用服务器实例的 .listen() 方法，即可启动当前的 web 服务器实例
   
   server.listen(80, () => {
       console.log('running……')
   })
   ```



#### 4.2  创建基本的服务器

```js
// 1. 导入 http 模块
const http = require('http')

// 2. 创建 web 服务器实例
const server = http.createServer()

// 3. 为服务器实例绑定 request 事件，监听客户端的请求
server.on('request', function (req, res) {
  console.log('访问服务器成功')
})

// 4. 启动服务器
server.listen(8080, function () {  
  console.log('running……')
})

```



#### 4.3  `req` 请求对象

服务器接收到客户端的请求，就会调用通过 `server.on()` 为服务器绑定的 **request 事件处理程序**，如果想在事件处理程序中，访问与客户端相关的数据和属性，可以使用如下方式：

```js
server.on('request', function (req, res) {
  // req 是请求对象，它包含了与客户端相关的数据和属性
  // req.url 获取客户端请求的 url 地址
  // req.method 获取客户端请求的类型

  const str = `${req.url} -- ${req.method}`

  console.log(str)
})
```



#### 4.4  `res` 响应对象

在服务器的 request 事件处理程序中，如果想访问与服务器相关的数据和属性，可以使用如下方式

```js
server.on('request', function (req, res) {
  // res 是响应对象，它包含了与服务器相关的数据和属性
  // 例如：将字符串发送到客户端

  const str = `${req.url} -- ${req.method}`
  
  // res.end() 方法的作用
  // 向客户端发送指定的内容，并结束这次请求的处理过程
  res.end(str)
})
```



#### 4.5  解决中文乱码问题

当调用 `res.end()` 方法，向客户端发送中文内容的时候，会出现乱码问题，此时，需要手动设置内容的编码格式

```js
server.on('request', function (req, res) {
  // 发送包含中文的内容
  const str = `您请求的 url 地址是：${req.url}，请求的 method 类型是：${req.method}`

  // 为了防止中文乱码问题，需要设置响应头，
  res.setHeader('Content-Type', 'text/html; charset=utf-8')

  // 把包含中文的内容返回给客户端
  res.end(str)
})
```



### 5.  根据不同的 `url` 响应不同的内容

#### 5.1  核心实现步骤

1.  获取请求的 `url` 地址
2.  设置默认的响应内容为 `404 Not found`
3.  判断用户请求的是否为 `/` 或 `/index.html` 首页
4.  判断用户请求的是否为 `/about.html` 关于页面
5.  设置 `Content-Type` 响应头，防止中文乱码
6.  使用 `res.end()` 把内容响应给客户端



#### 5.2  动态响应内容

```js
server.on('request', function (req, res) {
  // 1、获取请求的 url 地址
  const url = req.url
  // 2、设置默认的内容为 404 Not Found
  let content = '<h4>404 Not Found</h4>'
  // 3、用户请求的是首页
  if (url === '/' || url === '/index.html') {
    content = '<h4>首页</h4>'
  } else if (url === '/about.html') {
    // 4、用户请求的是关于我们页面
    content = '<h4>关于我们</h4>'
  }

  // 5、设置 Content-Type 响应头，防止中文乱码
  res.setHeader('Content-Type', 'text/html; charset=utf-8')

  // 6、将内容发送给客户端
  res.end(content)
})
```



### 6.  时钟 `web` 服务器案例

#### 6.1  核心思路

把文件的实际存放路径，作为每个资源的请求 `url 地址`

![](./images/Day_002/002 - 核心思路分析.png)

#### 6.2  实现思路

1.  导入需要的模块
2.  创建基本的 `web` 服务器
3.  将资源的请求 `url 地址` 映射为文件的存放路径
4.  读取文件内容并响应给客户端
5.  优化资源的请求路径



#### 6.3  实现步骤

1.  导入需要的模块

   ```js
   // 1.1 导入 http 模块
   const http = require('http')
   // 1.2 导入 fs 文件系统模块
   const fs = require('fs')
   // 1.3 导入 path 路径处理模块
   const path = require('path')
   
   ```

   

2.   创建基本的 web 服务器

   ```js
   // 2.1 创建 web 服务器
   const server = http.createServer()
   
   // 2.2 监听 web 服务器的 request 事件
   server.on('request', (req, res) => {})
   
   // 2.3 启动 web 服务器
   server.listen(80, () => {
     console.log('running……')
   })
   
   ```

   

3.  将资源的请求 `url` 地址映射为文件的存放路径

   ```js
   server.on('request', (req, res) => {
     // 3.1 获取到客户端请求的 url 地址
     const url = req.url
     // 3.2 把请求的 url 地址，映射为本地文件的存放路径
     const fpath = path.join(__dirname, url)
   })
   
   ```

   

4.  根据映射过来的文件路径读取文件

   ```js
   // 4.1 根据映射过来的文件路径读取文件
   fs.readFile(fpath, 'utf8', (err, dataStr) => {
     // 4.2 读取文件失败后，向客户端响应固定的 "错误消息"
     if (err) return res.end('404 Not Fount')
   
     // 4.3 读取文件成功后，将 "读取成功的内容" 响应给客户端
     res.end(dataStr)
   })
   ```

   

5.  优化资源的请求路径

   ```js
   // // 3.2 把请求的 url 地址，映射为本地文件的存放路径
   // const fpath = path.join(__dirname, url)
   
   // 5.1 预定义空白的文件存放路径
   let fpath = ''
   if (url === '/') {
     // 5.2 如果请求的路径是 / ，则手动指定文件的存放路径
     fpath = path.join(__dirname, './clock/index.html')
   } else {
     // 5.3 如果请求的路径不为 / ，则动态拼接文件的存放路径
     fpath = path.join(__dirname, './clock', url)
   }
   ```

   



### 7.  模块化

#### 7.1  什么是模块化

1.  模块化是指解决一个复杂问题时，自顶向下逐层**把系统划分成若干模块的过程**。对于整个系统来说，**模块是可组合、分解和更换的单元**

2.   编程领域中的模块化，就是**遵守固定的规则**，把一个**大文件**拆成**独立并互相依赖的多个小模块**

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

   -  提高了代码的复用性
   -  提高了代码的可维护性
   -  可以实现按需加载

   

#### 7.2  模块化相关的概念

1.  模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则，例如：

   - 使用什么样的语法格式来引用模块
   - 在模块中使用什么样的语法格式向外暴露成员

   

2.   模块化规范的好处：大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己





### 8.  `Node` 中的模块化

#### 8.1  了解 `Node` 中模块的 3 个大类

`Node.js` 中根据模块来源的不同，将模块分为了 3 大类，分别是：

1.  内置模块（内置模块是由 `Node.js` 官方提供的，例如 `fs`、`path`、`http` 等）
2.  自定义模块（用户创建的每个 `.js` 文件，都是自定 义模块）
3.  第三方模块（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，**使用前需要先下载**）



#### 8.2  使用 `require` 方法加载模块

使用强大的 `require()` 方法，可以加载需要的**内置模块**、**用户自定义模块**、**第三方模块**进行使用。例如：

```js
// 1. 加载内置的 fs 模块
const fs = require('fs')

// 2. 加载用户的自定义模块
const custom = require('./custom.js')

// 3. 加载第三方模块，(使用第三方模块，下面会进行讲解)
const moment = require('moment')
```



**注意事项 1： 使用 require() 方法加载其他模块时，会执行被加载模块中的代码**

```js
// 加载模块.js
require('./被加载的模块.js')

```

```js
// 被加载模块.js
console.log('我会被打印')
```



**注意事项2： 在使用 `require` 加载用户自定义模块期间，可以省略 `.js` 后缀名**

```js
// 加载模块.js
require('./被加载的模块')
```





#### 8.3  了解模块作用域的概念以及好处

##### 8.3.1 什么是模块作用域

和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，外部文件是访问不到的，这种模块级别的访问限制，叫做模块作用域

```js
// 被加载的模块.js

const username = '张三'

function sayHello () {
  console.log('说话')
}
```

```js
// 加载模块.js

const custom = require('./被加载的模块')
```





##### 8.3.2  模块作用域的好处

防止了全局变量污染、文件依赖等问题的产生





#### 8.4   `module` 对象

##### 8.4.1  了解 `module` 对象

在每个 `.js` 自定义模块中都有一个 `module` 对象，它里面存储了和当前模块有关的信息，打印如下：

![](./images/Day_002/003 - module.png)




##### 8.4.2  了解 `module.exports` 对象的作用

1.  在自定义模块中，可以使用 `module.exports` 对象，将模块内的成员共享出去，供外界使用

2.  外界用 `require()` 方法导入自定义模块时，得到的就是 `module.exports` 所指向的对象

   ```js
   // 记载模块.js
   const mo = require('./被加载的模块')
   
   console.log(mo) // {}
   ```

   ```js
   // 被加载的模块.js
   
   // 当外界使用 require 导入一个自定义模块的时候，得到的成员，就是模块中，通过 module.exports 指向的那个对象
   // console.log('我会被加载')
   ```

   

##### 8.4.3  使用 `module.exports` 向外共享成员

```js
// 加载模块.js
const mo = require('./被加载的模块.js')

console.log(mo)
```



```js
// 被加载的模块.js

// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'

// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function () {
  console.log('Hellp')
}

```



##### 8.4.4  共享成员时的注意点

使用 `require()` 方法导入模块时，导入的结果，永远以 `module.exports` 指向的对象为准

```js
// 加载模块.js
const mo = require('./被加载的模块.js')

console.log(mo) // { username: '小黑', sayHi: [Function: sayHi] }
```



```js
// 被加载模块.js

// 当外界使用 require 导入一个自定义模块的时候，得到的成员，就是模块中，通过 module.exports 指向的那个对象
// console.log(module)

// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'

// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function () {
  console.log('Hellp')
}

// 使用 module.exports 指向一个全新的对象
module.exports = {
  username: '小黑',
  sayHi() {
    console.log('小黑')
  }
}

```



#### 8.5  `exports` 对象

由于 `module.exports` 单词写起来比较复杂，为了简化向外共享成员的代码，`Node` 提供了 `exports` 对象。默认情况下，`exports` 和 `module.exports` 指向同一个对象。最终共享的结果，还是以 `module.exports` 指向的对象为准

```js
console.log(exports)

console.log(module.exports)

// 默认情况下，`exports` 和 `module.exports` 指向同一个对象
console.log(exports === module.exports) // true

```

```js
// 将私有成员共享出去
exports.username = 'zs'

// 直接挂载方法
exports.sayHello = function () {
  console.log('Hellp')
}
```



#### 8.6  `exports` 和 `module.exports` 的使用误区

1.   时刻谨记，`require()` 模块时，得到的永远是 `module.exports` 指向的对象
2.  **注意：为了防止混乱，建议大家不要在同一个模块中同时使用 `exports` 和 `module.exports`**

```js
exports.username = 'Tom' // 不会被打印

module.exports = {
  gender: '男',
  age: 22
}
```

```js
module.exports.username = 'Tom'

// 不会被执行
exports = {
  gender: '男',
  age: 22
}

```

```js
// 两个都会执行
module.exports.username = 'Tom'

exports.gender = '男'
```

```js
// 三个都会打印
exports = {
  gender: '男',
  age: 22
}

module.exports = exports
module.exports.username = 'Tom'
```



#### 8.7  `CommonJS` 模块化规范

1.  `Node.js` 遵循了 `CommonJS` 模块化规范，`CommonJS `规定了**模块的特性和各模块之间如何相互依赖**
2.  `CommonJS` 规定：
   - 每个模块内部，`module` 变量代表当前模块
   - `module` 变量是一个对象，它的 `exports` 属性（即 `module.exports`）是对外的接口
   -  加载某个模块，其实是加载该模块的 `module.exports` 属性。require() 方法用于加载模块



### 9.   包

#### 9.1  什么是包

1.  `Node.js` 中的第三方模块又叫做包



#### 9.2  包的来源

1. 不同于 `Node.js` 中的内置模块与自定义模块，包是由第三方个人或团队开发出来的，免费供所有人使用
2.  注意： `Node.js` 中的包都是免费且开源的，不需要付费即可免费下载使用



#### 9.3  为什么需要包

1.  由于 `Node.js` 的内置模块仅提供了一些底层的 `API`，导致在基于内置模块进行项目开发的时，效率很低
2.  包是基于内置模块封装出来的，提供了更高级、更方便的 `API`，极大的提高了开发效率
3.  包和内置模块之间的关系，类似于 `jQuery` 和 浏览器内置 `API` 之间的关系



#### 9.4  从哪里下载包

在学习和以后的实际开发中，下载包，都是从 [npm](https://www.npmjs.com/) 这个网站下载



#### 9.5  如何下载包

1.  下载包使用 `npm` ，全名叫做 `Node Package Manager`（简称 `npm` 包管理工具），这个包管理工具随着 `Node.js` 的安装包一起被安装到了用户的电脑上。

2.  可以在终端中执行 `npm -v` 命令，来查看自己电脑上所安装的 `npm` 包管理工具的版本号

   ![npm](./images/Day_002/004- npm.png)

   
   

### 10.  `npm` 初体验

#### 10.1  格式化时间的传统做法

```js
// 格式化时间方法.js

// 1. 定义格式化时间的方法
function dateFormat(dtStr) {
  const dt = new Date(dtStr)

  const y = dt.getFullYear()
  const m = padZero(dt.getMonth() + 1)
  const d = padZero(dt.getDate())

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 定义补零的函数
function padZero(n) {
  return n > 9 ? n : '0' + n
}

module.exports = {
  dateFormat
}

```

```js
// 对时间进行格式化.js

// 导入自定义的格式化时间的模块
const TIME = require('./014 - timeformat')

// 调用方法，进行时间的格式化
const dt = new Date()
// console.log(dt)
const newDT = TIME.dateFormat(dt)
console.log(newDT)

```



#### 10.2  使用第三方包对时间进行格式化

##### 10.2.1 实现思路分析

1.  使用 `npm` 包管理工具，在项目中安装格式化时间的包 `moment`

2.  使用 `require()` 导入格式化时间的包

3.  参考 `moment` 的官方 `API` 文档对时间进行格式化

    ```js
    // 1.moment
    const moment = require('moment')
    
    // 2.参考 moment 官方 API 文档，调用对应的方法，对时间进行格式化
    // 2.1 调用 moment() 方法，得到当前的事件
    // 2.2 针对当前的时间，调用 format() 方法，按照指定的格式进行时间的格式化
    const dt = moment().format('YYYY-MM-DD HH:mm:ss')
    
    console.log(dt)
    ```

    



##### 10.2.3   `npm install` 命令安装包

1.  如果想在项目中安装指定名称的包，需要运行如下的命令

   ```js
   npm install 包的完整名称
   ```

   

2.  上述的装包命令，可以简写成如下格式

   ```js
   npm i 包的完整名称
   
   npm i moment
   ```

   

##### 10.2.4  `moment` 对时间格式化

```js
// 1.moment
const moment = require('moment')

// 2.参考 moment 官方 API 文档，调用对应的方法，对时间进行格式化
// 2.1 调用 moment() 方法，得到当前的事件
// 2.2 针对当前的时间，调用 format() 方法，按照指定的格式进行时间的格式化
const dt = moment().format('YYYY-MM-DD HH:mm:ss')

console.log(dt)
```



#### 10.3  `node_modules` 和 `pageage-lock.json` 的作用

初次装包完成后，在项目文件夹下多一个叫做 `node_modules` 的文件夹和 `package-lock.json` 的配置文件，他们的作用是：

1.  `node_modules` 文件夹用来存放所有已安装到项目中的包。`require()` 导入第三方包时，就是从这个目录中查找并加载包
2.  `package-lock.json` 配置文件用来记录 `node_modules` 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等



#### 10.4  安装指定版本的包

默认情况下，使用 `npm install` 命令安装包的时候，会自动安装最新版本的包。如果需要安装指定版本的包，可以在包名之后，通过 `@ `符号指定具体的版本，例如：

```js
npm i moment@2.22.2
```



#### 10.5  包的语义化版本

`npm` 规定，在项目根目录中，必须提供一个叫做 `package.json` 的包管理配置文件。用来记录与项目有关的一些配置信息。例如：

1.  项目的名称、版本号、描述等
2.  项目中都用到了哪些包
3.  哪些包只在开发期间会用到
4.  那些包在开发和部署时都需要用到 



## Node 第 3 天



### 1.  学习目标

◆  能够说出模块化的好处

◆  能够知道 `CommonJS` 规定了哪些内容

◆  能够说出 `Node.js` 中模块的三大分类各自是什么

◆  能够使用 `npm` 管理包

◆  能够了解什么是规范的包结构

◆  能够了解模块的加载机制



### 2. 包管理配置

#### 2.1 包管理配置的概念

`npm` 规定，在项目根目录中，必须提供一个叫做 `package.json` 的包管理配置文件，用来记录与项目有关的一些配置信息，例如：

- 项目的名称、版本号、描述等
- 项目中都用到了哪些包
- 哪些包只会在开发期间会用到
- 哪些包在开发和部署时都需要用到



#### 2.2 理解 `package.json` 配置文件的作用

##### 2.2.1 多人协作的问题

1.  包的体积

   - 整个项目的体积是 `30.4M`
   - 第三方包的体积是 `28.8M`
   - 项目源代码的体积 `1.6M`

   

2.   遇到的问题

   - 第三方包的体积过大，不方便团队成员之间共享项目源代码

   

3.  解决方案

   - 共享时剔除node_modules

   

![](./images/Day_003/001 - package.png)




##### 2.2.2 如何记录项目中安装了哪些包

- 在项目根目录中，创建一个叫做 **`package.json`**的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除 `node_modules` 目录之后，在团队成员之间共享项目的源代码

  

-  今后在项目开发中，一定要把 `node_modules` 文件夹，添加到 `.gitignore` 忽略文件中



#### 2.3 快速创建 `package.json`

`npm` 包管理工具提供了一个快捷命令，可以在执行命令时所处的目录中，快速创建 `package.json` 这个包管理配置文件

```js
npm init
```



注意：

1. 上述命令**只能在英文的目录下成功运行！**所以，项目文件夹的名称**一定要使用英文命名，不要使用中文，不能出现空格**
2.  运行 `npm install` 命令安装包的时候，`npm` 包管理工具会自动把包的名称和版本号，记录到 `package.json` 中





#### 2.4 了解 dependencies 节点的作用

`package.json` 文件中，有一个 `dependencies` 节点，专门用来记录您使用 `npm install` 命令安装了哪些包

```js
// 安装一个包
npm i xxx

// 安装多个包
npm i xxx1  xxx2 
```



<img src="./images/Day_003/002 - package.png" style="zoom: 80%;" />



#### 2.5 一次性安装所有的包

1.  当我们拿到一个剔除了 node_modules 的项目之后，需要先把所有的包下载到项目中，才能将项目运行起来。否则会报类似于下面的错误：

<img src="./images/Day_003/003 - 安装.png" style="zoom:67%;" />



2.  可以运行 `npm install` 命令（或 `npm i`）一次性安装所有的依赖包

   <img src="./images/Day_003/004 - npm i .png" style="zoom: 67%;" />





#### 2.6 卸载包

1.  可以运行 `npm uninstall` 命令，来卸载指定的包：

2.  注意：`npm uninstall` 命令执行成功后，会把卸载的包，自动从 `package.json` 的 `dependencies` 中移除掉



<img src="./images/Day_003/005 - uninstall.png" style="zoom:67%;" />





#### 2.7 了解 `devDependencies` 节点的作用

1.  如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到 `devDependencies` 节点中

2.  与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到 `dependencies` 节点中

3.  您可以使用如下的命令，将包记录到 `devDependencies` 节点中

   

   <img src="./images/Day_003/006 - dev.png" style="zoom:67%;" />





### 3. 解决包下载慢的问题

#### 3.1 分析包下载慢的原因

在使用 `npm` 下包的时候，默认从国外的 [npm](https://registry.npmjs.org/) 服务器进行下载，此时，网络数据的传输需要经过漫长的海底光缆，因此下包速度会很慢



#### 3.2 了解淘宝 `npm` 镜像服务器的作用

1. 淘宝在国内搭建了一个服务器，专门把国外官方服务器上的包同步到国内的服务器，然后在国内提供下包的服务。从而极大的提高了下包的速度
2.  镜像是一种文件存储形式，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像

<img src="./images/Day_003/007 - 淘宝 NPM 镜像服务器.png" style="zoom:80%;" />





#### 3.3 切换 `npm` 的下包镜像源

下包的镜像源，指的就是下包的服务器地址

<img src="./images/Day_003/008 - 切换镜像源.png" alt="切换镜像源" style="zoom:67%;" />



#### 3.4 使用 `nrm` 切换下载包的服务器

为了更方便的切换下包的镜像源，可以安装 `nrm` 这个小工具，利用 `nrm` 提供的终端命令，可以快速查看和切换下包的镜像源

<img src="./images/Day_003/009 - nrm.png" style="zoom:67%;" />





### 4.  包的分类

#### 4.1 项目包

1.  那些被安装到项目的 `node_modules` 目录中的包，都是项目包

2.  项目包又分为两类，分别是：

   - 开发依赖包，被记录到 `devDependencies` 节点中的包，只在开发期间会用到

   - 核心依赖包，被记录到 `dependencies` 节点中的包，在开发期间和项目上线之后都会用到

     

   <img src="./images/Day_003/010 - 项目包.png" style="zoom:67%;" />





#### 4.2 全局包

1.  在执行 `npm install` 命令时，如果提供了 `-g` 参数，则会把包安装为全局包

2.  全局包会被安装到 `C:\Users\用户目录\AppData\Roaming\npm\node_modules` 目录下

3.  注意：

   - 只有工具性质的包，才有全局安装的必要性。因为它们提供了好用的终端命令

   -  判断某个包是否需要全局安装后才能使用，可以参考官方提供的使用说明即可

     

   <img src="./images/Day_003/011 - 全局包.png" style="zoom:67%;" />





#### 4.3 `i5ting_toc` 的安装和使用

1. `i5ting_toc` 是一个可以把 `md` 文档转为 `html` 页面的小工具

   

   <img src="./images/Day_003/012 - i5ting_toc.png" style="zoom:67%;" />





### 5. 开发属于自己的包

#### 5.1 规范的包结构

1.  一个规范的包，它的组成结构，必须符合以下 3 点要求：

   - 包必须以单独的目录而存在
   - 包的顶级目录下要必须包含 `package.json` 这个包管理配置文件
   - `package.json` 中必须包含 `name`，`version`，`main` 这三个属性，分别代表包的名字、版本号、包的入口

   

2.  注意：以上 3 点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考[这个网址](https://yarnpkg.com/zh-Hans/docs/package-json)



#### 5.2 了解需要实现的功能

1.  需要实现的功能

   - 格式化日期

     <img src="./images/Day_003/012 - 功能1.png" style="zoom: 67%;" />

   

   - 转移  `HTML` 中的特殊字符

     <img src="./images/Day_003/013 - 功能2.png" style="zoom: 52%;" />

   

   - 还原 `HTML` 中的特殊字符

   <img src="./images/Day_003/014 - 功能5.png" style="zoom:67%;" />



#### 5.3 初始化包的基础结构

1.  新建 `itheima-tools` 文件夹，作为包的根目录

2.  在 `itheima-tools` 文件夹中，新建如下三个文件：

   - `package.json` (包管理配置文件)
   - `index.js` (包的入口文件)
   - `README.md` (包的说明文档)

   

#### 5.4 初始化 `package.json` 配置文件

```json
{
  "name": "flightloong-tools",
  "version": "1.0.0",
  "description": "提供格式化时间、HTMLEscape相关功能",
  "main": "index.js",
  "keywords": [
    "itcast",
    "itheima",
    "dateFormat",
    "escape"
  ],
  "license": "ISC"
}

```



#### 5.5 在 `index.js` 中定义格式化时间的方法

```js
// 包的入口文件 index.js

// 定义格式化时间的函数
function dateFormat (dateStr) {
  const dt = new Date(dateStr)

  const y = padZero(dt.getFullYear())
  const m = padZero(dt.getMonth() + 1)
  const d = padZero(dt.getDate())

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 定义一个补零的函数
function padZero (n) {
  return n > 9 ? n : '0' + n
}

// 向外暴露需要的成员
module.exports = {
  dateFormat
}

```

```js
// 测试代码

const itheima = require('./flightloong-tools/index')

// 格式化时间的代码
const dtStr = itheima.dateFormat(new Date())
console.log(dtStr) // 2020-06-23 01:16:57

```



#### 5.6 `package.json` 文件中 `main` 的作用

在导入一个文件的时候，如果没有指定一个特定的文件，但是却能够得到某个包的返回内容，这是因为 `Node` 在使用 `require` 导入某个路径的时候，发现没有具体的文件，就会看这个路径下查看是否有 `package.json` 这个文件，如果有，则查看是否有 `main` 这个属性，如果有，则指定 `main` 属性对应的文件作为要执行的文件



#### 5.7 在 `index.js` 中定义转义 HTML 的方法

```js
// index.js
// 定义转义 HTML 字符的函数
function htmlEscape(htmlstr) {
  return htmlstr.replace(/<|>|"|&/g, match => {
    switch (match) {
      case '<':
        return '&glt;'
      case '>':
        return '&gt;'
      case '"':
        return '&quot;'
      case '&':
        return '&amp;'
    }
  })
}
```

```js
// test.js

const itheima = require('./flightloong-tools/index')

// 转义 Html 字符串
const htmlStr = '<h4 title="abc">这是h4标签<span>123&nbsp;</span></h4>'
const str = itheima.htmlEscape(htmlStr)
console.log(str)
```





#### 5.8 在 `index.js` 中定义还原 HTML 的方法

```js
// 定义还原 HTML 字符的函数
function htmlUnEscape(str) {
  return str.replace(/&glt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case '&glt;':
        return '<'
      case '&gt;':
        return '>'
      case '&quot;':
        return '"'
      case '&amp;':
        return '&'
    }
  })
}
```

```js
// 还原 Html 字符串
const resetHtml = itheima.htmlUnEscape(str)
console.log(resetHtml)
```



#### 5.9 划分不同的模块

1.  将格式化时间的功能，拆分到 `src` -> `dateFormat.js` 中
2.  将处理 `HTML` 字符串的功能，拆分到 `src` -> `htmlEscape.js` 中
3.  在 `index.js` 中，导入两个模块，得到需要向外共享的方法
4.  在 `index.js` 中，使用 `module.exports` 把对应的方法共享出去

```js
// dateFormat.js

// 定义格式化时间的函数
function dateFormat(dateStr) {
  const dt = new Date(dateStr)

  const y = padZero(dt.getFullYear())
  const m = padZero(dt.getMonth() + 1)
  const d = padZero(dt.getDate())

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 定义一个补零的函数
function padZero(n) {
  return n > 9 ? n : '0' + n
}

module.exports = {
  dateFormat
}

```

```js
// htmlEscape.js

// 定义转义 HTML 字符的函数
function htmlEscape(htmlstr) {
  return htmlstr.replace(/<|>|"|&/g, match => {
    switch (match) {
      case '<':
        return '&glt;'
      case '>':
        return '&gt;'
      case '"':
        return '&quot;'
      case '&':
        return '&amp;'
    }
  })
}

// 定义还原 HTML 字符的函数
function htmlUnEscape(str) {
  return str.replace(/&glt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case '&glt;':
        return '<'
      case '&gt;':
        return '>'
      case '&quot;':
        return '"'
      case '&amp;':
        return '&'
    }
  })
}

module.exports = {
  htmlEscape,
  htmlUnEscape
}

```

```js
// test.js

const itheima = require('./flightloong-tools/index')

// 格式化时间的代码
const dtStr = itheima.dateFormat(new Date())
console.log(dtStr)

// 转义 Html 字符串
const htmlStr = '<h4 title="abc">这是h4标签<span>123&nbsp;</span></h4>'
const str = itheima.htmlEscape(htmlStr)
console.log(str)

// 还原 Html 字符串
const resetHtml = itheima.htmlUnEscape(str)
console.log(resetHtml)

```





#### 5.10 编写包的说明文档

1.  包根目录中的 `README.md` 文件，是包的使用说明文档。通过它，我们可以事先把包的使用说明，以 `markdown` 的格式写出来，方便用户参考
2.  `README` 文件中具体写什么内容，没有强制性的要求；只要能够清晰地把包的作用、用法、注意事项等描述清楚即可
3.  我们所创建的这个包的 `README.md `文档中，会包含以下 6 项内容
   - 安装方式
   - 导入方式
   - 格式化时间
   - 转义 HTML 中的特殊字符
   - 还原 HTML 中的特殊字符
   - 开源协议

```markdown
### 安装
​```
npm i flightloong-tools
​```

### 导入
​```js
const itheima = require('./flightloong-tools')
​```

### 格式化时间
​```js
// 调用 dateFormat 对时间进行格式化
const dtStr = itheima.dateFormat(new Date())
// 结果  2020-04-03 17:20:58
console.log(dtStr)
​```

### 转义 HTML 中的特殊字符
​```js
// 带转换的 HTML 字符串
const htmlStr = '<h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>'
// 调用 htmlEscape 方法进行转换
const str = itheima.htmlEscape(htmlStr)
// 转换的结果 &lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;
console.log(str)
​```

### 还原 HTML 中的特殊字符
​```js
// 待还原的 HTML 字符串
const str2 = itheima.htmlUnEscape(str)
// 输出的结果 <h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>
console.log(str2)
​```

### 开源协议
ISC
```



#### 5.11 注册 `npm` 账号

1.  访问 [npm](https://www.npmjs.com/ ) 网站，点击 `sign up` 按钮，进入注册用户界面
2.  填写账号相关的信息：`Full Name`、`Public Email`、`Username`、`Password`
3.  点击 `Create an Account` 按钮，注册账号
4.  登录邮箱，点击验证链接，进行账号的验证



#### 5.12 登录 `npm` 账号

1.  `npm` 账号注册完成后，可以在终端中执行 `npm login` 命令，依次输入用户名、密码、邮箱后，即可登录成功
2.  **注意：在运行 `npm login` 命令之前，必须先把下包的服务器地址切换为 `npm` 的官方服务器。否则会导致发布包失败！**



#### 5.13 把包发布到 `npm`上

将终端切换到包的根目录之后，运行 `npm publish` 命令，即可将包发布到 `npm` 上（注意：包名不能雷同）

<img src="./images/Day_003/015 - npm publish.png" style="zoom:67%;" />



#### 5.14 - 删除已发布的包

1.  运行 `npm unpublish 包名 --force` 命令，即可从 `npm` 删除已发布的包

   <img src="./images/Day_003/016 - npm publish.png" style="zoom:67%;" />

2.  注意事项

   - `npm unpublish` 命令**只能删除 72 小时以内发布的包**
   - `npm unpublish` 删除的包，**在 24 小时内不允许重复发布**
   -  发布包的时候要慎重，尽量**不要往 `npm` 上发布没有意义的包！**



### 6. 模块的加载机制

#### 6.1 优先从缓存中加载

模块在第一次加载后会被缓存，这意味着多次调用 `require()` 方法不会导致模块的代码被多次执行

注意：不论内置模块、用户自定义模块、还是第三方模块，他们都会优先从缓存中加载，从而提高模块的加载效率

```js
// 自定义模块.js

console.log('ok')
```

```js
require('./自定义模块.js')
require('./自定义模块.js')
require('./自定义模块.js')
```



#### 6.2 内置模块的加载优先级

内置模块是由 `Node.js` 官方提供的模块，**内置模块的加载优先级最高**

例如： `require('fs')` 始终返回内置的 `fs` 模块，即使在 `node_modules` 目录下有名字相同的包也叫做 `fs`

```js
const fs = require('fs') // 始终返回的是内置的 fs 模块
```



#### 6.3 自定义模块的加载机制

1.  使用 require() 加载自定义模块时，必须指定以 `./` 或者 `../` 开头的路径标识符。在加载自定义模块时，如果没有指定 `./` 或 `../` 这样的路径标识符，则 `node` 会把它当作 `内置模块` 或 `第三方模块` 进行加载
   
2.   在使用 `require()` 导入自定义模块时，如果省略了文件的拓展名，则 `Node` 会按照顺序分别尝试加载以下文件
   - 按照 **确切的文件名** 进行加载
   -  补全 **`.js`  **扩展名进行加载
   - 补全 **`.json` ** 扩展名进行加载
   - 补全 **`.node`** 扩展名进行加载
   - 加载失败，终端报错



#### 6.4 第三方模块的加载机制

1. 如果传递给 `require()` 的模块标识符不是一个内置模块，也没有以 `'./'` 或  `'../'` 开头，则 `Node.js` 会从当前模块的父目录开始，尝试从 `/node_modules` 文件夹中加载第三方模块

   

2.  **如果没有找到对应的第三方模块，则移动到再上一层父目录中，进行加载，直到文件系统的根目录**

   

3.  假设在 `C:\Users\itheima\project\foo.js` 文件里调用了 `require('tools')`，则 `Node.js` 会按以下顺序查找

   - `C:\Users\itheima\project\node_modules\tools`
   - `C:\Users\itheima\node_modules\tools`
   - `C:\Users\node_modules\tools`
   - `C:\node_modules\tools`



#### 6.5 目录作为模块

当把目录作为模块标识符，传递给 `require()` 进行加载的时候，有三种加载方式：

1.  在被加载的目录下查找一个叫做 `package.json` 的文件，并寻找 `main` 属性，作为 `require()` 加载的入口
2.  如果目录里没有 `package.json` 文件，或者 `main` 入口不存在或无法解析，则 `Node.js` 将会试图加载目录下的 `index.js` 文件
3. 如果以上两步都失败了，则 `Node.js` 会在终端打印错误消息，报告模块的缺失：`Error: Cannot find module xxx`



### 7. 初始 express

#### 7.1 express 简介

##### 7.1.1 什么是 express

1.  官方给出的概念：`Express` 是基于 `Node.js` 平台，快速、开放、极简的 `Web` 开发框架，[官方]( http://www.expressjs.com.cn/)
2.  通俗的理解：`Express` 的作用和 `Node.js` 内置的 `http` 模块类似，是专门用来创建 Web 服务器的
3.  `Express` 的本质：就是一个 `npm` 上的第三方包，提供了快速创建 Web 服务器的便捷方法



##### 7.1.2 进一步理解 Express

1.  思考：不使用 Express 能否创建 Web 服务器？

   - 答案：能，使用 `Node.js` 提供的原生 `http` 模块即可

   

2.  思考：既生瑜何生亮（有了 `http` 内置模块，为什么还有用 `Express`）？

   - 答案：`http` 内置模块用起来很复杂，开发效率低；`Express` 是基于内置的 `http` 模块进一步封装出来的，能够- 极大的提高开发效率

   

3.  思考：`http` 内置模块与 `Express` 是什么关系？

   - 答案：类似于浏览器中 `Web API` 和 `jQuery` 的关系。后者是基于前者进一步封装出来的



##### 7.1.3 Express 能做什么

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

   - **`Web` 网站服务器**：专门对外提供 `Web` 网页资源的服务器。

   -  **`API` 接口服务器**：专门对外提供 `API ` 接口的服务器。

     

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





#### 7.2  Express 的基本使用

1.  安装

   在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用

   ```js
   npm i express
   ```

   

2. 创建基本的 Web 服务器

   ```js
   // 1.导入 express
   const express = require('express')
   // 2. 创建 web 服务器
   const app = express()
   
   // 3. 调用 app.listen(端口号, 启动后的回调函数), 启动服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

#### 7.3 监听 GET 和 POST 请求，并影响客户端

1. 监听 `GET` 请求

   - 通过 `app.get()` 方法，可以监听客户端的 GET 请求，具体的语法格式如下

     <img src="./images/Day_003/017 - 监听GET请求.png" alt="监听GET请求.png" style="zoom:67%;" />

   
   
2. 监听 `POST` 请求

   - 通过 `app.post()` 方法，可以监听客户端的 POST 请求，具体的语法格式如下

     <img src="./images/Day_003/018 - 监听POST请求.png" alt="监听POST请求" style="zoom:67%;" />



3.  把内容响应给客户端

   - 通过 `res.send()` 方法，可以把处理好的内容，发送给客户端

     <img src="./images/Day_003/019 - send.png" alt="send" style="zoom:67%;" />



4.  完整代码

   ```js
   // 1.导入 express
   const express = require('express')
   // 2. 创建 web 服务器
   const app = express()
   
   // 4. 监听客户端的 GET 和 Post 请求，并向客户端响应具体的内容
   app.get('/user', (req, res) => {
     // 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象
     res.send({ name: 'zs', age: 20, gender: '男' })
   })
   
   app.post('/user', (req, res) => {
     // 调用 express 提供的 res.send() 方法，向客户端响应一个文本字符串
     res.send('请求成功')
   })
   
   // 3. 调用 app.listen(端口号, 启动后的回调函数), 启动服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

#### 7.4 获取 URL 中携带的查询参数

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

   <img src="./images/Day_003/020 - 获取 URL 中携带的查询参数.png" style="zoom:67%;" />



2.  完整代码

   ```js
   
   const express = require('express')
   const app = express()
   
   app.get('/', (req, res) => {
     // 通过 req.query 可以获取到客户端发送过来的，查询参数
     // 注意：默认情况下， req.query 是一个空对象
     console.log(req.query)
     res.send(req.query)
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   



#### 7.5 获取 URL 中的动态参数

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

   <img src="./images/Day_003/021 - 获取 URL 中的动态参数.png" style="zoom:67%;" />



2.  补充知识点

   - `/:id​` -- id 值不是固定的，可以自己定义，例如： `/:ids`
   - 展示到页面中的 `id` 键，是自定义的变量值
   - 参数可以有多个，例如： `/:ids/:name`

   
   
3. 完整代码

```js
const express = require('express')
const app = express()

// 注意：这里的 :id 是一个动态的参数
app.get('/user/:id', (req, res) => {
  // req.params 是动态匹配到的 URL 参数，默认也会是一个空对象
  console.log(req.params)
  res.send(req.params)
})

app.listen(3000, () => {
  console.log('running……')
})

```





#### 7.6 托管静态资源

##### 7.6.1 `express.static()`

1.  `express` 提供了一个非常好用的函数，叫做 `express.static()`，通过它，我们可以非常方便地创建一个静态资源服务器，
   例如，通过如下代码就可以将 `public` 目录下的图片、`CSS` 文件、`JavaScript` 文件对外开放访问了

   <img src="./images/Day_003/022 - express.static().png" alt="express.static" style="zoom:67%;" />

   现在，你就可以访问 public 目录中的所有文件了：
   访问图片资源：http://localhost:3000/images/bg.jpg
   访问 `css` 资源：http://localhost:3000/css/style.css
   访问 `js` 资源：http://localhost:3000/js/login.js

2.  注意：`Express` 在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在 `URL` 中
   

3.  完整代码

   ```js
   const express = require('express')
   const app = express()
   
   // 在这里，调用 express.static() 方法，快速的对外提供静态资源
   app.use(express.static('public'))
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

##### 7.6.2 托管多个静态资源目录

1.  如果要托管多个静态资源目录，请多次调用 `express.static()` 函数，
    访问静态资源文件时，`express.static()` 函数会根据目录的添加顺序查找所需的文件

   <img src="./images/Day_003/023 - 托管多个静态资源目录.png" style="zoom:67%;" />

2. 完整代码

   ```js
   const express = require('express')
   const app = express()
   
   // 在这里，调用 express.static() 方法，快速的对外提供静态资源
   app.use(express.static('public'))
   app.use(express.static('static'))
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```





##### 7.6.3   挂载路径前缀

1.  如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式

   <img src="./images/Day_003/024 - 挂载路径前缀.png" style="zoom:67%;" />

   可以通过带有 `/public` 前缀地址来访问 public 目录中的文件了：
   http://localhost:3000/public/images/kitten.jpg
   http://localhost:3000/public/css/style.css
   http://localhost:3000/public/js/app.js

   
   

2.  完整代码

   ```js
   const express = require('express')
   const app = express()
   
   // 在这里，调用 express.static() 方法，快速的对外提供静态资源
   app.use('/static', express.static('public'))
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   



#### 8.  安装 `nodemon`

#### 8.1 安装 `nodemon`

1.  为什么要使用 `nodemon`

   在编写调试 `Node.js` 项目的时候，如果修改了项目的代码，则需要频繁的手动 `close` 掉，然后再重新启动，非常繁琐。现在，我们可以使用 [nodemon](https://www.npmjs.com/package/nodemon) 这个工具，它能够监听项目文件的变动，当代码被修改后，`nodemon` 会自动帮我们重启项目，极大方便了开发和调试

   

2. 安装 `nodemon`

   ```js
   npm i nodemon -g
   ```

   

#### 8.2 使用 `nodemon` 实现后台项目的重启

1.  当基于 `Node.js` 编写了一个网站应用的时候，传统的方式，是运行 `node app.js` 命令，来启动项目
   这样做的坏处是：代码被修改之后，需要手动重启项目

   

2. 将 `node` 命令替换为 `nodemon` 命令，使用 `nodemon app.js` 来启动项目

   这样做的好处是：代码被修改之后，会被 `nodemon` 监听到，从而实现自动重启项目的效果

   ```js
   // 使用 node 运行项目
   node app.js
   
   // 使用 nodemon 运行项目
   nodemon index.js
   ```

   

## Node 第 4 天

### 1.  学习目标

◆ Express 路由

◆ Express 中间件

◆ 使用 Express 写接口



### 2. Express 路由

#### 2.1 路由的概念

 1.    路由就是**映射关系**

 2.    根据不同的用户 URL 请求，返回不同的内容

 3.    本质：URL 请求地址与服务器资源之间的对应关系

      <img src="./images/Day_004/001 - 路由.png" style="zoom:67%;" />



#### 2.2 Express 中的路由

1.  在 `Express` 中，路由指的是**客户端的请求**与**服务器处理函数**之间的**映射关系**

2. Express 中的路由分 3 部分组成，分别是**请求的类型**、**请求的 URL 地址**、**处理函数**

   <img src="./images/Day_004/002 - express中的路由.png" style="zoom:67%;" />

   
   
3.  Express 中的路由的例子

   <img src="./images/Day_004/003 - Express 中的路由的例子.png" style="zoom:67%;" />



#### 2.3 路由的匹配过程

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

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

   <img src="./images/Day_004/004 - 路由的匹配过程.png" style="zoom:67%;" />

   
   
3.  路由匹配的注意点

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



#### 2.4 Express 路由最简单的用法

1.  在 `Express` 中使用路由最简单的方式，就是把路由挂载到 `app` 上

   

2.  案例代码

   ```js
   const express = require('express')
   // 创建 web 服务器，命名为 app
   const app = express()
   
   // 挂载路由
   app.get('/', (req, res) => {
     res.send('Hello, World')
   })
   
   app.post('/', (req, res) => {
     res.send('Hello, Tom')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 2.5 模块化路由

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

   -  创建路由模块对应的 `.js` 文件

   - 调用 `express.Router()`函数创建路由对象

   - 向路由对象上挂载具体的路由

   - 使用 `module.exports` 向外共享路由对象

   - 使用 `app.use()` 函数注册路由模块

     

2.  案例代码

   ```js
   // 1. 导入 express
   const express = require('express')
   // 2. 创建路由对象
   const router = express.Router()
   
   // 3. 挂载获取用户列表的路由
   router.get('/user/list', (req, res) => {
     res.send('用户列表')
   })
   
   // 4. 挂载添加用户列表的路由
   router.post('/user/add', (req, res) => {
     res.send('添加用户')
   })
   
   // 5. 向外导出路由对象
   module.exports = router
   
   ```



#### 2.6 注册路由模块

1.  导入路由模块

2.  使用 `app.use()` 注册路由模块

3. 案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 导入路由模块
   const userRouter = require('./002-router')
   
   // 使用 app.use() 注册路由模块
   app.use(userRouter)
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 2.7 为路由模块添加前缀

1.  类似于托管静态资源写法，为静态资源统一挂载访问前缀一样

2.  注意，添加了路由前缀后，访问的路由的时候，也应该加上前缀

3. 案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 导入路由模块
   const userRouter = require('./002-router')
   
   // 使用 app.use() 注册路由模块
   // 给路由模块添加统一得到访问前缀 /api
   app.use('/api', userRouter)
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   



### 3. 中间件

#### 3.1 中间件的概念

1.  什么是中间件

   所谓的中间件（`Middleware` ），特指业务流程的中间处理环节

   

2.  现实生活中的例子

   在处理污水的时候，一般都要经过三个处理环节，从而保证处理过后的废水，达到排放标准

   处理污水的这三个中间处理环节，就可以叫做中间件

   <img src="./images/Day_004/005 - 中间件.png" alt="中间件" style="zoom:67%;" />

   

#### 3.2 Express 中间件的调用流程

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

<img src="./images/Day_004/006 - 中间件的调用流程.png" style="zoom:67%;" alt="中间件的调用流程" />



#### 3.3 Express 中间件的格式

1.  Express 的中间件，**本质上就是一个 `function` 处理函数**，`Express` 中间件的格式如下

<img src="./images/Day_004/007 - Express 中间件的格式.png" style="zoom:67%;" />



2.  注意：中间件函数的形参列表中，**必须包含 next 参数**。而路由处理函数中只包含 `req` 和 `res`



#### 3.4 next 函数的作用

**next 函数**是实现**多个中间件连续调用**的关键，它表示把流转关系**转交**给下一个**中间件**或**路由**

<img src="./images/Day_004/008 - next 函数的作用.png" style="zoom:67%;" />





#### 3.5  定义中间件函数

- 定义一个最简单的中间件函数

  ```js
  const express = require('express')
  const app = express()
  
  // 定义一个最简单的中间件函数
  const kw = () => {
    console.log('这是最简单的中间件函数')
  
    // 把流转关系，转交给下一个中间件或者路由
    next()
  }
  
  app.listen(80, () => {
    console.log('running……')
  })
  
  ```





#### 3.6 全局生效的中间件

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

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

   ```js
   const express = require('express')
   const app = express()
   
   // 定义一个最简单的中间件函数
   const kw = (req, res, next) => {
     console.log('这是最简单的中间件函数')
   
     // 把流转关系，转交给下一个中间件或者路由
     next()
   }
   
   // 全局生效的中间件
   app.use(kw)
   
   app.get('/', (req, res) => {
     console.log('调用了 / 这个路由')
     
     res.send('Home page')
   })
   
   app.get('/user', (req, res) => {
     console.log('调用了 /user 这个路由')
     res.send('User page')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 3.7 定义全局中间件的简化形式

1.  定义全局中间件也可以将中间件函数直接挂载到 `app.use()` 上面

```js
const express = require('express')
const app = express()

// 定义全局中间件的简化形式
app.use((req, res, next) => {
  console.log('定义全局中间件的简化形式')

  next()
})

app.get('/', (req, res) => {
  console.log('调用了 / 这个路由')
  
  res.send('Home page')
})

app.get('/user', (req, res) => {
  console.log('调用了 /user 这个路由')
  res.send('User page')
})

app.listen(3000, () => {
  console.log('running……')
})

```



#### 3.8 中间件的作用

1.  多个中间件之间，共享同一份 `req` 和 `res`，基于这样的特性，我们可以在**上游** 的中间件中，统一为 `req` 或 `res` 对象添加自定义的属性和方法，供下游的中间件或路由进行使用

<img src="./images/Day_004/009 - 中间件的作用.png" style="zoom:67%;" />



2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 定义全局中间件的简化形式
   app.use((req, res, next) => {
     // 获取到请求达到服务器的时间
     const time = Date.now()
   
     // 为 req 对象，挂载自定义属性，从而把时间共享给后面的所有路由
     req.startTime = time
     next()
   })
   
   app.get('/', (req, res) => {
     res.send('Home page' + req.startTime)
   })
   
   app.get('/user', (req, res) => {
     res.send('User page' + req.startTime)
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   



#### 3. 9 定义多个全局中间件

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

   

2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 第一个全局中间件
   app.use((req, res, next) => {
     console.log('调用了第一个全局的中间件')
     next()
   })
   
   // 第二个全局中间件
   app.use((req, res, next) => {
     console.log('调用了第二个全局的中间件')
     next()
   })
   
   // 定义路由
   // 请求这两个路由，会依次触发上述两个全局中间件
   app.get('/user', (req, res) => {
     res.send('User Page')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 3.10 局部生效的中间件

1.  不使用 `app.use()` 定义的中间件，叫做局部生效的中间件

   

2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 定义中间件函数 mv1
   const mv1 = (req, res, next) => {
     console.log('这是中间件函数')
   
     next()
   }
   
   // mv1 这个中间件只在 "当前路由中生效"，这种用法属于 "局部生效的中间件"
   app.get('/', mv1, (req, res) => {
     res.send('Home Page')
   })
   
   app.get('/user', (req, res) => {
     res.send('User Page')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 3.11 定义多个局部中间件

1.  可以在路由中，通过如下两种等价的方式，使用多个局部中间件

   

2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 定义中间件函数 mv1
   const mv1 = (req, res, next) => {
     console.log('这是第一个中间件函数')
   
     next()
   }
   
   // 定义中间件函数 mv2
   const mv2 = (req, res, next) => {
     console.log('这是第二个中间件函数')
   
     next()
   }
   
   // mv1、mv2 这个中间件只在 "当前路由中生效"，这种用法属于 "局部生效的中间件"
   app.get('/', mv1, mv2, (req, res) => {
     res.send('Home Page')
   })
   
   // 也可以使用数组的形式绑定两个中间件
   app.get('/user', [mv1, mv2], (req, res) => {
     res.send('Home Page')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 3.12 中间件的5个使用注意事项

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



### 4. 中间件的分类

#### 4.1 中间件的分类

##### 4.1.1 中间件的分类

1.  为了方便大家理解和记忆中间件的使用，Express 官方把常见的中间件用法，分成了 5 大类，分别是

   - 应用级别的中间件
   - 路由级别的中间件
   - 错误级别的中间件
   - Express 内置的中间件
   - 第三方的中间件

   

##### 4.1.2 什么是应用级别的中间件

通过 `app.use()` 或 `app.get()` 或 `app.post()` ，**绑定到 `app` 实例上的中间件**，叫做应用级别的中间件

<img src="./images/Day_004/010 - 应用级别的中间件.png" style="zoom:67%;" />





##### 4.1.3 什么是路由级别的中间件

1.  绑定到 `express.Router()` 实例上的中间件，叫做路由级别的中间件

2.  用法上和应用级别中间件没有任何区别，只不过，应用级别中间件是绑定到 `app` 实例上，路由级别中间件绑定到 `router` 实例上

   <img src="./images/Day_004/011 - 路由级别的中间件.png" style="zoom: 85%;" />



#### 4.2 错误级别中间件

1.  错误级别中间件的作用： 专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题

2.  格式：错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是`(err, req, res, next)`

3.  **注意： 错误级别的中间件，必须注册在所有路由之后**

4.  案例代码：

   ```js
   const express = require('express')
   const app = express()
   
   // 1. 路由
   app.get('/', (req, res) => {
     // 1.1 抛出一个自定义的错误
     throw new Error('服务器内部发生了错误')
   
     res.send('Home Page.')
   })
   
   // 2. 错误级别的中间件
   // 注意：错误级别的中间件，必须注册在所有路由之后
   app.use((err, req, res, next) => {
     // 2.1 在服务器打印错误消息
     console.log('发生了错误：' + err.message)
   
     // 2.2 向客户端响应错误相关的内容 
     res.send(err.message)
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 4.3 Express内置的中间件

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

1.  `express.static` 快速托管静态资源的内置中间件，例如： HTML 文件、图片、`CSS` 样式等（无兼容性）

2.  `express.json` 解析 `JSON` 格式的请求体数据（**有兼容性**，仅在 `4.16.0+` 版本中可用）

3.  `express.urlencoded` 解析 `URL-encoded` 格式的请求体数据（**有兼容性**，仅在 `4.16.0+` 版本中可用）

   <img src="./images/Day_004/012 - Express内置的中间件.png" style="zoom:67%;" />





#### 4.4 `express.json` 中间件的使用

1.   `express.json()`  中间件，解析表单中的 `JSON` 格式的数据

2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 注意：除了错误级别的中间件，其他的中间件，必须在路由之前进行配置
   // 通过 express.json() 这个中间件，解析表单中的 JSON 格式的数据
   app.use(express.json())
   
   app.post('/user', (req, res) => {
     // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
     // 默认情况下，如果不配置解析表单数据中间件，则 req.body 默认等于 undefined
     console.log(req.body)
     res.send('ok')
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 4.5 `express.urlencoded` 中间件的使用

1.  `express.urlencoded` 解析 `URL-encoded` 格式的请求体数据

2.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 通过 express.urlencoded() 这个中间件，来解析表单中的 url-encoded 格式的数据
   app.use(express.urlencoded({ extended: false }))
   
   app.post('/book', (req, res) => {
     console.log(req.body)
     res.send(req.body)
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```





#### 4.6 第三方的中间件

##### 4.6.1 什么是第三方中间件

1.  非 `Express` 官方内置，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率

2. 例如：在 `express@4.16.0` 之前的版本中，经常使用 `body-parser` 这个第三方中间件，来解析请求体数据。使用步骤如下

   - 运行 `npm install body-parser` 安装中间件
   - 使用 `require` 导入中间件
   - 调用 `app.use()` 注册并使用中间件

3.  **注意：`Express` 内置的 `express.urlencoded` 中间件，就是基于 `body-parser` 这个第三方中间件进一步封装出来的**

4.  案例代码

   ```js
   const express = require('express')
   const app = express()
   
   // 1. 导入解析表单数据的中间件 body-parser
   const bodyParser = require('body-parser')
   
   // 通过 express.urlencoded() 这个中间件，来解析表单中的 url-encoded 格式的数据
   // app.use(express.urlencoded({ extended: false }))
   
   // 2. 使用 app.use() 注册中间件
   app.use(bodyParser.urlencoded({ extended: false }))
   
   app.post('/book', (req, res) => {
     console.log(req.body)
     res.send(req.body)
   })
   
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

### 5. 自定义中间件

#### 5.1 需求描述与实现步骤

##### 5.1.1 需求以及实现步骤

1.  需求描述： 自己手动模拟一个类似于 `express.urlencoded` 这样的中间件，来解析 **`POST 提交到服务器的表单数据`**
2.  实现步骤：
   - 定义中间件
   - 监听 `req` 的 `data` 事件
   - 监听 `req` 的 `end` 事件
   - 使用 `querystring` 模块解析请求体数据
   - 将解析出来的数据对象挂载为 `req.body`
   - 将自定义中间件封装为模块

##### 5.1.2 定义中间件

1.  使用 `app.use()` 来定义全局生效的中间件

2.  代码如下：

   <img src="./images/Day_004/013 - 定义中间件.png" style="zoom:67%;" />

   

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // 解析表单数据的中间件
   app.use((req, res, next) => {
     // 定义中间价具体的业务逻辑
   })
   
   // 调用 app.listen方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

#### 5.2  监听 `req` 的 `data` 事件

1.  在中间件中，需要监听 `req` 对象的 `data` 事件，来获取客户端发送到服务器的数据

2.  如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以 `data` 事件可能会触发多次，每一次触发 `data` 事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接

3. 代码如下：

   <img src="./images/Day_004/014 - 监听 req 的 data 事件.png" style="zoom:80%;" />

   

4. 案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // 解析表单数据的中间件
   app.use((req, res, next) => {
     // 定义中间价具体的业务逻辑
     // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
     let str = ''
     // 2. 监听 req 的 data 事件
     req.on('data', (chunk) => {
       str += chunk
     })
   })
   
   // 调用 app.listen方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 5.3 监听 `req` 的 `end` 事件

1.  当请求体数据接收完毕之后，会自动触发 `req` 的 `end` 事件

2.  我们可以在 `req` 的 `end` 事件中，拿到并处理完整的请求体数据

3.  代码如下

   <img src="./images/Day_004/015 - 监听 req 的 end 事件.png" style="zoom:67%;" />

   

4.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // 解析表单数据的中间件
   app.use((req, res, next) => {
     // 定义中间价具体的业务逻辑
     // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
     let str = ''
     // 2. 监听 req 的 data 事件
     req.on('data', (chunk) => {
       str += chunk
     })
   
     // 3. 监听 req 的 end 事件
     req.on('end', () => {
       // 在 str 中存放的是完整的请求体数据
       console.log(str)
       // 将字符串格式的请求体数据，解析成对象
     })
   })
   
   app.post('/user', (req, res) => {
     res.send('ok')
   })
   
   // 调用 app.listen方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 5.4 用 `querystring` 模块解析请求体数据

1.  `Node.js` 内置了一个 `querystring` 模块，专门用来处理查询字符串。通过这个模块提供的 `parse()` 函数，可以轻松把查询字符串，解析成对象的格式

2.  代码如下

   <img src="./images/Day_004/016 - 使用 querystring 模块解析请求体数据.png" style="zoom:67%;" />

   

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   // 4. 导入 Node 内置模块 querystring
   const qs = require('querystring')
   
   // 解析表单数据的中间件
   app.use((req, res, next) => {
     // 定义中间价具体的业务逻辑
     // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
     let str = ''
     // 2. 监听 req 的 data 事件
     req.on('data', (chunk) => {
       str += chunk
     })
   
     // 3. 监听 req 的 end 事件
     req.on('end', () => {
       // 在 str 中存放的是完整的请求体数据
       console.log(str)
       // 将字符串格式的请求体数据，解析成对象
       // 5. 调用 qs.parse() 方法，将查询字符串解析成对象
       const body =  qs.parse(str)
       console.log(body)
     })
   })
   
   app.post('/user', (req, res) => {
     res.send('ok')
   })
   
   // 调用 app.listen方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```





#### 5.5 将解析出来的数据对象挂载为 `req.body`

1.  **上游的中间件和下游的中间件及路由之间，共享同一份 `req` 和 `res`**，因此，我们可以将解析出来的数据，挂载为 `req` 的自定义属性，命名为 `req.body`，供下游使用

2.  代码如下

   <img src="./images/Day_004/017 - 将解析出来的数据对象挂载为 req.body.png" style="zoom:67%;" />

   

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   // 4. 导入 Node 内置模块 querystring
   const qs = require('querystring')
   
   // 解析表单数据的中间件
   app.use((req, res, next) => {
     // 定义中间价具体的业务逻辑
     // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
     let str = ''
     // 2. 监听 req 的 data 事件
     req.on('data', (chunk) => {
       str += chunk
     })
   
     // 3. 监听 req 的 end 事件
     req.on('end', () => {
       // 在 str 中存放的是完整的请求体数据
       console.log(str)
       // 将字符串格式的请求体数据，解析成对象
       // 5. 调用 qs.parse() 方法，将查询字符串解析成对象
       const body =  qs.parse(str)
   
       // 6. 将解析出来的数据对象挂载为 req.body 属性
       req.body = body
       next()
     })
   })
   
   app.post('/user', (req, res) => {
     res.send(req.body)
   })
   
   // 调用 app.listen方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```



#### 5.6  将自定义中间件封装为模块

1.  为了优化代码的结构，我们可以把自定义的中间件函数，封装为独立的模块

2.  代码如下：

   <img src="./images/Day_004/018 - 将自定义中间件封装为模块.png" style="zoom: 80%;" />

   

3.  案例代码

```js
// custom-body-parser.js

const qs = require('querystring')

const bodyParser = (req, res, next) => {
  // 定义中间价具体的业务逻辑
  // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
  let str = ''
  // 2. 监听 req 的 data 事件
  req.on('data', (chunk) => {
    str += chunk
  })

  // 3. 监听 req 的 end 事件
  req.on('end', () => {
    // 在 str 中存放的是完整的请求体数据
    console.log(str)
    // 将字符串格式的请求体数据，解析成对象
    // 5. 调用 qs.parse() 方法，将查询字符串解析成对象
    const body =  qs.parse(str)

    // 6. 将解析出来的数据对象挂载为 req.body 属性
    req.body = body
    next()
  })
}

module.exports = bodyParser

```

```js
// 对自定义的中间件进行模块化拆分

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// 1. 导入自己封装的中间件模块
const customBodyParser = require('./017-custom-body-parser')
// 2. 将自定义的中间件函数，注册为全局可用的中间件
app.use(customBodyParser)

app.post('/user', (req, res) => {
  res.send(req.body)
})

// 调用 app.listen方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})

```



### 6. 基于 Express 写接口

#### 6.1 创建基本的服务器

```js
// 导入 express 模块
const express = require('express')

// 创建 express 的服务器实例
const app = express()

// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})

```





#### 6.2 创建 API 路由模块

```js
// router.js

const express = require('express')
const router = express.Router()

// 在这里挂载对应的路由


module.exports = router

```

```js
// index.js

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

// 创建 express 的服务器实例
const app = express()

// 导入路由模块
const router = require('./router.js')
// 把路由模块，注册到 app 上
app.use('/api', router)

// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})

```





#### 6.3 编写 get 请求

```js
const express = require('express')
const router = express.Router()

// 在这里挂载对应的路由
router.get('/book', (req, res) => {
  // 通过 req.query 获取客户端通过查询字符串发送到服务器的数据
  const query = req.query

  // 调用 res.send() 方法，想客户端响应处理的结果
  res.send({
    status: 0,  // 0 表示处理成功，1 表示处理失败
    msg: 'GET 请求成功',  // 状态描述
    data: query // 需要响应给客户端的数据
  })
})

module.exports = router

```





#### 6.4 编写 post 请求

**注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 `app.use(express.urlencoded({ extended: false }))`**

```js
const express = require('express')
const router = express.Router()

// 在这里挂载对应的路由

// 定义 POST 接口
router.post('/book', (req, res) => {
  // 通过 req.body 获取请求题中包含的 url-encoded 格式的数据
  const body = req.body

  // 调用 res.send() 方法，向客户端响应结果
  res.send({
    status: 0,
    msg: 'Post 请求成功',
    data: body
  })
})

module.exports = router

```

```js
// index.js
// 导入 express 模块
const express = require('express')

// 创建 express 的服务器实例
const app = express()

// 配置解析表单数据的中间件
//注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))
app.use(express.urlencoded({ extended: false }))

// 导入路由模块
const router = require('./020-apiRouter')
// 把路由模块，注册到 app 上
app.use('/api', router)

// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})

```



### 7. `cors`

#### 7.1  接口的跨域问题

1.  到目前为止，我们编写的 `GET` 和 `POST` 接口，存在一个很严重的问题：**不支持跨域请求**

2.   解决接口跨域问题的方案主要有两种

   - **CORS**  (主流的解决方案，推荐使用)
   - **JSONP**  (有缺陷的解决方案：只支持 GET 请求)

3.  代码演示

   ```html
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
   </head>
   
   <body>
     <button class="btn1">get</button>
     <button class="btn2">post</button>
   
     <script>
       $(function () {
         $('.btn1').click(function () {
           $.ajax({
             url: 'http://127.0.0.1:3000/api/book?name=tom&age=10',
             success: function (data) {
               console.log(data)
             }
           })
         })
   
         $('.btn2').click(function () {
           $.ajax({
             url: 'http://127.0.0.1:3000/api/book',
             method: 'post',
             data: {
               name: '雪中悍刀行',
               author: '烽火戏诸侯'
             },
             success: function (data) {
               console.log(data)
             }
           })
         })
       })
     </script>
   </body>
   
   </html>
   ```

   

4.  报错提示

   <img src="./images/Day_004/019 - 跨域.png" style="zoom: 200%;" />





#### 7.2 使用 cors 中间件解决跨域问题

1. cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题

2. 使用步骤

   - 安装中间件： `npm install cors`
   - 导入中间件： ` const cors = require('cors')`
   - 配置中间件： 在路由之前调用` app.use(cors())`

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 导入中间件
   const cors = require('cors')
   // 配置中间件
   app.use(cors())
   
   // 配置解析表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 导入路由模块
   const router = require('./020-apiRouter')
   // 把路由模块，注册到 app 上
   app.use('/api', router)
   
   // 调用 app.listen 方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

4.  配置 `cors ` 插件后

   <img src="./images/Day_004/020 - cors.png" style="zoom: 80%;" />



#### 7.3  什么是 CORS 以及注意事项

##### 7.3.1 什么是 CORS

1.  `CORS` (跨域资源共享) 由一系列 `HTTP` 响应头组成，这些 `HTTP` 响应头决定浏览器 **是否阻止前端 JS 代码跨域获取资源**

2.  浏览器的**同源安全策略**默认会阻止网页“跨域”获取资源。但如果接口服务器**配置了 CORS 相关的 HTTP 响应头**，就可以**解除浏览器端的跨域访问限制**

   <img src="./images/Day_004/021 - 什么是 CORS.png" style="zoom:80%;" />



##### 7.3.2  CORS 的注意事项

1.  `CORS` 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 `CORS` 的接口
2.  `CORS` 在浏览器中有兼容性。只有支持 `XMLHttpRequest Level2` 的浏览器，才能正常访问开启了 `CORS` 的服务端接口（例如：`IE10+`、`Chrome4+`、`FireFox3.5+`）



#### 7.4 了解 Access-Control-Allow-Origin

1.  响应头部中可以携带一个 `Access-Control-Allow-Origin` 字段

   <img src="./images/Day_004/022 - Access-Control-Allow-Origin.png" alt="Access-Control-Allow-Origin" style="zoom:67%;" />

2.  `origin` 参数的值指定了允许访问该资源的外域 `URL`

3.  例如，下面的字段值将只允许来自 http://itcast.cn 的请求

   <img src="./images/Day_004/023 -  Access-Control-Allow-Origin.png" style="zoom:67%;" />



 4.   如果指定了 `Access-Control-Allow-Origin` 字段的值为通配符 *，表示允许来自任何域的请求

      <img src="./images/Day_004/024 - Access-Control-Allow-Origin.png" style="zoom:67%;" />



#### 7.5 了解  Access-Control-Allow-Headers

1. 默认情况下，CORS 仅支持客户端向服务器发送如下的 9 个请求头

   - `Accept`
   - `Accept-Language`
   - `Content-Language`
   - `DPR`
   - `Downlink`
   - `Save-Data`
   - `Viewport-Width`
   - `Width`
   - `Content-Type` （值仅限于 `text/plain`、`multipart/form-data`、`application/x-www-form-urlencoded` 三者之一）

   

2.  如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 `Access-Control-Allow-Headers` 对额外的请求头进行声明，否则这次请求会失败！

   <img src="./images/Day_004/025 - Access-Control-Allow-Headers.png" style="zoom:67%;" />



#### 7.6 了解  Access-Control-Allow-Methods

1.  默认情况下，`CORS` 仅支持客户端发起 `GET`、`POST`、`HEAD` 请求

2. 如果客户端希望通过 `PUT`、`DELETE` 等方式请求服务器的资源，则需要在服务器端，通过 `Access-Control-Alow-Methods` 来指明实际请求所允许使用的 `HTTP` 方法

   <img src="./images/Day_004/026 - Access-Control-Allow-Methods.png" style="zoom:67%;" />



#### 7.7 CORS 请求的分类

##### 7.7.1 CORS请求的分类

1.  客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类，分别是：

   -  简单请求
   -   预检请求

   

##### 7.2.2 简单请求

1.  同时满足以下两大条件的请求，就属于简单请求
   - **请求方式**：`GET`、`POST`、`HEAD` 三者之一
   - HTTP 头部信息不超过以下几种字段：
     - 无自定义头部字段
     - `Accept`
     - `Accept-Language`
     - `Content-Language`
     - `DPR`
     - `Downlink`
     - `Save-Data`
     - `Viewport-Width`
     - `Width `
     - `Content-Type`（只有三个值 `application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`）



##### 7.3.3 预检请求

1.  只要符合以下任何一个条件的请求，都需要进行预检请求

   - 请求方式为 `GET`、`POST`、`HEAD` 之外的请求 `Method` 类型
   - 请求头中包含自定义头部字段
   - 向服务器发送了 `application/json` 格式的数据

   

2.  在浏览器与服务器正式通信之前，浏览器会**先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求**，所以这一次的 OPTION 请求称为“预检请求”。**服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据**





#### 7.4 简单请求和预检请求的区别

1.  简单请求的特点：客户端与服务器之间**只会发生一次请求**
2.  预检请求的特点：客户端与服务器之间**会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求**



### 8. `jsonp`

#### 8.1 回顾 `JSONP` 的概念与特点

1.  概念：浏览器端通过 `<script>` 标签的 `src` 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 `JSONP`
2.  特点
   -  `JSONP` 不属于真正的 `Ajax` 请求，因为它没有使用 `XMLHttpRequest` 这个对象
   -  `JSONP` 仅支持 `GET` 请求，不支持 `POST`、`PUT`、`DELETE` 等请求



#### 8.2 创建 `JSONP` 接口的注意事项

1.  如果项目中已经配置了 `CORS` 跨域资源共享，为了防止冲突，必须在配置 `CORS` 中间件之前声明 `JSONP` 的接口

    否则 `JSONP` 接口会被处理成开启了 `CORS` 的接口

   

2.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 配置解析表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 必须在配置 cors 中间件之前，配置 JSONP 的接口
   app.get('/api/jsonp', (req, res) => {
     // 定义 JSONP 接口具体的实现过程
   })
   
   // 导入中间件
   const cors = require('cors')
   app.use(cors())
   
   // 导入路由模块
   const router = require('./020-apiRouter')
   // 把路由模块，注册到 app 上
   app.use('/api', router)
   
   // 调用 app.listen 方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```

   

#### 8.3 实现 `JSONP` 接口的步骤

##### 8.3.1 实现步骤分析

1.  获取客户端发送过来的回调函数的名字
2.  得到要通过 `JSONP` 形式发送给客户端的数据
3.  根据前两步得到的数据，拼接出一个函数调用的字符串
4.  把上一步拼接得到的字符串，响应给客户端的 `<script>` 标签进行解析执行



##### 8.3.2  案例代码

1.  实现步骤

   <img src="./images/Day_004/027 - 实现 JSONP接口的步骤.png" style="zoom:67%;" />



2.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 配置解析表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 必须在配置 cors 中间件之前，配置 JSONP 的接口
   app.get('/api/jsonp', (req, res) => {
     // 定义 JSONP 接口具体的实现过程
     // 1. 得到函数的名称
     const funcName = req.query.callback
     // 2. 定义要发送到客户端的数据对象
     const data = { name: 'zs', age: 11 }
     // 3. 拼接处一个函数的调用
     const scriptStr = `${funcName}(${JSON.stringify(data)})`
     // 4. 把拼接的字符串，响应给客户端
     res.send(scriptStr)
   })
   
   // 导入中间件
   const cors = require('cors')
   app.use(cors())
   
   // 导入路由模块
   const router = require('./020-apiRouter')
   // 把路由模块，注册到 app 上
   app.use('/api', router)
   
   // 调用 app.listen 方法，指定端口号并启动 web 服务器
   app.listen(3000, () => {
     console.log('running……')
   })
   
   ```





#### 8.4  在网页中使用 jQuery 发起 JSONP 请求

1.  调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
  <script>
    $(function () {
      $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1:3000/api/jsonp',
        dataType: 'jsonp',
        success: function (res) {
          console.log(res)
        }
      })
    })
  </script>
</body>

</html>
```






























## Node 第 5 天

### 1.  学习目标

◆ 能够知道如何配置 MySQL 数据库环境

◆ 能够认识并使用常见的 SQL 语句操作数据库

◆ 能够在项目中操作 MySQL 数据库



### 2. 数据库的基本概念

#### 2.1 什么是数据库

1.  数据库（database）是用来组织、存储和管理数据的仓库
2.  为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作



#### 2.2 常见的数据库以及分类

1.  常见的数据库分类下面几种
   - `MySQL` 数据库（目前使用最广泛、流行度最高的开源免费数据库；`Community` + `Enterprise`）
   - `Oracle` 数据库（收费）
   - `SQL Server` 数据库（收费）
   - `Mongodb` 数据库 (`Community` + `Enterprise`)



 	2.  数据库分类
      - 传统数据库(关系型数据库或SQL数据库)
        - MySQL、Oracle、SQL Server，这三者的设计理念相同，用法比较类似
      - 新型数据库(非关系数据库或NoSQL数据库)
        - Mongodb，它在一定程度上弥补了传统型数据库的缺陷



#### 2.3 传统型数据库的数据组织结构

1.  在传统的类型的数据库中，数据的组织结构分为数据库(`database`)、数据表(`table`)、数据行(`row`)、字段(`field`) 这 4 大部分组成

   <img src="./images/Day_005/001 - 传统型数据库中的数据组织结构.png" style="zoom:67%;" />

2.  概念对象

   - **数据库**类似于 Excel 的**工作簿**
   - **数据表**类似于 Excel 的**工作表**
   - **数据行**类似于 Excel 的**每一行数据**
   - **字段类**似于 Excel 的**列**
   - 每个字段都有对应的数据类型



#### 2.4  实际开发中库、表、行、字段的关系

1.  在实际项目开发中，一般情况下，每个项目都对应独立的数据库
2.  不同的数据，要存储到数据库的不同表中，例如：用户数据存储到 users 表中，图书数据存储到 books 表中
3.  每个表中具体存储哪些信息，由字段来决定，例如：我们可以为 users 表设计 id、username、password 这 3 个字段
4.  表中的行，代表每一条具体的数据







### 3. 安装 MySQL

#### 3.1 了解需要安装哪些 `MySQL` 相关的软件

1.  对于开发人员来说，只需要安装 `MySQL Server` 和 `MySQL Workbench` 这两个软件，就能满足开发的需要了
   - `MySQL Server`：专门用来提供数据存储和服务的软件
   - `MySQL Workbench`：可视化的 `MySQL` 管理工具，通过它，可以方便的操作存储在 MySQL Server 中的数据



#### 3.2 `MySQL` 在 `Mac` 环境下的安装

1.  在 `Mac` 环境下安装 `MySQL` 的过程比 `Windows` 环境下的步骤简单很多
   -  先运行 `mysql-8.0.19-macos10.15-x86_64.dmg`这个安装包，将 `MySQL Server` 安装到 `Mac` 系统
   -  再运行 `mysql-workbench-community-8.0.19-macos-x86_64.dmg` 这个安装包，将可视化的 `MySQL Workbench` 工具安装到 `Mac` 系统
   - 具体的安装教程，可以参考 `素材 -> MySQL for Mac ->安装教程 - Mac系统安装MySql -> README.md`



#### 3.3 `MySQL` 在 `Windows` 环境下的安装

1.  在 `Windows` 环境下安装 `MySQL`，只需要运行 `mysql-installer-community-8.0.19.0.msi`  这个安装包，就能一次性将 `MySQL Server `和 `MySQL Workbench` 安装到自己的电脑上
2. 具体的安装教程，可以参考 `素材 -> MySQL for Windows ->安装教程 - Windows系统安装MySql -> README.md`





### 4. MySQL 的基本使用

#### 4.1 使用 `MySQL Workbench` 管理数据库

1.  点击 `window` 键，找到所有应用，找到安装的 `MySQL Workbench`，点击即可

2.  按照图示连接数据库

   <img src="./images/Day_005/002 - 连接数据库.png" style="zoom:67%;" />





#### 4.2 了解主界面的组成部分

1.  从上到下，从左到右依次是

   - 菜单栏
   - 工具栏
   - 数据库列表
   - 代码编辑区域
   - 信息区域
   - 输出区域

2.  图示组成部分以及如何设置界面

   <img src="./images/Day_005/003 - 了解主界面的组成部分.png" style="zoom:67%;" />





#### 4.3 创建数据库

1.  创建数据库的步骤

   - 点击创建库的按钮

   - 填写数据库的名称

   - 点击 `Apply` 按钮，创建数据库

2.  创建数据库图示

   <img src="./images/Day_005/004 - 创建数据库.png" style="zoom:67%;" />



#### 4.4 创建数据表

1.  点击 `Table` 表右键，出现弹框 `create Table` 即可创建数据表

2.  创建数据表图示

   <img src="./images/Day_005/007 - 创建数据表.png" style="zoom: 80%;" />





#### 4.5 设计表的字段名称和数据类型

1.  根据图示设计字段名称

   <img src="./images/Day_005/007 - 创建数据表.png" style="zoom: 80%;" />

   
   
   

2.  `DataType` 常见的数据类型：

   - `int` 整数
   - `varchar(len)` 字符串
   - `tinyint(1)`布尔值





#### 4.6  设置字段的特殊标识

1.  设置字段的特殊标识

   - `PK`（`Primary Key`）        --- 主键、唯一标识
   - `NN`（`Not Null`）              --- 值不允许为空
   - `UQ`（`Unique`）                  --- 值唯一
   - `AI`（`Auto Increment`）  --- 值自动增长

   

2.  根据图示设置字段的特殊标识

<img src="./images/Day_005/007 - 创建数据表.png" style="zoom: 80%;" />





#### 4.7  向表中写入数据

1.  按照图示想表中写入数据

   <img src="./images/Day_005/008 - 向表中写入数据.png" style="zoom:80%;" />







### 5.  SQL 语句

#### 5.1 什么是 SQL

1.  `SQL` 是 **结构化查询语言**，专门用来**访问和处理数据库的编程语言**。能够让我们以编程的形式，操作数据库里面的数据
2. 三个关键点：
   - `SQL` 是一门**数据库编程语言**
   - 使用 `SQL` 语言编写出来的代码，叫做 **SQL 语句**
   - `SQL` 语言只能在关系型数据库中使用（例如 `MySQL`、`Oracle`、`SQL Server`）。非关系型数据库（例如 `Mongodb`）不支持 `SQL` 语言



#### 5.2 SQL 能做什么

1.  从数据库中查询数据
2.  向数据库中插入新的数据
3.  更新数据库中的数据
4.  从数据库删除数据
5.  可以创建新数据库
6.  可在数据库中创建新表
7.  可在数据库中创建存储过程、视图



#### 5.3 SQL 的 SELECT 语句

##### 5.3.1 语法介绍

1.  `SELECT` 语句用于从表中查询数据。执行的结果被存储在一个结果表中（称为结果集）。语法格式如下

<img src="./images/Day_005/009 - SELECT 语句.png" style="zoom: 67%;" />



2.  注意：**SQL 语句中的关键字对大小写不敏感**。`SELECT` 等效于 `select`，`FROM` 等效于 `from`

3.  注意：**在执行语句的时候，需要选择默认的数据库，双击选择指定的数据库即可**

   ```js
   select * from users LIMIT 0, 1000	Error Code: 1046. No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar.	0.000 sec
   ```

   



##### 5.3.2 演示两种  SELECT 语句

1.   查询所有列写法

   - 从 `users` 表中选取所有的列，可以使用符号 `*` 取代列的名称

     <img src="./images/Day_005/010 - 查询所有列写法.png" style="zoom:67%;" />

     
     
- 案例代码
   
  ```sql
     -- 通过 * 把 users 表中的所有的数据查询出来
     
     select * from users
     ```
   
  
   
2.  `SELECT 列名称` 示例

   -  如需获取名为 `username` 和 `password` 的列的内容（从名为 `users` 的数据库表），请使用下面的 SELECT 语句

     <img src="./images/Day_005/011 - select 列名称.png" style="zoom:67%;" />

     

   - 案例代码

     ```sql
     -- 多列之间，使用英文逗号进行分隔
     
     select username, password from users
     ```



#### 5.4 SQL 的 INSERT INTO 语句

1.  语法

   `INSERT INTO` 语句用于向数据表中插入新的数据行，语法格式如下:

   <img src="./images/Day_005/012 - INSERT INTO 语句.png" style="zoom:67%;" />

   

   

2.  案例代码

   - 注意：新的数据需要加上引号，否则会报错

   ```sql
   insert into users (username, password) values ('mz', '123456')
   ```

   



#### 5.5 SQL 的 UPDATE 语句

1.  语法

   `Update` 语句用于修改表中的数据。语法格式如下

   <img src="./images/Day_005/013 - SQL 的 UPDATE 语句.png" style="zoom:67%;" />

   

2. 案例代码

   - **多个被更新的列之间， 使用英文的逗号进行分隔**
   - **where 后面跟着的是更新的条件**
   - **注意： 初学者经常忘记提供更新的 where 条件，这样会导致整张表的数据都被更新，一定要慎重**

   ```sql
   update users set password=654321 where id=4
   ```

   ```sql
   update users set password=888888, status=1 where id=4
   ```





#### 5.6  SQL 的 DELETE 语句

1.  语法

   - DELETE 语句用于删除表中的行

   <img src="./images/Day_005/014 - DELETE 语句用于删除表中的行.png" style="zoom:67%;" />

   

2.  案例代码

   - **注意： 初学者经常忘记提供更新的 where 条件，这样会导致整张表的数据都被更新，一定要慎重**

   ```js
   delete from users where id=4
   ```



#### 5.7 WHERE 子句

1.  `WHERE` 子句用于限定选择的标准。在 `SELECT`、`UPDATE`、`DELETE` 语句中，皆可使用 `WHERE` 子句来限定选择的标准

   <img src="./images/Day_005/015 - WHERE 子句.png" style="zoom:80%;" />

   

2.  可在 `WHERE` 子句中使用的运算符

   - 注意：在某些版本的 `SQL` 中，操作符 `<>` 可以写为 `!=`

   <img src="./images/Day_005/016 - WHERE 子句.png" style="zoom:80%;" />

   

   

3.  可以通过 `WHERE` 子句来限定 `SELECT` 的查询条件

   ```sql
   -- 查询 id 为 1 的所有用户
   select * from users where id=1
   
   -- 查询 id 大于 2 的所有用户
   select * from users where id>2
   
   --查询 username 不等于 admin 的所有用户
   select * from users where username<>'zs'
   ```



#### 5.8 SQL 的 AND 和 OR 运算符

1.  `AND` 和 `OR` 可在 `WHERE` 子语句中把两个或多个条件结合起来

2.  `AND` 表示必须同时满足多个条件，相当于 `JavaScript` 中的 `&&` 运算符，例如 `if (a !== 10 && a !== 20)`

3.  `OR` 表示只要满足任意一个条件即可，相当于 `JavaScript` 中的 `||` 运算符，例如 `if(a !== 10 || a !== 20)`

4.  案例代码

   ```sql
   -- and
   -- 使用 AND 来显示所有 status 为 0，并且 id 小于 3 的用户
   
   select * from users where status=0 and id<3
   ```

   ```sql
   -- or
   -- 使用 OR 来显示所有 status 为 1，或者 username 为 zs 的用户
   
   select * from users where status=0 or username='zs'
   ```





#### 5.9 SQL 的 ORDER BY 子句

1.  语法

   - `ORDER BY` 语句用于根据指定的列对结果集进行排序
   - `ORDER BY` 语句默认按照升序对记录进行排序，`ASC` 关键字代表升序排序
   - 如果您希望按照降序对记录进行排序，可以使用 `DESC` 关键字

2.  `ORDER BY` 子句 - 升序排序

   对 `users` 表中的数据，按照 `status` 字段进行升序排序

   ```sql
   -- 下面这两条 SQL 语句是等价的，
   -- 因为 order by 默认进行升序排序
   -- 其中，ASC 关键字代表升序排序
   
   -- select * from users order by status
   select * from users order by status asc
   ```

   

3.  `ORDER BY` 子句 – 降序排序

   对 users 表中的数据，按照 id 字段进行降序排序

   ```sql
   -- desc 代表降序排序
   
   select * from users order by status desc
   ```





#### 5.10 ORDER BY 子句 – 多重排序

1.  对 `users` 表中的数据，先按照 `status` 字段进行降序排序，再按照 `username` 的字母顺序，进行升序排序

2.  案例代码

   ```sql
   select * from users order by status desc, username asc
   ```





#### 5.11 SQL 的 COUNT(*) 函数

1.  `COUNT(*)` 函数用于返回查询结果的总数据条数

   <img src="./images/Day_005/017-count.png" style="zoom:67%;" />

   
   
2.  案例语法

   ```sql
   select count(*) from users
   ```

   ```sql
   -- 查询 users 表中 status 为 0 的总数据条数
   
   select count(*) from users wheres status=0
   ```



#### 5.12 使用 AS 为列设置别名

如果希望给查询出来的列名称设置别名，可以使用 `AS` 关键字

```sql
-- 将列名从 count(*) 修改为 total

select count(*) as total from users where status=0
```

```sql
-- 将列名 username 改为 uname， password 改为 upwd

select username as uname, password as upwd from users
```



#### 5.13 保存和打开 sql 文件

1.  保存 `sql`文件

   <img src="./images/Day_005/018 - 保存sql文件.png" style="zoom: 67%;" />

   
   
2.  打开 `sql` 文件

   <img src="./images/Day_005/019- 打开sql文件.png" style="zoom: 67%;" />





### 6. MySQL 模块

#### 6.1 在项目中操作数据库的步骤

1. 安装操作 `MySQL` 数据库的第三方模块（`mysql`）

2.  通过 `mysql` 模块连接到 `MySQL` 数据库

3.  通过 `mysql` 模块执行 `SQL` 语句

   <img src="./images/Day_005/020 - 在项目中操作数据库的步骤.png" style="zoom:67%;" />



#### 6.2 安装与配置 mysql 模块

##### 6.2.1 安装 mysql 模块

`mysql` 模块是托管于 `npm` 上的第三方模块。它提供了在 `Node.js` 项目中连接和操作 `MySQL` 数据库的能力。想要在项目中使用它，需要先运行如下命令，将 `mysql` 安装为项目的依赖包

```js
cnpm i mysql -S
```



##### 6.2.2 配置 mysql 模块

在使用 `mysql` 模块操作 `MySQL` 数据库之前，必须**先对 `mysql `模块进行必要的配置**，主要的配置步骤如下

```js
// 1. 导入 mysql 模块
var mysql  = require('mysql')

// 2. 建立与 mysql 数据库的连接
var db = mysql.createPool({
  host: '127.0.0.1',  // 数据库的 ip 地址
  user: 'root', // 登录数据库的账号
  password: 'toor', // 登录数据库的密码
  database: 'my_db_01' // 指定要操作哪个数据库
})
```





#### 6.3 测试 mysql 模块能否正常工作

1.  调用 `db.query()` 函数，指定要执行的 `SQL` 语句，通过回调函数拿到执行的结果

2.  图示

   <img src="./images/Day_005/021-测试 mysql 模块能否正常工作.png" style="zoom:67%;" />

   
   
3.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 测试 mysql 模块能够正常运行
   db.query('select 1', (err, results) => {
     // mysql 模块如果错误，err 中会返回错误信息
     if (err) return console.log(err.message)
   
     // 能够成功的执行 SQL 语句
     console.log(results)
   })
   ```

   



#### 6.4 使用 select 语句查询数据

1.  需求：查询 users 表中所有的数据

2.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 查询 users 表中所有的用户数据
   db.query('select * from users', (err, results) => {
     // 查询失败
     if (err) return console.log(err.message)
   
     // 查询成功
     console.log(results)
   })
   ```

   



#### 6.5 使用 insert into 语句插入数据

1.  需求： 向 `users` 表中新增数据， 其中 `username` 为 `Spider-Man`，`password` 为 `pcc321`

2.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 声明要插入到 users 表中的数据对象
   const user = { username: 'tom', password: '123456' }
   // 4. 待执行的 sql 语句，其中英文的 ? 表示占位符
   const sqlstr = 'insert into users (username, password) values (?, ?)'
   
   // 5. 使用数组的形式，依次为 ？ 占位符指定具体的值
   db.query(sqlstr, [user.username, user.password] ,(err, results) => {
     // 插入失败
     if (err) return console.log(err.message)
   
     // 插入成功
     if (results.affectedRows === 1) { console.log('插入数据成功') }
   })
   ```

   



#### 6.6 id 的唯一性

1.  插入数据后，发现数据的 `id` 存在间隔
2.  之前存在，后来被删除了，那么在新增数据以后，即使这个 `id` 被删了，这个  `id` 也不会被占用



#### 6.7 插入数据的便捷方式

1.  向表中新增数据时，如果数据对象的每个属性和数据表的字段一一对应，则可以通过如下方式快速插入数据

2.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 声明要插入到 users 表中的数据对象
   const user = { username: 'jerry', password: '123456' }
   // 4. 待执行的 sql 语句，其中英文的 ? 表示占位符
   const sqlstr = 'insert into users set ?'
   
   // 5. 使用数组的形式，依次为 ？ 占位符指定具体的值
   db.query(sqlstr, user ,(err, results) => {
     // 插入失败
     if (err) return console.log(err.message)
   
     // 插入成功
     if (results.affectedRows === 1) { console.log('插入数据成功') }
   })
   ```

   

#### 6.8 使用 update 语句更新数据

1.  需求：更新表中的数据

2.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 声明要插入到 users 表中的数据对象
   const user = { id: 7, username: 'spike', password: '123000' }
   // 4. 待执行的 sql 语句
   const sqlstr = 'update users set username=?, password=? where id=?'
   
   // 5. 调用 db.query() 执行 SQL 语句的同时，使用数组依次为占位符指定具体的值
   db.query(sqlstr, [user.username, user.password, user.id] ,(err, results) => {
     // 更新失败
     if (err) return console.log(err.message)
   
     // 更新成功
     if (results.affectedRows === 1) { console.log('更新数据成功') }
   })
   ```



#### 6.9 更新数据的便捷方式

1.  更新表数据时，如果数据对象的每个属性和数据表的字段一一对应，则可以通过如下方式快速更新表数据

2.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 声明要插入到 users 表中的数据对象
   const user = { id: 7, username: 'spike', password: '123000' }
   // 4. 待执行的 sql 语句
   const sqlstr = 'update users set ? where id=?'
   
   // 5. 调用 db.query() 执行 SQL 语句的同时，使用数组依次为占位符指定具体的值
   db.query(sqlstr, [user, user.id] ,(err, results) => {
     // 更新失败
     if (err) return console.log(err.message)
   
     // 更新成功
     if (results.affectedRows === 1) { console.log('更新数据成功') }
   })
   ```

   



#### 6.10 使用 delete 语句删除数据

1.  在删除数据时，推荐根据 `id` 这样的唯一标识，来删除对应的数据

2.  **注意：如果 sql 语句中有多个占位符，则必须使用数据为每个占位符指定具体的值，如果 sql 语句中只有一个占位符，则可以省略**

3.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 要执行的 sql 语句
   const sqlstr = 'delete from users where id=?'
   
   // 2. 调用 db.query() 执行 SQL 语句的同时，为占位符指定具体的值
   // 注意：如果 sql 语句中有多个占位符，则必须使用数据为每个占位符指定具体的值
   // 如果 sql 语句中只有一个占位符，则可以省略
   db.query(sqlstr, 7 ,(err, results) => {
     // 删除失败
     if (err) return console.log(err.message)
   
     // 删除成功
     if (results.affectedRows === 1) { console.log('删除数据成功') }
   })
   ```

   





#### 6.11 标记删除

1.  使用 `DELETE` 语句，会把真正的把数据从表中删除掉

2. 为了保险起见，推荐使用**标记删除**的形式，来**模拟删除的动作**

   - 标记删除，就是在表中设置类似于 **status** 这样的**状态字段**，来**标记**当前这条数据是否被删除

3.  当用户执行了删除的动作时，我们并没有执行 `DELETE` 语句把数据删除掉，而是执行了 `UPDATE` 语句，将这条数据对应
   的 `status` 字段标记为删除即可

4.  案例代码

   ```js
   // 1. 导入 mysql 模块
   var mysql  = require('mysql')
   // 2. 建立与 mysql 数据库的连接
   var db = mysql.createPool({
     host: '127.0.0.1',  // 数据库的 ip 地址
     user: 'root', // 登录数据库的账号
     password: 'toor', // 登录数据库的密码
     database: 'my_db_01' // 指定要操作哪个数据库
   })
   
   // 3. 要执行的 sql 语句
   const sqlstr = 'update users set status=1 where id=?'
   
   // 2. 调用 db.query() 执行 SQL 语句的同时，为占位符指定具体的值
   db.query(sqlstr, 1 ,(err, results) => {
     // 删除失败
     if (err) return console.log(err.message)
   
     // 删除成功
     if (results.affectedRows === 1) { console.log('删除数据成功') }
   })
   ```

   ## Node 第 6 天

### 1.  学习目标

◆ 前后端的身份认证

◆ 能够了解 Session 的实现原理

◆ 能够了解 JWT 的实现原理

◆ 大事件项目初始化

◆ 大事件注册新用户功能



### 2.  web 开发模式

#### 2.1  主流的两种开发模式

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



#### 2.2 了解服务端渲染的概念以及优缺点

1.  服务端渲染的概念：服务器发送给客户端的 `HTML` 页面，是在**服务器通过字符串的拼接动态生成的**。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629213112295.png" style="zoom:67%;" />

   

2.  服务端渲染的优点

   - **前端耗时少**。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电

   - **有利于SEO**。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于SEO

     

3. 服务端渲染的缺点

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





#### 2.3 了解前后端分离的概念以及优缺点

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

   

2.  前后端分离的优点

   - **开发体验好**。前端专注于 UI 页面的开发，后端专注于api 的开发，且前端有更多的选择性

   - **用户体验好**。Ajax 技术的广泛应用，极大的提高了用户的体验，可以轻松实现页面的局部刷新

   - **减轻了服务器端的渲染压力**。因为页面最终是在每个用户的浏览器中生成的

     

3.  前后端分离的缺点

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



 

#### 2.4 如何选择 Web 开发模式

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

   - 比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的 `SEO`，则这时我们就需要使用服务器端渲染

   - 而类似后台管理项目，交互性比较强，不需要考虑 `SEO`，那么就可以使用前后端分离的开发模式

     

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





### 3.  身份认证

#### 3.1  什么是身份认证

1.  身份认证，又称 ”身份验证“，”鉴权“，是指通过一定的手段，完成对用户身份的确认，例如：
   - 各大网站的手机验证码登录
   - 邮箱密码登录
   - 二维码登录



#### 3.2 为什么需要身份认证

1.  身份认证的目的，是为了**确认当前所声称为某种身份的用户，确实是所声称的用户**

   - 例如：你去找快递员取快递，你要怎么证明这份快递是你的

     

2.  不同开发模式下的身份认证

   - 对于**服务端渲染**和**前后端分离**这两种开发模式来说，分别有着不同的身份认证方案
     - **服务端渲染** 推荐使用 **Session 认证机制**
     - **前后端分离**推荐使用 **JWT 认证机制**





### 4.  session

#### 4.1 了解 HTTP 协议的无状态性

1. HTTP 协议的无状态性，指的是客户端的**每次 HTTP 请求都是独立的**，连续多个请求之间没有直接的关系，**服务器不会主动保留每次 HTTP 请求的状态**

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629230959076.png" style="zoom:67%;" />



#### 4.2 如何突破 HTTP 无状态的限制

1. 对于超市来说，为了方便收银员在进行结算时给 `VIP` 用户打折，超市可以为每个 `VIP` 用户发放会员卡

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629231155134.png" style="zoom:67%;" />

   
   
2. 注意：现实生活中的会员卡身份认证方式，在 `Web` 开发中的专业术语叫做 `Cookie`





#### 4.3 什么是 Cookie

1.  `Cookie` 是**存储在用户浏览器中的一段不超过 4 KB 的字符串**。它由一个**名称**（Name）、一个**值**（Value）和其它几个用于控制 Cookie **有效期**、**安全性**、**使用范围**的**可选属性**组成
2.  不同域名下的 Cookie 各自独立，每当客户端发起请求时，会**自动**把**当前域名下**所有**未过期的 Cookie** 一同发送到服务器
3.  `Cookie` 的几大特性
   - 自动发送
   - 域名独立
   - 过期时限
   - 4KB 限制



#### 4.4 Cookie 在身份认证中的作用

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

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

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629231704593.png" style="zoom:67%;" />



#### 4.5  Cookie 不具有安全性

1. 由于 `Cookie` 是存储在浏览器中的，而且浏览器也提供了读写 `Cookie` 的 `API`，因此 `Cookie` 很容易被伪造，不具有安全性。因此不建议服务器将重要的隐私数据通过 `Cookie` 的形式发送给浏览器

   

2.  **注意：千万不要使用 Cookie 存储重要且隐私的数据！** 比如用户的身份信息、密码等

   

<img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629231902468.png" style="zoom:67%;" />





#### 4.6 提高身份认证的安全性

1.  为了防止客户伪造会员卡，收银员在拿到客户出示的会员卡之后，可以在收银机上进行刷卡认证。只有收银机确认存在的会员卡，才能被正常使用

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629232451304.png" style="zoom:67%;" />

   
   
2.  这种“会员卡 + 刷卡认证”的设计理念，就是 `Session` 认证机制的精髓



#### 4.7 Session 的工作原理

<img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629232640865.png" style="zoom:67%;" />





#### 4.8 安装并 express-session 中间件

1.  安装 `express-session`

   ```js
   cnpm i express-session --save
   ```

   

2.  配置 `express-session` 中间件

   - `express-session` 中间件安装成功后，需要通过 `app.use()` 来注册 `session` 中间件

     <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629233039265.png" style="zoom:67%;" />

     

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：请配置 Session 中间件
   const session = require('express-session')
   app.use(
     session({
       secret: 'itheima',
       resave: false,
       saveUninitialized: true,
     })
   )
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // 登录的 API 接口
   app.post('/api/login', (req, res) => {})
   
   // 获取用户姓名的接口
   app.get('/api/username', (req, res) => {})
   
   // 退出登录的接口
   app.post('/api/logout', (req, res) => {})
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```



#### 4.9  向 session 中存数据

1.  当 `express-session` 中间件配置成功后，即可通过 `req.session` 来访问和使用 `session` 对象，从而存储用户的关键信息

2.  示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629233838732.png" style="zoom: 80%;" />

   
   
3. 案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：请配置 Session 中间件
   const session = require('express-session')
   app.use(
     session({
       secret: 'itheima',
       resave: false,
       saveUninitialized: true,
     })
   )
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // 登录的 API 接口
   app.post('/api/login', (req, res) => {
     // 判断用户提交的登录信息是否正确
     if (req.body.username !== 'admin' || req.body.password !== '000000') {
       return res.send({ status: 1, msg: '登录失败' })
     }
   
     // TODO_02：请将登录成功后的用户信息，保存到 Session 中
     // 注意：只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
     req.session.user = req.body // 用户的信息
     req.session.islogin = true // 用户的登录状态
   
     res.send({ status: 0, msg: '登录成功' })
   })
   
   // 获取用户姓名的接口
   app.get('/api/username', (req, res) => { })
   
   // 退出登录的接口
   app.post('/api/logout', (req, res) => { })
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 4.10 从 session 中取数据

1.  可以直接从 `req.session` 对象上获取之前存储的数据

2.  示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629234211197.png" style="zoom:80%;" />

   
   
3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：请配置 Session 中间件
   const session = require('express-session')
   app.use(
     session({
       secret: 'itheima',
       resave: false,
       saveUninitialized: true,
     })
   )
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // 登录的 API 接口
   app.post('/api/login', (req, res) => {
     // 判断用户提交的登录信息是否正确
     if (req.body.username !== 'admin' || req.body.password !== '000000') {
       return res.send({ status: 1, msg: '登录失败' })
     }
   
     // TODO_02：请将登录成功后的用户信息，保存到 Session 中
     // 注意：只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
     req.session.user = req.body // 用户的信息
     req.session.islogin = true // 用户的登录状态
   
     res.send({ status: 0, msg: '登录成功' })
   })
   
   // 获取用户姓名的接口
   app.get('/api/username', (req, res) => {
     // TODO_03：请从 Session 中获取用户的名称，响应给客户端
     if (!req.session.islogin) {
       return res.send({ status: 1, msg: 'fail' })
     }
     res.send({
       status: 0,
       msg: 'success',
       username: req.session.user.username,
     })
   })
   
   // 退出登录的接口
   app.post('/api/logout', (req, res) => { })
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 4.11 清空 session

1.  调用 `req.session.destroy()` 函数，即可清空服务器保存的 `session` 信息

2.  实例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200629234457470.png" style="zoom:80%;" />

   
   
3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：请配置 Session 中间件
   const session = require('express-session')
   app.use(
     session({
       secret: 'itheima',
       resave: false,
       saveUninitialized: true,
     })
   )
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // 登录的 API 接口
   app.post('/api/login', (req, res) => {
     // 判断用户提交的登录信息是否正确
     if (req.body.username !== 'admin' || req.body.password !== '000000') {
       return res.send({ status: 1, msg: '登录失败' })
     }
   
     // TODO_02：请将登录成功后的用户信息，保存到 Session 中
     // 注意：只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
     req.session.user = req.body // 用户的信息
     req.session.islogin = true // 用户的登录状态
   
     res.send({ status: 0, msg: '登录成功' })
   })
   
   // 获取用户姓名的接口
   app.get('/api/username', (req, res) => {
     // TODO_03：请从 Session 中获取用户的名称，响应给客户端
     if (!req.session.islogin) {
       return res.send({ status: 1, msg: 'fail' })
     }
     res.send({
       status: 0,
       msg: 'success',
       username: req.session.user.username,
     })
   })
   
   // 退出登录的接口
   app.post('/api/logout', (req, res) => {
     // TODO_04：清空 Session 信息
     req.session.destroy()
     res.send({
       status: 0,
       msg: '退出登录成功',
     })
   })
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 4.12 演示 session 案例效果

```html
<!-- index.html 页面 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台主页</title>
  <script src="./jquery.js"></script>
</head>

<body>
  <h1>首页</h1>

  <button id="btnLogin">退出登录</button>

  <script>
    $(function () {
      // 初始化方法
      function init() {
        $.ajax({
          url: '/api/username',
          type: 'get',
          success: (data) => {
            // console.log(data)
            if (!data.status) {
              alert('欢迎登录：' + data.username)
            } else {
              alert('您尚未登录，请登录后在执行此操作！')
              window.location.href = '/login.html'
            }
          }
        })
      }
      init()

      // 退出登录
      $('#btnLogin').click(() => {
        $.ajax({
          url: '/api/logout',
          type: 'post',
          success: (data) => {
            if (!data.status) {
              alert(data.msg)
              window.location.href = '/login.html'
            }
          }
        })
      })

    })
  </script>
</body>

</html>
```

```html
<!-- login.html 页面 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <script src="./jquery.js"></script>
</head>

<body>
  <!-- 登录表单 -->
  <form id="form1">
    <div>账号：<input type="text" name="username" autocomplete="off"> </div>
    <div>密码：<input type="password" name="password" autocomplete="off"></div>
    <button>登录</button>
  </form>

  <script>
    $(function () {
      $('button').click((e) => {
        // 阻止默认行为
        e.preventDefault()
        // 获取需要传递的参数
        const params = $('#form1').serialize()
        // 发送 ajax 
        $.ajax({
          url: '/api/login',
          type: 'post',
          data: params,
          success: (data) => {
            window.location.href = '/index.html'
          }
        })
      })
    })
  </script>
</body>

</html>
```



### 5.  jwt

#### 5.1  了解 Session 认证的局限性

1.  `Session` 认证机制需要配合 `Cookie` 才能实现。由于 `Cookie` 默认不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候，需要做很多额外的配置，才能实现跨域 `Session` 认证
2.  注意：
   - 当前端请求后端接口**不存在跨域问题**的时候，**推荐使用 Session** 身份认证机制
   - 前端**需要跨域请求后端接口**的时候，不推荐使用 Session 身份认证机制，**推荐使用 JWT 认证机制**

3.  什么是 JWT
   - `JWT`（英文全称：`JSON Web Token`）是目前最流行的跨域认证解决方案





#### 5.2  JWT 的工作原理

1.  用户的信息通过 `Token` 字符串的形式，保存在客户端浏览器中
2.  服务器通过还原 `Token` 字符串的形式来认证用户的身份

<img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630002325085.png" style="zoom:80%;" />





#### 5.3  JWT 的组成部分

1.  `JWT` 通常由三部分组成，分别是 `Header`（头部）、`Payload`（有效荷载）、`Signature`（签名）

2.  三者之间使用英文的“.”分隔，格式如下

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630002541971.png" style="zoom:67%;" />

   

3.  下面是 `JWT` 字符串的示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630002627316.png" style="zoom: 67%;" />



4.  `JWT` 的三个组成部分，从前到后分别是 `Header`、`Payload`、`Signature`

   - `Payload` 部分才是真正的用户信息，它是用户信息经过加密之后生成的字符串

   - `Header` 和 `Signature` 是安全性相关的部分，只是为了保证 `Token` 的安全性

     <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630002910953.png" style="zoom:80%;" />





#### 5.4  JWT 的使用方式

1.  客户端收到服务器返回的 `JWT` 之后，通常会将它储存在 `localStorage` 或 `sessionStorage` 中

2.  此后，客户端每次与服务器通信，都要带上这个 `JWT` 的字符串，从而进行身份认证。推荐的做法是把` JWT` 放在 `HTTP` 请求头的 `Authorization` 字段中

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630003131127.png" style="zoom:67%;" />





#### 5.5 安装并导入 JWT 相关的包

##### 5.5.1 安装 JWT 相关的包

1.  运行如下命令，安装如下两个 JWT 相关的包

   ```js
   cnpm i jsonwebtoken express-jwt -S
   ```

   

2.  其中

   - `jsonwebtoken` 用于生成 `JWT` 字符串
   - `express-jwt` 用于将 `JWT` 字符串解析还原成 `JSON` 对象



##### 5.5.2  导入 JWT 相关的包

1. 使用 `require()` 函数，分别导入 `JWT` 相关的两个包

2. 实例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630003557781.png" style="zoom:67%;" />

   
   
3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 5.6  定义 secret 密钥

1.  为了保证 `JWT`字符串的安全性，防止 JWT 字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的 `secret` 密钥

   - 当生成 `JWT` 字符串的时候，需要使用 `secret` 密钥对用户信息进行加密，最终得到加密好的 JWT 字符串

   - 当把 `JWT` 字符串解析还原成 `JSON` 对象的时候，需要使用 `secret` 密钥进行解密

     

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630004143499.png" style="zoom:67%;" />

2.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
   const secretKey = 'itheima No1 ^_^'
   
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 5.7  在登录成功后生成 JWT 字符串

1.  调用 `jsonwebtoken` 包提供的 `sign()` 方法，将用户的信息加密成 `JWT` 字符串，响应给客户端

2.  示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630004647477.png" style="zoom:67%;" />

   

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
   const secretKey = 'itheima No1 ^_^'
   
   // 登录接口
   app.post('/api/login', function (req, res) {
     // 将 req.body 请求体中的数据，转存为 userinfo 常量
     const userinfo = req.body
     // 登录失败
     if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
       return res.send({
         status: 400,
         message: '登录失败！',
       })
     }
     // 登录成功
     // TODO_03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
     // 参数1：用户的信息对象
     // 参数2：加密的秘钥
     // 参数3：配置对象，可以配置当前 token 的有效期
     // 记住：千万不要把密码加密到 token 字符中
     const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
     res.send({
       status: 200,
       message: '登录成功！',
       token: tokenStr, // 要发送给客户端的 token 字符串
     })
   })
   
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 5.8  将 JWT 字符串还原为 JSON 对象

1.  客户端每次在访问那些有权限接口的时候，都需要主动通过请求头中的 `Authorization` 字段，将 `Token` 字符串发送到服务器进行身份认证

2.  此时，服务器可以通过 `express-jwt` 这个中间件，自动将客户端发送过来的  `Token` 解析还原成 `JSON` 对象

3.  示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630004904475.png" style="zoom:67%;" />

   

4.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
   const secretKey = 'itheima No1 ^_^'
   
   // TODO_04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
   // 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
   app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
   
   // 登录接口
   app.post('/api/login', function (req, res) {
     // 将 req.body 请求体中的数据，转存为 userinfo 常量
     const userinfo = req.body
     // 登录失败
     if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
       return res.send({
         status: 400,
         message: '登录失败！',
       })
     }
     // 登录成功
     // TODO_03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
     // 参数1：用户的信息对象
     // 参数2：加密的秘钥
     // 参数3：配置对象，可以配置当前 token 的有效期
     // 记住：千万不要把密码加密到 token 字符中
     const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
     res.send({
       status: 200,
       message: '登录成功！',
       token: tokenStr, // 要发送给客户端的 token 字符串
     })
   })
   
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 5.9  使用 req.user 获取用户信息

1.  当 `express-jwt` 这个中间件配置成功之后，即可在那些有权限的接口中，使用 `req.user` 对象，来访问从 `JWT` 字符串中解析出来的用户信息了

2.  实例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630005137252.png" style="zoom:67%;" />

3.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
   const secretKey = 'itheima No1 ^_^'
   
   // TODO_04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
   // 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
   app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
   
   // 登录接口
   app.post('/api/login', function (req, res) {
     // 将 req.body 请求体中的数据，转存为 userinfo 常量
     const userinfo = req.body
     // 登录失败
     if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
       return res.send({
         status: 400,
         message: '登录失败！',
       })
     }
     // 登录成功
     // TODO_03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
     // 参数1：用户的信息对象
     // 参数2：加密的秘钥
     // 参数3：配置对象，可以配置当前 token 的有效期
     // 记住：千万不要把密码加密到 token 字符中
     const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
     res.send({
       status: 200,
       message: '登录成功！',
       token: tokenStr, // 要发送给客户端的 token 字符串
     })
   })
   
   // 这是一个有权限的 API 接口
   app.get('/admin/getinfo', function (req, res) {
     // TODO_05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
     console.log(req.user)
     res.send({
       status: 200,
       message: '获取用户信息成功！',
       data: req.user, // 要发送给客户端的用户信息
     })
   })
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```





#### 5.10 捕获解析 JWT 失败后产生的错误

1.  当使用 `express-jwt` 解析 `Token` 字符串时，如果客户端发送过来的 `Token` 字符串过期或不合法，会产生一个解析失败的错误，影响项目的正常运行

2.  可以通过 `Express` 的错误中间件，捕获这个错误并进行相关的处理

3.  示例

   <img src="C:\Users\WebHack\AppData\Roaming\Typora\typora-user-images\image-20200630010304465.png" style="zoom: 80%;" />

   

4.  案例代码

   ```js
   // 导入 express 模块
   const express = require('express')
   // 创建 express 的服务器实例
   const app = express()
   
   // TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
   const jwt = require('jsonwebtoken')
   const expressJWT = require('express-jwt')
   
   // 允许跨域资源共享
   const cors = require('cors')
   app.use(cors())
   
   // 托管静态页面
   app.use(express.static('./pages'))
   // 解析 POST 提交过来的表单数据
   app.use(express.urlencoded({ extended: false }))
   
   // TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
   const secretKey = 'itheima No1 ^_^'
   
   // TODO_04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
   // 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
   app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
   
   // 登录接口
   app.post('/api/login', function (req, res) {
     // 将 req.body 请求体中的数据，转存为 userinfo 常量
     const userinfo = req.body
     // 登录失败
     if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
       return res.send({
         status: 400,
         message: '登录失败！',
       })
     }
     // 登录成功
     // TODO_03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
     // 参数1：用户的信息对象
     // 参数2：加密的秘钥
     // 参数3：配置对象，可以配置当前 token 的有效期
     // 记住：千万不要把密码加密到 token 字符中
     const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
     res.send({
       status: 200,
       message: '登录成功！',
       token: tokenStr, // 要发送给客户端的 token 字符串
     })
   })
   
   // 这是一个有权限的 API 接口
   app.get('/admin/getinfo', function (req, res) {
     // TODO_05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
     console.log(req.user)
     res.send({
       status: 200,
       message: '获取用户信息成功！',
       data: req.user, // 要发送给客户端的用户信息
     })
   })
   
   // TODO_06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
   app.use((err, req, res, next) => {
     // 这次错误是由 token 解析失败导致的
     if (err.name === 'UnauthorizedError') {
       return res.send({
         status: 401,
         message: '无效的token',
       })
     }
     res.send({
       status: 500,
       message: '未知的错误',
     })
   })
   
   // 调用 app.listen 方法，指定端口号并启动web服务器
   app.listen(80, function () {
     console.log('Express server running at http://127.0.0.1:80')
   })
   
   ```

   

### 6. 项目初始化

#### 6.1  项目概述

1.  [在线笔记与文档](http://www.escook.cn:8088/#/)
2. [需要完成的大事件功能](https://www.showdoc.cc/escook?page_id=3707158761215217)
3. 本地笔记与文档，在 `ppt` 文件夹中，`ev_api_server.pdf`



#### 6.2 创建项目

1.  新建  `api_server` 文件夹作为项目根目录，并在项目根目录中运行如下的命令，初始化包管理配置文件

   ```js
   npm init -y
   ```

   

2.  运行如下的命令，安装特定版本的  `express`

   ```js
   npm i express@4.17.1
   ```

   

3.  在项目根目录中新建  `app.js` 作为整个项目的入口文件，并初始化如下的代码

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 在此处进行功能开发
   
   // 指定端口并启动 web 服务器
   app.listen(8000, () => {
     console.log('api server running at http://127.0.0.1:8000')
   })
   
   ```



#### 6.3 配置 cors 跨域和解析表单数据的中间件

##### 6.3.1 配置 cors 跨域

1.  运行如下的命令，安装  `cors` 中间件

   ```js
   cnpm i cors@2.8.5 --save
   ```

   

2.  在  `app.js` 中导入并配置  `cors` 中间件

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 导入 cors 中间件
   const cors = require('cors')
   // 将 cors 注册为全局中间件
   app.use(cors)
   
   // 指定端口并启动 web 服务器
   app.listen(8000, () => {
     console.log('api server running at http://127.0.0.1:8000')
   })
   
   ```

   

##### 6.3.2 配置解析表单数据的中间件

1.  配置解析 `application/x-www-form-urlencoded` 格式的表单数据的中间件

   ```js
   app.use(express.urlencoded({ extended: false }))
   ```

2.  完整代码

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 导入 cors 中间件
   const cors = require('cors')
   // 将 cors 注册为全局中间件
   app.use(cors)
   
   // 配置解析 application/x-www-form-urlencoded 格式的表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 指定端口并启动 web 服务器
   app.listen(8000, () => {
     console.log('api server running at http://127.0.0.1:8000')
   })
   
   ```



#### 6.4 初始化路由相关的文件夹

1.  在项目根目录中，新建  `router` 文件夹，用来存放所有的 路由 模块

   - 路由模块中，只存放客户端的请求与处理函数之间的映射关系

     

2.  在项目根目录中，新建  `router_handler` 文件夹，用来存放所有的  路由处理函数模块

   - 路由处理函数模块中，专门负责存放每个路由对应的处理函数



#### 6.5 初始化用户路由模块

1.  在 `router` 文件夹中，新建 `user.js` 文件，作为用户的路由模块

   ```js
   // router --> user.js
   
   const express = require('express')
   // 创建路由对象
   const router = express.Router()
   
   // 注册新用户
   router.post('/reguser', (req, res) => {
     res.send('reguser Ok')
   })
   
   // 登录
   router.post('/login', (req, res) => {
     res.send('Login Ok')
   })
   
   // 将路由对象共享出去
   module.exports = router
   
   ```

   

2.  在  `app.js` 中，导入并使用  用户路由模块

   ```js
   // 导入 express 模块
   const express = require('express')
   
   // 创建 express 的服务器实例
   const app = express()
   
   // 导入 cors 中间件
   const cors = require('cors')
   // 将 cors 注册为全局中间件
   app.use(cors)
   
   // 配置解析 application/x-www-form-urlencoded 格式的表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 导入并注册用户路由模块
   const userRouter = require('./router/user')
   app.use('/api', userRouter)
   
   // 指定端口并启动 web 服务器
   app.listen(8000, () => {
     console.log('api server running at http://127.0.0.1:8000')
   })
   
   ```

   

#### 6.6  抽离用户路由模块中的处理函数

>  目的：为了保证  **路由模块** 的纯粹性，所有的  **路由处理函数** ，必须抽离到对应的  **路由处理函数模块** 中



1.  在  `/router_handler/user.js` 中，使用  `exports` 对象，分别向外共享如下两个路由处理函数

   ```js
   /**
    * 定义和用户相关的路由处理函数，功 /router/user.js 模块尽心调用
    */
   
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
     res.send('reguser Ok')
   }
   
   // 登录的处理函数
   exports.login = (req, res) => {
     res.send('login Ok')
   }
   
   ```

   

2.  将  `/router/user.js` 中的代码修改为如下结构

   ```js
   const express = require('express')
   // 创建路由对象
   const router = express.Router()
   
   // 导入用户路由处理函数模块
   const userHandle = require('../router_handler/user')
   
   // 注册新用户
   router.post('/reguser', userHandle.regUser)
   // 登录功能
   router.post('/login', userHandle.login)
   
   // 将路由对象共享出去
   module.exports = router
   
   ```





### 7.  注册新用户

#### 7.1 创建用户表

1.  在  `my_db_01` 数据库中，新建  `ev_users` 表

   <img src="./images/Day_006/023 - 创建用户表.png" style="zoom:80%;" />

   
   

#### 7.2 安装配置 mysql 模块

> 在 API 接口项目中，需要安装并配置  mysql 这个第三方模块，来连接和操作 MySQL 数据库



1.  安装 `mysql` 模块

   ```js
   npm i mysql@2.18.1
   ```

   

2.  在项目根目录中新建  `/db/index.js` 文件，在此自定义模块中创建数据库的连接对象

   ```js
   // 导入 mysql 模块
   const mysql = require('mysql')
   
   // 创建数据库连接对象
   const db = mysql.createPool({
     host: '127.0.0.1',
     user: 'root',
     password: 'admin123',
     database: 'my_db_01'
   })
   
   // 向外共享 db 数据库连接对象
   module.exports = db
   
   ```

   

#### 7.3 检测表单数据是否合法

##### 7.3.1 注册功能实现步骤

1.  检测表单数据是否合法
2.  检测用户名是否被占用
3.  对密码进行加密处理
4.  插入新用户



##### 7.3.2 检测表单数据是否合法

1.  判断用户名和密码是否为空

   ```js
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
     // 获取到客户端提高到服务器的用户信息
     const userinfo = req.body
   
     // 对表单中的数据进行合法性校验
     if (!userinfo.username || !userinfo.password) {
       return res.send({ status: 1, message: '用户名和密码不正确' })
     }
     
     res.send('reguser Ok')
   }
   ```

   

#### 7.4 检测用户名是否合法

1.  导入数据库操作模块

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   ```

   

2.  定义 SQL 语句

   ```js
     // 定义 sql 语句
     const sql = `select * from ev_users where username=?`
   ```

   

3.  执行 SQL 语句并根据结果判断用户名是否被占用

   ```js
   db.query(sql, userinfo.username, (err, results) => {
       // 执行 sql 语句失败
       if (err) {
         return res.send({ status: 1, message: err.message })
       }
   
       // 用户名被占用
       if (results.length > 0) {
         return res.send({ status: 1, message: '用户名被占用，请更换其他用户名' })
       }
   
       // 用户名可用，继续后续流程
   })
   ```

   

4.  完整代码

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
     // 获取到客户端提高到服务器的用户信息
     const userinfo = req.body
   
     // 对表单中的数据进行合法性校验
     if (!userinfo.username || !userinfo.password) {
       return res.send({ status: 1, message: '用户名和密码不正确' })
     }
   
     // 定义 sql 语句
     const sql = `select * from ev_users where username=?`
     // 执行 sql 语句并根据结果判断用户名是否被占用
     db.query(sql, userinfo.username, (err, results) => {
       // 执行 sql 语句失败
       if (err) {
         return res.send({ status: 1, message: err.message })
       }
   
       // 用户名被占用
       if (results.length > 0) {
         return res.send({ status: 1, message: '用户名被占用，请更换其他用户名' })
       }
   
       // 用户名可用，继续后续流程
     })
   
     res.send('reguser Ok')
   }
   ```

   

#### 7.5 对密码进行加密处理

##### 7.5.1 什么需要对密码进行加密以及 bcryptjs 的优点

1.  为了保证密码的安全性，不建议在数据库以  **明文** 的形式保存用户密码，推荐对密码进行 **加密存储**
2.  在当前项目中，使用  `bcryptjs` 对用户密码进行加密，优点：
   - 加密之后的密码，无法被逆向破解
   - 同一明文密码多次加密，得到的加密结果各不相同，保证了安全性



##### 7.5.2 使用 bcryptjs 对密码进行加密

1.  安装指定版本的  `bcryptjs `

   ```js
   cnpm i bcryptjs@2.4.3 -S
   ```

   

2.  在  `/router_handler/user.js` 中，导入  `bcryptjs`

   ```js
   const bcrypt = require('bcryptjs')
   ```

   

3.  在注册用户的处理函数中，确认用户名可用之后，调用 `bcrypt.hashSync` (明文密码, 随机盐的长度) 方法，对用户的密码进行加密处理

   ```js
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
     
      // coding……
       
     db.query(sqlStr, userinfo.username, (err, results) => {
       // 执行 sql 语句失败
       if (err) {
         return res.send({ status: 1, message: err.message })
       }
   
       // 用户名被占用
       if (results.length > 0) {
         return res.send({ status: 1, message: '用户名被占用，请更换其他用户名' })
       }
   
       // 用户名可用，继续后续流程
       console.log(userinfo)
       // 对用户的密码，进行 bcrype 加密，返回值是加密以后的密码字符串
       userinfo.password = bcrypt.hashSync(userinfo.password, 10)
       console.log(userinfo)
       res.send('reguser Ok')
     })
   }
   ```

   

#### 7.6 插入新用户

1.  定义插入用户的 `SQL` 语句

   ```js
   const sql = 'insert into ev_users set ?'
   ```

   

2.  调用 `db.query()` 执行 `SQL` 语句，插入新用户

   ```js
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
      
     // coding…… 
       
     // 执行 sql 语句并根据结果判断用户名是否被占用
     db.query(sqlStr, userinfo.username, (err, results) => {
       // 执行 sql 语句失败
       if (err) {
         return res.send({ status: 1, message: err.message })
       }
   
       // 用户名被占用
       if (results.length > 0) {
         return res.send({ status: 1, message: '用户名被占用，请更换其他用户名' })
       }
   
       // 用户名可用，继续后续流程
       // 对用户的密码，进行 bcrype 加密，返回值是加密以后的密码字符串
       userinfo.password = bcrypt.hashSync(userinfo.password, 10)
   
       // 定义插入用户的 SQL 语句 
       const sql = 'insert into ev_users set ?'
   
       // 调用 db.query() 执行 SQL 语句
       db.query(sql, { username: userinfo.username, password: userinfo.password }, (err, results) => {
         // 判断 sql 语句是否执行成功
         if (err) return res.send({ status: 1, message: err.message })
         // 判断影响行数是否为 1
         if (results.affectedRows !== 1) return res.send({ status: 1, message: '注册用户失败，请稍后再试！' })
         // 注册成功
         res.send({ status: 0, message: '注册成功' })
       })
     })
   }
   ```

   



### 8.  优化

#### 8.1  优化 res.send() 代码

> 在处理函数中，需要多次调用 **res.send()** 向客户端响应  **处理失败** 的结果，为了简化代码，可以手动封装一个 res.cc() 函数

1.   在 `app.js`  中，所有路由之前，声明一个全局中间件，为 `res` 对象挂载一个 `res.cc()` 函数

   ```js
   // coding……
   
   // 配置解析 application/x-www-form-urlencoded 格式的表单数据的中间件
   app.use(express.urlencoded({ extended: false }))
   
   // 在所有路由之前，封装 res.cc 函数
   app.use((req, res, next) => {
     // status 的默认值为 1，表示失败的情况
     // err 的值，可能是一个错误对象，也可能是一个错误的描述字符串
     res.cc = (err, status = 1) => {
       res.send({
         status,
         message: err instanceof Error ? err.message : err
       })
     }
   
     next()
   })
   
   // 导入并注册用户路由模块
   const userRouter = require('./router/user')
   app.use('/api', userRouter)
   
   // coding……
   ```

   

2.  将 `router_handle/user.js` 中的文件修改成 `res.cc` 的方式

   ```js
   /**
    * 定义和用户相关的路由处理函数，功 /router/user.js 模块尽心调用
    */
   
   // 导入数据库操作模块
   const db = require('../db/index')
   const bcrypt = require('bcryptjs')
   
   // 注册用户的处理函数
   exports.regUser = (req, res) => {
     // 获取到客户端提高到服务器的用户信息
     const userinfo = req.body
     console.log(userinfo.username)
   
     // 对表单中的数据进行合法性校验
     if (!userinfo.username || !userinfo.password) {
       return res.cc('用户名和密码不正确')
     }
   
     // 定义 sql 语句
     const sqlStr = 'select * from ev_users where username=?'
     // 执行 sql 语句并根据结果判断用户名是否被占用
     db.query(sqlStr, userinfo.username, (err, results) => {
       // 执行 sql 语句失败
       if (err) {
         return res.cc(err)
       }
   
       // 用户名被占用
       if (results.length > 0) {
         return res.cc('用户名被占用，请更换其他用户名')
       }
   
       // 用户名可用，继续后续流程
       // 对用户的密码，进行 bcrype 加密，返回值是加密以后的密码字符串
       userinfo.password = bcrypt.hashSync(userinfo.password, 10)
   
       // 定义插入用户的 SQL 语句 
       const sql = 'insert into ev_users set ?'
   
       // 调用 db.query() 执行 SQL 语句
       db.query(sql, { username: userinfo.username, password: userinfo.password }, (err, results) => {
         // 判断 sql 语句是否执行成功
         if (err) return res.cc(err)
         // 判断影响行数是否为 1
         if (results.affectedRows !== 1) return res.cc('注册用户失败，请稍后再试！')
         // 注册成功
         res.send({ status: 0, message: '注册成功' })
       })
     })
   }
   
   // 登录的处理函数
   exports.login = (req, res) => {
     res.send('login Ok')
   }
   
   ```

   



#### 8.2  了解数据验证的原则

> 表单验证的原则：前端验证为辅，后端验证为主，后端永远不要相信前端提交过来的任何内容



1.  在实际开发中，前后端都需要对表单的数据进行合法性的验证，而且，**后端做为数据合法性校验的最后一个关口**，在拦截非法数据方面，起到了至关重要的作用
2.  单纯的使用  `if...else...` 的形式对数据合法性进行验证，效率低下、出错率高、维护性差。因此，
   推荐使用第三方数据验证模块，来降低出错率、提高验证的效率与可维护性，让后端程序员把更多的精
   力放在核心业务逻辑的处理上





#### 8.3 介绍如何定义验证规则对象

1.  安装 `@hapi/joi` 包，为表单中携带的每个数据项，定义验证规则

   ```js
   cnpm install @hapi/joi@17.1.0 -S
   ```

   

2.  安装 `@escook/express-joi` 中间件，来实现自动对表单数据进行验证的功能

   ```js
   cnpm i @escook/express-joi -S
   ```

   

3.  相关验证规则的含义

   ```js
   /**
   * string() 值必须是字符串
   * alphanum() 值只能是包含 a-zA-Z0-9 的字符串
   * min(length) 最小长度
   * max(length) 最大长度
   * required() 值是必填项，不能为 undefined
   * pattern(正则表达式) 值必须符合正则表达式的规则
   */
   
   var getUsersSchema = {
     limit: expressJoi.Joi.types.Number().integer().min(1).max(25),
     offset: expressJoi.Joi.types.Number().integer().min(0).max(25),
     name: expressJoi.Joi.types.String().alphanum().min(2).max(25)
   }
   ```

   



#### 8.4 了解如何使用数验证的中间件

1.  在路由中使用局部中间件
2.  在局部中间件中通过 `expressJoi(userSchema)`  的方式调用中间件进行参数验证
3.  验证通过以后，将结果转交给后面的回调函数
4. 验证失败以后，就会报一个全局的错误，只需要在错误级别中间件捕获错误，然后做下一步处理





#### 8.5 定义验证规则模块

1.  新建  `/schema/user.js` 用户信息验证规则模块，并初始化代码

   ```js
   const joi = require('@hapi/joi')
   
   /**
   * string() 值必须是字符串
   * alphanum() 值只能是包含 a-zA-Z0-9 的字符串
   * min(length) 最小长度
   * max(length) 最大长度
   * required() 值是必填项，不能为 undefined
   * pattern(正则表达式) 值必须符合正则表达式的规则
   */
   
   // 验证用户名、密码的规则
   const username = joi.string().alphanum().min(10).max(10).required()
   const passoword = joi.string().pattern(/^[\S]{6, 12}$/).required()
   
   // 登录和注册表单的验证规则对象
   exports.reg_login_schema = {
     // 表示需要对 req.body 中的数据进行验证
     body: {
       username,
       passoword
     }
   }
   
   ```

   



#### 8.6 实现对表单数据验证方式的改造

1.  将原始的 `if` 验证方式注释

   ```js
   // 对表单中的数据进行合法性校验
   // if (!userinfo.username || !userinfo.password) {
   //   // return res.send({ status: 1, message: '用户名和密码不正确' })
   //   return res.cc('用户名和密码不正确')
   // }
   
   ```

   

2.  在 `router.js` 中导入验证数据的中间件以及验证规则对象，在需要验证的路由中使用局部中间件添加校验规则

   ```js
   const express = require('express')
   // 创建路由对象
   const router = express.Router()
   
   // 导入用户路由处理函数模块
   const userHandle = require('../router_handler/user')
   
   // 1. 导入验证表单数据的中间件
   const expressJoi = require('@escook/express-joi')
   // 2. 导入需要的验证规则对象
   const { reg_login_schema } = require('../schema/user')
   
   // 注册新用户
   router.post('/reguser', expressJoi(reg_login_schema), userHandle.regUser)
   // 登录功能
   router.post('/login', userHandle.login)
   
   // 将路由对象共享出去
   module.exports = router
   
   ```

   

3.  验证可能会失败，所以在全局进行捕获

   ```js
   // 错误中间件
   app.use((err, req, res, next) => {
     // 数据验证失败
     if (err instanceof joi.ValidationError) return res.cc(err)
     // 未知错误
     res.cc(err)
   })
   
   ```

   
## Node 第 7 天

### 1.  学习目标

◆ 完成登录功能的开发

◆ 能够获取用户的信息并重置密码和头像



### 2. 登录功能

#### 2.1 实现步骤

1.  检测表单数据是否合法
2.  根据用户名查询用户的数据
3.  判断用户输入的密码是否正确
4.  生成 `JWT` 的 `Token` 字符串



#### 2.2 检测表单数据是否合法

1.  将  `/router/user.js` 中  登录 的路由代码修改进行修改

   ```js
   // 注册新用户
   router.post('/reguser', expressJoi(reg_login_schema), userHandle.regUser)
   
   // 登录功能
   router.post('/login', expressJoi(reg_login_schema), userHandle.login)
   ```

   

#### 2.3 根据用户名查询用户的数据

1.  接收表单的数据

   ```js
   // 接收表单传递过来的数据
   const userInfo = req.body
   ```

   

2.  定义 `sql` 语句

   ```js
   // 定义 sql 语句
   const sql = `select * from ev_users where username=?`
   ```

   

3.  执行 `sql` 语句，查询用户的数据

   ```js
   // 执行 sql 语句，根据用户名查询用户的信息
   db.query(sql, userInfo.username, (err, results) => {
     // 指定 sql 失败
     if (err) return res.cc(err)
     // 执行 sql 语句成功，但是获取到的数据条数不等于 1
     if (results.length !== 1) return res.cc('登录失败')
     // 判断用户名和密码是否正确
     res.send('login Ok')
   })
   ```



4.  完整代码

   ```js
   // 登录的处理函数
   exports.login = (req, res) => {
     // 接收表单传递过来的数据
     const userInfo = req.body
     // 定义 sql 语句
     const sql = `select * from ev_users where username=?`
     // 执行 sql 语句，根据用户名查询用户的信息
     db.query(sql, userInfo.username, (err, results) => {
       // 指定 sql 失败
       if (err) return res.cc(err)
       // 执行 sql 语句成功，但是获取到的数据条数不等于 1
       if (results.length !== 1) return res.cc('登录失败')
       // 判断用户名和密码是否正确
       res.send('login Ok')
     })
   }
   
   ```





#### 2.4 判断用户输入的密码是否正确

> 核心实现思路：调用  `bcrypt.compareSync(用户提交的密码, 数据库中的密码)` 方法比较密码是否一致，
>
> 返回值是布尔值（true 一致、false 不一致）



1.  实现代码

   ```js
   // 判断用户名和密码是否正确
   // 将用户输入的密码和数据库中存储的密码进行比较
   const compareResult = bcrypt.compareSync(userInfo.password, results[0].password)
   // 根据对比后的结果进行判断
   if (!compareResult) return res.cc('登录失败！')
   ```



2. 完整代码

   ```js
   // 登录的处理函数
   exports.login = (req, res) => {
     // 接收表单传递过来的数据
     const userInfo = req.body
     // 定义 sql 语句
     const sql = `select * from ev_users where username=?`
     // 执行 sql 语句，根据用户名查询用户的信息
     db.query(sql, userInfo.username, (err, results) => {
       // 指定 sql 失败
       if (err) return res.cc(err)
       // 执行 sql 语句成功，但是获取到的数据条数不等于 1
       if (results.length !== 1) return res.cc('登录失败')
   
       // 判断用户名和密码是否正确
       // 将用户输入的密码和数据库中存储的密码进行比较
       const compareResult = bcrypt.compareSync(userInfo.password, results[0].password)
       // 根据对比后的结果进行判断
       if (!compareResult) return res.cc('登录失败！')
       res.send('login Ok')
       
     })
   }
   ```

   



#### 2.5 分析生成 `Token` 字符串的步骤

1.  通过 `ES6` 的高级语法，快速剔除  `密码` 和  `头像` 的值
2.  运行如下的命令，安装生成 `Token` 字符串的包
3.  在  `/router_handler/user.js` 模块的头部区域，导入  `jsonwebtoken` 包
4.  创建  `config.js` 文件，并向外共享 加密 和 还原 `Token` 的  `jwtSecretKey` 字符串
5.  将用户信息对象加密成 `Token` 字符串
6.  将生成的 `Token` 字符串响应给客户端





#### 2.6 生成 `JWT` 的 `Token` 步骤

1.  通过 `ES6` 的高级语法，快速剔除  `密码` 和  `头像` 的值

   ```js
   // 登录成功以后，给用户返回 token 值
   // 剔除 user 返回的 头像和密码 信息，
   const user = { ...results[0], password: '', user_pic: '' }
   ```

   

2.  运行如下的命令，安装生成 `Token` 字符串的包

   ```js
   cnpm i jsonwebtoken@8.5.1 -S
   ```

   

3.  在  `/router_handler/user.js` 模块的头部区域，导入  `jsonwebtoken` 包

   ```js
   // 生成 Token 字符串
   const jwt = require('jsonwebtoken')
   ```

   

4.  创建  `config.js` 文件，并向外共享 加密 和 还原 `Token` 的  `jwtSecretKey` 字符串

   ```js
   // 全局配置文件
   
   module.exports = {
     // 加密和解密的 Token 密钥
     jwtSecretKey: 'itheima No1. ^_^',
     expiresIn: '10h' // 设置 token 有效期为 10 小时
   }
   
   ```

   

5.  将用户信息对象加密成 `Token` 字符串

   ```js
   // 导入配置文件
   const config = require('../config')
   ```

   ```js
   // 生成 Token 字符串内容
   const tokenStr = jwt.sign(user, config.jwtSecretKey, {expiresIn: config.expiresIn})
   
   ```

   

6.  将生成的 `Token` 字符串响应给客户端

   ```js
   // 将生成的 Token 字符串响应给客户端
   res.send({
     status: 0,
     message: '登录成功！',
     // 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
     token: 'Bearer ' + tokenStr,
   })
   ```



7.  完整代码

   ```js
   /**
    * 定义和用户相关的路由处理函数，功 /router/user.js 模块尽心调用
    */
   
   // 导入数据库操作模块
   const db = require('../db/index')
   const bcrypt = require('bcryptjs')
   // 生成 Token 字符串
   const jwt = require('jsonwebtoken')
   // 导入配置文件
   const config = require('../config')
   
   // 注册用户的处理函数
   exports.regUser = (req, res) => {}
   
   // 登录的处理函数
   exports.login = (req, res) => {
     // 接收表单传递过来的数据
     const userInfo = req.body
     // 定义 sql 语句
     const sql = `select * from ev_users where username=?`
     // 执行 sql 语句，根据用户名查询用户的信息
     db.query(sql, userInfo.username, (err, results) => {
       // 指定 sql 失败
       if (err) return res.cc(err)
       // 执行 sql 语句成功，但是获取到的数据条数不等于 1
       if (results.length !== 1) return res.cc('登录失败')
   
       // 判断用户名和密码是否正确
       // 将用户输入的密码和数据库中存储的密码进行比较
       const compareResult = bcrypt.compareSync(userInfo.password, results[0].password)
       // 根据对比后的结果进行判断
       if (!compareResult) return res.cc('登录失败！')
   
       // 登录成功以后，给用户返回 token 值
       // 剔除 user 返回的 头像和密码 信息，
       const user = { ...results[0], password: '', user_pic: '' }
   
       // 生成 Token 字符串内容
       const tokenStr = jwt.sign(user, config.jwtSecretKey, {expiresIn: config.expiresIn})
   
       // 将生成的 Token 字符串响应给客户端
       res.send({
         status: 0,
         message: '登录成功！',
         // 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
         token: 'Bearer ' + tokenStr,
       })
     })
   }
   
   ```

   



#### 2.7 配置解析 `Token` 的中间件

1.  运行如下的命令，安装解析 `Token` 的中间件

   ```js
   cnpm i express-jwt@5.3.3 -S
   ```

   

2.  在  `app.js` 中注册路由之前，配置解析 `Token` 的中间件

   ```js
   // 导入全局的配置文件
   const config = require('./config')
   // 解析 token 的中间件
   const expressJWT = require('express-jwt')
   // 使用 .unless 方法指定哪些接口不需要进行 Token 的身份认证
   app.use(expressJWT({ secret: config.jwtSecretKey })).unless({ path: [/^\/api\//] })
   
   // 导入并注册用户路由模块
   const userRouter = require('./router/user')
   app.use('/api', userRouter)
   ```

   

3.  在  `app.js` 中的  错误级别中间件 里面，捕获并处理 `Token` 认证失败后的错误

   ```js
   // 错误中间件
   app.use((err, req, res, next) => {
     // 数据验证失败
     if (err instanceof joi.ValidationError) return res.cc(err)
       
     // 在身份认证失败后，捕获并处理 Token 认证失败后的错误
     if (err.name === 'UnauthorizedError') return res.cc('身份认证失败！')
       
     // 未知错误
     res.cc(err)
   })
   ```

   

### 3. 获取用户的基本信息

#### 3.1 实现步骤

1.  初始化 路由 模块
2.  初始化 路由处理函数 模块
3.  获取用户的基本信息



#### 3.2 初始化路由模块

1.  创建  `/router/userinfo.js` 路由模块，并初始化如下的代码结构

   ```js
   // 导入 express
   const express = require('express')
   const { route } = require('./user')
   // 创建路由对象
   const router = express.Router()
   
   // 获取用户的基本信息
   router.get('/userinfo', (req, res) => {
     res.send('ok')
   })
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   

2.  在  `app.js` 中导入并使用个人中心的路由模块

   ```js
   // 导入并注册用户路由模块
   const userRouter = require('./router/user')
   // 导入并使用用户信息的路由模块
   const userinfoRouter = require('./router/userinfo')
   
   app.use('/api', userRouter)
   app.use('/my', userinfoRouter)
   ```



#### 3.3 初始化 路由处理函数 模块

1.  创建  `/router_handler/userinfo.js` 路由处理函数模块，并初始化如下的代码结构

   ```js
   // 创建用户基本信息的处理函数
   exports.getUserInfo = (req, res) => {
     res.send('Ok')
   }
   
   ```

   

2.  修改  `/router/userinfo.js`  中的代码

   ```js
   // 导入 express
   const express = require('express')
   const { route } = require('./user')
   // 创建路由对象
   const router = express.Router()
   // 导入用户信息的处理函数模块
   const userinfo_handler = require('../router_handler/userinfo')
   
   // 获取用户的基本信息
   router.get('/userinfo', userinfo_handler.getUserInfo)
   
   // 向外共享路由对象
   module.exports = router
   
   ```





#### 3.4 获取用户的基本信息

1.  在  `/router_handler/userinfo.js` 头部导入数据库操作模块

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   ```

   

2.  定义 `SQL` 语句

   ```js
   // 定义查询用户信息的 sql 语句
   const sql = `select id, username, nickname, email, user_pic from ev_users where id=?
   ```

   

3.  调用  `db.query()` 执行 `SQL` 语句

   ```js
   // 调用 db.query() 执行 sql 语句
   db.query(sql, req.user.id, (err, results) => {
     // 执行 sql 语句失败
     if (err) return res.cc(err)
   
     // 执行的 sql 语句成功，但是查询的结果可能为空
     if (results.length !== 1) return res.cc('获取用户信息失败！')
   
     // 用户信息获取成功
     res.send({
       status: 0,
       message: '获取用户基本信息成功！',
       data: results[0],
     })
   })
   ```

   

4.  完成代码

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   
   // 创建用户基本信息的处理函数
   exports.getUserInfo = (req, res) => {
     // 定义查询用户信息的 sql 语句
     const sql = `select id, username, nickname, email, user_pic from ev_users where id=?`
   
     // 调用 db.query() 执行 sql 语句
     db.query(sql, req.user.id, (err, results) => {
       // 执行 sql 语句失败
       if (err) return res.cc(err)
   
       // 执行的 sql 语句成功，但是查询的结果可能为空
       if (results.length !== 1) return res.cc('获取用户信息失败！')
   
       // 用户信息获取成功
       res.send({
         status: 0,
         message: '获取用户基本信息成功！',
         data: results[0],
       })
     })
   }
   
   ```

   



### 4. 更新用户的基本信息

#### 4.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  实现更新用户基本信息的功能



#### 4.2 定义路由和处理函数

1.  在  `/router/userinfo.js` 模块中，新增  更新用户基本信息 的路由

   ```js
   // 更新用户的基本信息
   router.post('/userinfo', userinfo_handler.updateUserInfo)
   ```

   

2.  在  `/router_handler/userinfo.js` 模块中，定义并向外共享  更新用户基本信息 的路由处理函数

   ```js
   // 更新用户基本信息的处理函数
   exports.updateUserInfo = (req, res) => {
     res.send('Ok')
   }
   ```

   

#### 4.3 定义验证规则对象

1.  在  `/schema/user.js` 验证规则模块中，定义  `id` ， `nickname` ， `email` 的验证规则

   ```js
   // 定义 id, nickname, emial 的验证规则
   const id = joi.number().integer().min(1).required()
   const nickname = joi.string().required()
   const email = joi.string().email().required()
   ```

   

2.  并使用 `exports` 向外共享如下的  验证规则对象

   ```js
   // 更新用户基本信息的验证规则对象
   exports.update_userinfo_schema = {
     body: {
       id,
       nickname,
       email,
     }
   }
   ```



3.  完整代码

   ```js
   // /schema/user.js
   
   const joi = require('@hapi/joi')
   
   // 验证用户名、密码的规则
   const username = joi.string().alphanum().min(1).max(10).required()
   const password = joi.string().pattern(/^[\S]{6,12}$/).required()
   
   // 定义 id, nickname, emial 的验证规则
   const id = joi.number().integer().min(1).required()
   const nickname = joi.string().required()
   const email = joi.string().email().required()
   
   // 登录和注册表单的验证规则对象
   exports.reg_login_schema = {
     // 表示需要对 req.body 中的数据进行验证
     body: {
       username,
       password,
     }
   }
   
   // 更新用户基本信息的验证规则对象
   exports.update_userinfo_schema = {
     body: {
       id,
       nickname,
       email,
     }
   }
   
   ```

   



#### 4.4 验证数据规则的合法性

1.  在  `/router/userinfo.js` 模块中，导入验证数据合法性的中间件

   ```js
   // 导入验证数据合法性的中间件
   const expressJoi = require('@escook/express-joi')
   ```

   

2.  在 `/router/userinfo.js` 模块中，导入需要的验证规则对象

   ```js
   // 导入验证数据合法性的中间件
   const expressJoi = require('@escook/express-joi')
   // 导入需要的验证规则对象
   const { update_userinfo_schema } = require('../schema/user')
   ```

   

3.  在 `/router/userinfo.js` 模块中，修改  更新用户的基本信息 的路由如下

   ```js
   // 更新用户的基本信息
   router.post('/userinfo', expressJoi(update_userinfo_schema), userinfo_handler.updateUserInfo)
   
   ```



4.  完整代码

   ```js
   // /router/userinfo.js
   
   // 导入 express
   const express = require('express')
   const { route } = require('./user') 
   // 导入验证数据合法性的中间件
   const expressJoi = require('@escook/express-joi')
   // 导入需要的验证规则对象
   const { update_userinfo_schema } = require('../schema/user')
   
   // 创建路由对象
   const router = express.Router()
   // 导入用户信息的处理函数模块
   const userinfo_handler = require('../router_handler/userinfo')
   
   // 获取用户的基本信息
   router.get('/userinfo', userinfo_handler.getUserInfo)
   // 更新用户的基本信息
   router.post('/userinfo', expressJoi(update_userinfo_schema), userinfo_handler.updateUserInfo)
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   



#### 4.4 实现更新用户基本信息的功能

1.  定义待执行的 `SQL` 语句

   ```js
   // 定义更新用户信息的 sql 语句
   const sql = `update ev_users set ? where id=?`
   
   ```

   

2.  调用 `db.query()` 执行 `SQL` 语句并传参

   ```js
   // 调用 db.query() 执行 sql 语句
   db.query(sql, [req.body, req.body.id], (err, results) => {
     // 执行 sql 语句失败
     if (err) return res.cc(err)
   
     // 执行 sql 语句成功，但影响函数不为 1、
     if (results.affectedRows !== 1) return res.cc('修改用户基本信息失败！')
   
     // 修改用户信息成功
     return res.cc('修改用户基本信息成功！', 0)
   })
   ```

   

3.  完整代码

   ```js
   // 更新用户基本信息的处理函数
   exports.updateUserInfo = (req, res) => {
     // 定义更新用户信息的 sql 语句
     const sql = `update ev_users set ? where id=?`
   
     // 调用 db.query() 执行 sql 语句
     db.query(sql, [req.body, req.body.id], (err, results) => {
       // 执行 sql 语句失败
       if (err) return res.cc(err)
   
       // 执行 sql 语句成功，但影响函数不为 1、
       if (results.affectedRows !== 1) return res.cc('修改用户基本信息失败！')
   
       // 修改用户信息成功
       return res.cc('修改用户基本信息成功！', 0)
     })
   }
   ```

   

### 5. 重置密码

#### 5.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  实现重置密码的功能



#### 5.2 定义路由和处理函数

1.  在 `/router/userinfo.js` 模块中，新增  重置密码 的路由

   ```js
   // 重置密码的路由
   router.post('/updatepwd', userinfo_handler.updatePassword)
   ```

   

2. 在  `/router_handler/userinfo.js` 模块中，定义并向外共享  重置密码 的路由处理函数

   ```js
   // 重置密码的处理函数
   exports.updatePassword = (req, res) => {
     res.send('ok')
   }
   ```



#### 5.3 验证数据表单

> 核心验证思路：旧密码与新密码，必须符合密码的验证规则，并且新密码不能与旧密码一致

1.  在  `/schema/user.js` 模块中，使用  `exports` 向外共享如下的  验证规则对象

   - `joi.ref('oldPwd')` 表示 `newPwd` 的值必须和 `oldPwd` 的值保持一致
   - `joi.not(joi.ref('oldPwd'))` 表示 `newPwd` 的值不能等于 `oldPwd` 的值
   - `.concat()` 用于合并 `joi.not(joi.ref('oldPwd'))` 和 `password` 这两条验证规则

   ```js
   // 重置密码验证规则对象
   exports.update_password_schema = {
     body: {
       oldPwd: password,
       newPwd: joi.not(joi.ref('oldPwd')).concat(password),
     }
   }
   
   ```

   

2.  在  `/router/userinfo.js` 模块中，导入需要的验证规则对象

   ```js
   // 导入需要的验证规则对象
   const { update_userinfo_schema, update_password_schema } = require('../schema/user')
   ```

   

3.  并在  重置密码的路由 中，使用  update_password_schema 规则验证表单的数据

   ```js
   // 重置密码的路由
   router.post('/updatepwd', expressJoi(update_password_schema), userinfo_handler.updatePassword)
   ```





#### 5.4  实现重置密码的功能

1.  根据  `id` 查询用户是否存在

   ```js
   // 重置密码的处理函数
   exports.updatePassword = (req, res) => {
     // 执行根据 id 查询用户数据的 SQL 语句
     const sql = `select * from ev_users where id=?`
   
     // 执行 SQL 语句查询用户是否存在
     db.query(sql, req.user.id, (err, results) => {
       // 执行 SQL 语句失败
       if (err) return res.cc(err)
   
       // 判断结果是否存在
       if (results.length !== 1) return res.cc('用户不存在！')
   
       // 判断用户输入的旧密码是否正确
       res.cc('ok')
     })
   }
   
   ```



#### 5.5 判断提交的 旧密码 是否正确

1.  在头部区域导入 `bcryptjs` 

   ```js
   const bcrypt = require('bcryptjs')
   ```

   

2.  使用 `bcrypt.compareSync(提交的密码，数据库中的密码)` 方法验证密码是否正确

   - `compareSync()` 函数的返回值为布尔值，`true` 表示密码正确，`false` 表示密码错误

   ```js
   // 判断用户输入的旧密码是否正确
   const compareResult = bcrypt.compareSync(req.body.oldPwd, results[0].password)
   if (!compareResult) return res.cc('旧密码错误！')
   ```

   

3.  完整密码

   ```js
   // 重置密码的处理函数
   exports.updatePassword = (req, res) => {
     // 执行根据 id 查询用户数据的 SQL 语句
     const sql = `select * from ev_users where id=?`
   
     // 执行 SQL 语句查询用户是否存在
     db.query(sql, req.user.id, (err, results) => {
       // 执行 SQL 语句失败
       if (err) return res.cc(err)
   
       // 判断结果是否存在
       if (results.length !== 1) return res.cc('用户不存在！')
   
       // 判断用户输入的旧密码是否正确
       const compareResult = bcrypt.compareSync(req.body.oldPwd, results[0].password)
       if (!compareResult) return res.cc('旧密码错误！')
   
       res.cc('ok')
     })
   }
   
   ```

   





#### 5.6 实现重置密码的功能

1.  定义更新用户密码的 `SQL` 语句

   ```js
   // 定义更新密码的 SQL 语句
   const sql = `update ev_users set password=? where id=?`
   ```

   

2.  对新密码进行加密处理

   ```js
   // 对新密码进行加密处理
   const newPwd = bcrypt.hashSync(req.body.newPwd, 10)
   ```

   

3.  执行 `SQL` 语句

   ```js
   // 执行 SQL 语句，根据 id 更新用户的密码
   db.query(sql, [newPwd, req.user.id], (err, results) => {
     //语句执行失败
     if (err) return res.cc(err)
   
     // 语句执行成功，但是影响行数不等于 1
     if (results.affectedRows !== 1) return res.cc('更新密码失败！')
     
     // 更新密码成功
     res.cc('更新密码成功！', 0)
   })
   ```

   

4.  完整代码

   ```js
   // 重置密码的处理函数
   exports.updatePassword = (req, res) => {
     // 执行根据 id 查询用户数据的 SQL 语句
     const sql = `select * from ev_users where id=?`
   
     // 执行 SQL 语句查询用户是否存在
     db.query(sql, req.user.id, (err, results) => {
       // 执行 SQL 语句失败
       if (err) return res.cc(err)
   
       // 判断结果是否存在
       if (results.length !== 1) return res.cc('用户不存在！')
   
       // 判断用户输入的旧密码是否正确
       const compareResult = bcrypt.compareSync(req.body.oldPwd, results[0].password)
       if (!compareResult) return res.cc('旧密码错误！')
   
       // 定义更新密码的 SQL 语句
       const sql = `update ev_users set password=? where id=?`
   
       // 对新密码进行加密处理
       const newPwd = bcrypt.hashSync(req.body.newPwd, 10)
       
       // 执行 SQL 语句，根据 id 更新用户的密码
       db.query(sql, [newPwd, req.user.id], (err, results) => {
         //语句执行失败
         if (err) return res.cc(err)
   
         // 语句执行成功，但是影响行数不等于 1
         if (results.affectedRows !== 1) return res.cc('更新密码失败！')
         
         // 更新密码成功
         res.cc('更新密码成功！', 0)
       })
     })
   }
   
   ```

   

### 6.  更换头像

#### 6.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  实现更新用户头像的功能



#### 6.2 定义路由和处理函数

1.  在 `/router/userinfo.js` 模块中，新增  更新用户头像 的路由

   ```js
   // 更新用户头像的路由
   router.post('/update/avatar', userinfo_handler.updateAvatar)
   ```

   

2.  在  `/router_handler/userinfo.js` 模块中，定义并向外共享  更新用户头像 的路由处理函数

   ```js
   // 更新用户头像的处理函数
   exports.updateAvatar = (req, res) => {
    res.send('ok')
   }
   ```





#### 6.3 验证表单数据

1.  在 `/schema/user.js` 验证规则模块中，定义  avatar 的验证规则

   - `dataUri()` 指的是如下格式的字符串数据
   - `data:image/png;base64,VE9PTUFOWVNFQ1JFVFM=`

   ```js
   // 验证头像数据
   const avatar = joi.string().dataUri().required()
   
   // 验证规则对象 - 更新头像
   exports.update_avatar_schema = {
     body: {
       avatar
     }
   }
   
   ```

   

2.  并使用 `exports` 向外共享如下的  验证规则对象

   ```js
   // 导入需要的验证规则对象
   const { update_avatar_schema } = require('../schema/user')
   
   // 更新用户头像的路由
   router.post('/update/avatar', expressJoi(update_avatar_schema), userinfo_handler.updateAvatar)
   ```





#### 6.4  实现更新用户头像的操作

1.  定义更新用户头像的 `SQL` 语句

   ```js
   const sql = 'update ev_users set user_pic=? where id=?'
   ```

   

2.  调用 `db.query()` 执行 `SQL` 语句，更新对应用户的头像

   ```js
   // 更新用户头像的处理函数
   exports.updateAvatar = (req, res) => {
     // 更新用户头像的 sql 字段
     const sql = 'update ev_users set user_pic=? where id=?'
   
     db.query(sql, [req.body.avatar, req.user.id], (err, results) => {
       // SQL 语句失败
       if (err) return res.cc(err)
   
       // SQL 语句成功，但是影响行数不等于 1
       if (results.affectedRows !== 1) return res.cc('更新头像失败！')
   
       // 更新用户头像成功
       return res.cc('更新头像成功！', 0)
     })
   }
   
   ```

## Node 第 8 天

### 1.  学习目标

◆ 完成获取文章分类列表的功能

◆ 完成新增文章分类的功能

◆ 完成根据 ID 删除文章分类的功能

◆ 完成根据 ID 获取文章分类的功能

◆ 完成根据 ID 更新文章分类的功能

◆ 完成发布新文章的功能



### 2. 新建 `ev_article_cate` 数据表

#### 2.1 创建表结构

<img src="./images/Day_008/001 - 创建文章分类的表.png" style="zoom:80%;" />





#### 2.2 新增两条初始化的数据

<img src="./images/Day_008/002 - 两条初始化的数据.png" style="zoom:80%;" />







### 3. 获取文章分类列表

#### 3.1 实现步骤

1.  初始化路由模块
2.  初始化路由处理函数模块
3.  获取文章分类列表数据



#### 3.2 初始化路由模块

1.  创建  `/router/artcate.js` 路由模块，并初始化如下的代码结构

   ```js
   // // 导入 express
   const express = require('express')
   
   // 创建路由对象
   const router = express.Router()
   
   // 获取文章分类的列表数据
   router.get('/cates', (req, res) => {
     res.send('ok')
   })
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   

2.  在 `app.js` 中导入并使用文章分类的路由模块

   ```js
   // 导入并使用文章分类路由模块
   const artCateRouter = require('./router/userinfo')
   
   // 为文章分类的路由挂载统一的访问前缀 /my/article
   app.use('/my/article', artCateRouter)
   ```

   

#### 3.3 初始化路由处理函数模块

1.  创建 `/router_handler/artcate.js` 路由处理函数模块，并初始化如下的代码结构

   ```js
   // 获取文章分类列表数据的处理函数
   exports.getArticleCates = (req, res) => {
     res.send('ok')
   }
   
   ```

   

2.  修改 `/router/artcate.js` 中的代码

   ```js
   // // 导入 express
   const express = require('express')
   
   // 创建路由对象
   const router = express.Router()
   // 导入文章分类的路由处理函数模块
   const artcate_handler = require('../router_handler/artcate')
   
   // 获取文章分类的列表数据
   router.get('/cates', artcate_handler.getArticleCates)
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   

#### 3.4 实现获取文章分类列表数据的功能

1.  在 `/router_handler/artcate.js` 头部导入数据库操作模块

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   ```

   

2.  定义 `SQL` 语句

   ```js
   // 定义查询分类列表数据的 SQL 语句
   // is_delete 为 0 表示没有被 标记为删除 的数据
   const sql = 'select * from ev_article_cate where is_delete=0 order by id asc'
   ```

   

3.  调用 `db.query()` 执行 `SQL` 语句

   ```js
   // 调用 db.query() 执行 SQL 语句
   db.query(sql, (err, results) => {
     // SQL 语句执行失败
     if (err) return res.cc(err)
   
     // SQL 语句执行成功
     res.send({
       status: 0,
       message: '获取文章分类列表成功！',
       data: results,
     })
   })
   ```

   

4.  完整代码

   ```js
   // 这是路由处理函数模块
   
   // 导入数据库操作模块
   const db = require('../db/index')
   
   // 获取文章分类列表数据的处理函数
   exports.getArticleCates = (req, res) => {
     // 定义查询分类列表数据的 SQL 语句
     // is_delete 为 0 表示没有被 标记为删除 的数据
     const sql = 'select * from ev_article_cate where is_delete=0 order by id asc'
   
     // 调用 db.query() 执行 SQL 语句
     db.query(sql, (err, results) => {
       // SQL 语句执行失败
       if (err) return res.cc(err)
   
       // SQL 语句执行成功
       res.send({
         status: 0,
         message: '获取文章分类列表成功！',
         data: results,
       })
     })
   }
   
   ```

   

5.  测试

   <img src="./images/Day_008/003 - 实现获取文章分类列表数据的功能.png" style="zoom:80%;" />







### 4. 新增文章分类

#### 4.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  查询 `分类名称` 与 `分类别名` 是否被占用
4.  实现新增文章分类的功能



#### 4.2 定义路由和处理函数

1. 在 `/router/artcate.js` 模块中，添加 `新增文章分类` 的路由

   ```js
   // 新增文章分类的路由
   router.post('/addcates', artcate_handler.addArticleCates)
   ```

   

2.  在 `/router_handler/artcate.js` 模块中，定义并向外共享 `新增文章分类` 的路由处理函数

   ```js
   // 新增文章分类的处理函数
   exports.addArticleCates = (req, res) => {
     res.send('ok')
   }
   
   ```

   

#### 4.3 验证表单数据

1.  创建 `/schema/artcate.js` 文章分类数据验证模块

   ```js
   // 1. 导入定义验证规则的模块
   const joi = require('@hapi/joi')
   
   // 2/ 定义 name 和 alias 的校验规则
   const name = joi.string().required()
   const alias = joi.string().alphanum().required()
   
   // 向外共享验证规则对象
   exports.add_cate_schema = {
     body: {
       name,
       alias
     }
   }
   
   ```

   

2.  在 `/router/artcate.js` 模块中，使用 `add_cate_schema` 对数据进行验证

   ```js
   // 导入验证数据的中间件
   const expressJoi = require('@escook/express-joi')
   
   // 导入文章分类的验证模块
   const { add_cate_schema } = require('../schema/artcate')
   
   // 新增文章分类的路由
   router.post('/addcates', expressJoi(add_cate_schema), artcate_handler.addArticleCates)
   
   ```

   

3.  验证

   ![](./images/Day_008/004 - 验证表单数据.png)





#### 4.4 分析分类名和别名被占用的四种情况

1.  分类名称和分类别名同时被占用

   ![](./images/Day_008/005 - 查询结果·1.png)

   
   
2.  分类名称和分类别名同时被占用

   ![](./images/Day_008/006 - 查询结果 2.png)

   
   
3.  只有分类名称被占用

   ![](./images/Day_008/007 - 查询结果 3.png)

   
   
4.   只有分类别名被占用

   ![](./images/Day_008/008 - 查询结果 4.png)







#### 4.5 写代码判断分类名称和别名是否被占用

1.  定义查重的 `SQL` 语句

   ```js
   // 定义查询 分类名称 与 分类别名 是否被占用的 SQL 语句
   const sql = `select * from ev_article_cate where name=? or alias=?`
   ```

   

2. 调用 `db.query()` 执行查重的操作

   ```js
   // 执行查重操作
   db.query(sql, [req.body.name, req.body.alias], (err, results) => {
     // 执行 SQL 语句失败
     if (err) return res.cc(err)
   
     // 分类名称 和 分类别名 都被占用
     if (results.length === 2) return res.cc('分类名称与别名被占用，请更换后重试！')
     if (results.length === 1 && results[0].name === req.body.name && results[0].alias === req.body.alias) return res.cc('分类名称与别名被占用，请更换后重试！')
     // 分类名称 或 分类别名 被占用
     if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用，请更换后重试！')
     if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用，请更换后重试！')
   
     // TODO：新增文章分类
   })
   ```



3.  完整代码

   ```js
   // 新增文章分类的处理函数
   exports.addArticleCates = (req, res) => {
     // 1. 定义查重的 sql 语句
     const sql = `select * from ev_article_cate where name=? or alias=?`
   
     // 2. 执行查重的 sql 语句
     db.query(sql, [req.body.name, req.body.alias], (err, results) => {
       // 3. SQL 语句执行失败
       if (err) return res.cc(err)
   
       // 4.1 判断数据的 length
       if (results.length === 2) return res.cc('分类名称与别名被占用，请更换后重试！')
       // 4.2 length 等于 1 的三种情况，分类名称 或 分类别名 被占用
       if (results.length === 1 && results[0].name === req.body.name && results[0].alias === req.body.alias) return res.cc('分类名称与别名被占用，请更换后重试！')
       if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用，请更换后重试！')
       if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用，请更换后重试！')
   
       res.send('Ok')
     })
   }
   
   ```

   

#### 4.6 实现新增文章分类的功能

1.  定义新增文章分类的 `SQL` 语句

   ```js
   // 定义插入文章分类的 sql 语句
   const sql = `insert into ev_article_cate set ?`
   ```

   

2.  调用 `db.query()` 执行新增文章分类的 `SQL` 语句

   ```js
   // 执行插入文章分类的 sql 语句
   db.query(sql, req.body, (err, results) => {
     // SQL 语句执行失败
     if (err) return res.cc(err)
   
     // SQL 语句执行成功，但是影响行数不等于 1
     if (results.affectedRows !== 1) return res.cc('新增文章分类失败！')
   
     // 新增文章分类成功
     res.cc('新增文章分类成功！', 0)
   })
   ```

   

3.  完整代码

   ```js
   // 新增文章分类的处理函数
   exports.addArticleCates = (req, res) => {
     // 1. 定义查重的 sql 语句
     const sql = `select * from ev_article_cate where name=? or alias=?`
   
     // 2. 执行查重的 sql 语句
     db.query(sql, [req.body.name, req.body.alias], (err, results) => {
       // 3. SQL 语句执行失败
       if (err) return res.cc(err)
   
       // 4.1 判断数据的 length
       if (results.length === 2) return res.cc('分类名称与别名被占用，请更换后重试！')
       // 4.2 length 等于 1 的三种情况，分类名称 或 分类别名 被占用
       if (results.length === 1 && results[0].name === req.body.name && results[0].alias === req.body.alias) return res.cc('分类名称与别名被占用，请更换后重试！')
       if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用，请更换后重试！')
       if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用，请更换后重试！')
   
       // 定义插入文章分类的 sql 语句
       const sql = `insert into ev_article_cate set ?`
   
       // 执行插入文章分类的 sql 语句
       db.query(sql, req.body, (err, results) => {
         // SQL 语句执行失败
         if (err) return res.cc(err)
   
         // SQL 语句执行成功，但是影响行数不等于 1
         if (results.affectedRows !== 1) return res.cc('新增文章分类失败！')
   
         // 新增文章分类成功
         res.cc('新增文章分类成功！', 0)
       })
     })
   }
   
   ```

   

4.  测试

   <img src="./images/Day_008/009 - 添加文章分类.png" style="zoom:80%;" />





### 5. 根据 id 删除文章分类

#### 5.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  实现删除文章分类的功能



#### 5.2 定义路由和处理函数

1.  在 `/router/artcate.js` 模块中，添加 `删除文章分类` 的路由

   ```js
   // 删除文章分类的路由
   router.get('/deletecate/:id', artcate_handler.deleteCateById)
   ```

   

2.  在 `/router_handler/artcate.js` 模块中，定义并向外共享 `删除文章分类` 的路由处理函数

   ```js
   // 删除文章分类的处理函数
   exports.deleteCateById = (req, res) => {
     res.send('ok')
   }
   ```

   

3.  验证

   <img src="./images/Day_008/010 - 定义路由和处理函数.png" style="zoom:80%;" />





#### 5.3 验证客户端提交到服务器的 id 值

1.  在 `/schema/artcate.js` 验证规则模块中，定义 id 的验证规则

   ```js
   // 定义 分类 Id 的校验规则
   const id = joi.number().integer().min(1).required()
   
   ```

   

2.  并使用 `exports` 向外共享如下的 `验证规则对象`

   ```js
   // 向外共享删除分类的规则对象
   exports.delete_cate_schema = {
     params: {
       id
     }
   }
   ```

   

3. 在 `/router/artcate.js` 模块中，导入需要的验证规则对象，并在路由中使用

   ```js
   // 导入删除分类的验证规则对象
   const { delete_cate_schema } = require('../schema/artcate')
   
   // 删除文章分类的路由
   router.get('/deletecate/:id', expressJoi(delete_cate_schema), artcate_handler.deleteCateById)
   ```

   

4.  验证

   <img src="./images/Day_008/011 - 验证客户端提交到服务器的 id 值.png" style="zoom:80%;" />





#### 5.4 实现删除文章分类的功能

1.  定义删除文章分类的 `SQL` 语句

   ```js
   // 1. 定义删除的 sql 语句
   const sql = `update ev_article_cate set is_delete=1 where id=?`
   
   ```

   

2.  调用 `db.query()` 执行删除文章分类的 `SQL` 语句

   ```js
   // 2. 执行查重的 sql 语句
   db.query(sql, req.params.id, (err, results) => {
     // SQL 语句执行失败
     if (err) return res.cc(err)
   
     // 语句执行 SQL 成功，但是影响行数不等于 1
     if (results.affectedRows !== 1) return res.cc('删除文章分类失败！')
   
     // 删除文章分类成功
     res.cc('删除文章分类成功！', 0)
   })
   ```

   

3.  完整代码

   ```js
   // 删除文章分类的处理函数
   exports.deleteCateById = (req, res) => {
     // 1. 定义删除的 sql 语句
     const sql = `update ev_article_cate set is_delete=1 where id=?`
   
     // 2. 执行删除的 sql 语句
     db.query(sql, req.params.id, (err, results) => {
       // SQL 语句执行失败
       if (err) return res.cc(err)
     
       // 语句执行 SQL 成功，但是影响行数不等于 1
       if (results.affectedRows !== 1) return res.cc('删除文章分类失败！')
     
       // 删除文章分类成功
       res.cc('删除文章分类成功！', 0)
     })
   }
   ```

   

4.  验证

   <img src="./images/Day_008/012 - 实现删除文章分类的功能.png" style="zoom:80%;" />





### 6. 根据 id 获取文章分类

#### 6.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  实现获取文章分类的功能



#### 6.2 定义路由和处理函数

1.  在 `/router/artcate.js` 模块中，添加 `根据 Id 获取文章分类` 的路由

   ```js
   // 查询文章分类的路由
   router.get('/cates/:id', artcate_handler.getArticleById)
   ```

   

2.  在 `/router_handler/artcate.js` 模块中，定义并向外共享 `根据 Id 获取文章分类` 的路由处理函数

   ```js
   // 根据 Id 获取文章分类的处理函数
   exports.getArticleById = (req, res) => {
     res.send('ok')
   }
   ```

   

3.  验证

   <img src="./images/Day_008/013 - 定义路由和处理函数.png" style="zoom:80%;" />





#### 6.3 验证客户端提交到服务器的 id 值

1.  在 `/schema/artcate.js` 验证规则模块中，使用 `exports` 向外共享如下的 `验证规则对象`

   ```js
   // 向外共享根据 Id 获取分类的规则对象
   exports.get_cate_schema = {
     params: {
       id
     }
   }
   
   ```

   

2.  在 `/router/artcate.js` 模块中，导入需要的验证规则对象，并在路由中使用

   ```js
   // 导入根据 Id 获取分类的验证规则对象
   const { get_cate_schema } = require('../schema/artcate')
   
   //  根据 Id 获取文章分类的路由
   router.get('/cates/:id', expressJoi(get_cate_schema), artcate_handler.getArticleById)
   ```

   

3.  验证

   <img src="./images/Day_008/014 - 验证客户端提交到服务器的 id 值.png" style="zoom:80%;" />



#### 6.4 实现获取文章分类的功能

1.  定义根据 Id 获取文章分类的 `SQL` 语句

   ```js
   // 1. 定义根据 id 获取文章分类的 sql 语句
   const sql = `select * from ev_article_cate where id=?`
   
   
   ```

   

2.  调用 `db.query()` 执行 `SQL` 语句

   ```js
   // 2. 执行查询的 sql 语句
   db.query(sql, req.params.id, (err, results) => {
     // 执行 SQL 语句失败
     if (err) return res.cc(err)
   
     // SQL 语句执行成功，但是没有查询到任何数据
     if (results.length !== 1) return res.cc('获取文章分类数据失败！')
   
     // 把数据响应给客户端
     res.send({
       status: 0,
       message: '获取文章分类数据成功！',
       data: results[0],
     })
   })
   ```

   

3.   完整代码

   ```js
   // 根据 Id 获取文章分类的处理函数
   exports.getArticleById = (req, res) => {
     // 1. 定义根据 id 获取文章分类的 sql 语句
     const sql = `select * from ev_article_cate where id=?`
   
     // 2. 执行查询的 sql 语句
     db.query(sql, req.params.id, (err, results) => {
       // 执行 SQL 语句失败
       if (err) return res.cc(err)
     
       // SQL 语句执行成功，但是没有查询到任何数据
       if (results.length !== 1) return res.cc('获取文章分类数据失败！')
     
       // 把数据响应给客户端
       res.send({
         status: 0,
         message: '获取文章分类数据成功！',
         data: results[0],
       })
     })
   }
   ```

   

4.  验证

   <img src="./images/Day_008/015 - 实现获取文章分类的功能.png" style="zoom:80%;" />





### 7. 根据 id 更新文章分类

#### 7.1 实现步骤

1.  定义路由和处理函数
2.  验证表单数据
3.  查询 `分类名称` 与 `分类别名` 是否被占用
4.  实现更新文章分类的功能



#### 7.2 定义路由和处理函数

1.  在 `/router/artcate.js` 模块中，添加 `更新文章分类` 的路由

   ```js
   // 更新文章分类的路由
   router.post('/updatecate', artcate_handler.updateCateById)
   ```

   

2.  在 `/router_handler/artcate.js` 模块中，定义并向外共享 `更新文章分类` 的路由处理函数

   ```js
   // 更新文章分类的处理函数
   exports.updateCateById = (req, res) => {
     res.send('ok')
   }
   
   ```

   

3.  验证

   <img src="./images/Day_008/06 - 定义路由和处理函数.png" style="zoom:80%;" />



#### 7.3 验证表单数据

1.  在 `/schema/artcate.js` 验证规则模块中，使用 `exports` 向外共享如下的 `验证规则对象`

   ```js
   // 向外共享更新分类的规则对象
   exports.update_cate_schema = {
     body: {
       Id: id,
       name,
       alias
     }
   }
   
   ```

   

2.  在 `/router/artcate.js` 模块中，导入需要的验证规则对象，并在路由中使用

   ```js
   // 导入更新文章分类的验证规则对象
   const { update_cate_schema } = require('../schema/artcate')
   
   // 更新文章分类的路由
   router.post('/updatecate', expressJoi(update_cate_schema), artcate_handler.updateCateById)
   ```

   

3.  验证

   <img src="./images/Day_008/016 - 验证表单数据.png" style="zoom:80%;" />





#### 7.4 查询分类名称与别名是否被占用

1.  定义查重的 `SQL` 语句

   ```js
   // 1. 定义查询 分类名称 与 分类别名 是否被占用的 SQL 语句
   const sql = `select * from ev_article_cate where Id<>? and (name=? or alias=?)`
   
   ```

   

2.  调用 `db.query()` 执行查重的操作

   ```js
   // 2. 执行查重的 sql 语句
   db.query(sql, [req.body.Id, req.body.name, req.body.alias], (err, results) => {
     // 执行 SQL 语句失败
     if (err) return res.cc(err)
   
     // 分类名称 和 分类别名 都被占用
     if (results.length === 2) return res.cc('分类名称与别名被占用，请更换后重试！')
     if (results.length === 1 && results[0].name === req.body.name && results[0].alias === req.body.alias) return res.cc('分类名称与别名被占用，请更换后重试！')
     // 分类名称 或 分类别名 被占用
     if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用，请更换后重试！')
     if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用，请更换后重试！')
   
     res.send('ok')
   })
   ```

   

3.  验证

   <img src="./images/Day_008/016 - 验证表单数据.png" style="zoom:80%;" />



#### 7.5 实现更新文章分类的功能

1.  定义更新文章分类的 `SQL` 语句

   ```js
   // 更新分类的 sql 语句
   const sql = `update ev_article_cate set ? where Id=?`
   
   ```

   

2.  调用 `db.query()` 执行 `SQL` 语句

   ```js
   // 执行 sql 语句
   db.query(sql, [req.body, req.body.Id], (err, results) => {
     // SQL 语句执行失败
     if (err) return res.cc(err)
   
     // SQL 语句执行成功，但是影响行数不等于 1
     if (results.affectedRows !== 1) return res.cc('更新文章分类失败！')
   
     // 更新文章分类成功
     res.cc('更新文章分类成功！', 0)
   })
   ```

   

3.  完整代码

   ```js
   // 更新文章分类的处理函数
   exports.updateCateById = (req, res) => {
     // 1. 定义查询 分类名称 与 分类别名 是否被占用的 SQL 语句
     const sql = `select * from ev_article_cate where Id<>? and (name=? or alias=?)`
   
     // 2. 执行查重的 sql 语句
     db.query(sql, [req.body.Id, req.body.name, req.body.alias], (err, results) => {
       // 执行 SQL 语句失败
       if (err) return res.cc(err)
   
       // 分类名称 和 分类别名 都被占用
       if (results.length === 2) return res.cc('分类名称与别名被占用，请更换后重试！')
       if (results.length === 1 && results[0].name === req.body.name && results[0].alias === req.body.alias) return res.cc('分类名称与别名被占用，请更换后重试！')
       // 分类名称 或 分类别名 被占用
       if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用，请更换后重试！')
       if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用，请更换后重试！')
   
   
       // 更新分类的 sql 语句
       const sql = `update ev_article_cate set ? where Id=?`
   
       // 执行 sql 语句
       db.query(sql, [req.body, req.body.Id], (err, results) => {
         // SQL 语句执行失败
         if (err) return res.cc(err)
   
         // SQL 语句执行成功，但是影响行数不等于 1
         if (results.affectedRows !== 1) return res.cc('更新文章分类失败！')
   
         // 更新文章分类成功
         res.cc('更新文章分类成功！', 0)
       })
     })
   }
   
   ```

   

4.  验证

   <img src="./images/Day_008/017 - 实现更新文章分类的功能.png" style="zoom:80%;" />





### 8. 发布新文章

#### 8.1 新建 `ev_articles` 表

<img src="./images/Day_008/018 - 新建 ev_articles 表.png" style="zoom:80%;" />







#### 8.2 实现步骤

1.  初始化路由模块
2.  初始化路由处理函数模块
3.  使用 `multer` 解析表单数据
4.  验证表单数据
5.  实现发布文章的功能



#### 8.3 初始化路由模块

1.  创建 `/router/article.js` 路由模块，并初始化如下的代码结构

   ```js
   // 导入 express
   const express = require('express')
   // 创建路由对象
   const router = express.Router()
   
   // 发布新文章
   router.post('/add', (req, res) => {
     res.send('ok')
   })
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   

2.  在 `app.js` 中导入并使用文章的路由模块

   ```js
   // 导入并使用文章路由模块
   const articleRouter = require('./router/article')
   
   // 为文章的路由挂载统一的访问前缀 /my/article
   app.use('/my/article', articleRouter)
   ```



#### 8.4 初始化路由处理函数模块

1.  创建 `/router_handler/article.js` 路由处理函数模块，并初始化代码结构

   ```js
   // 发布新文章的处理函数
   exports.addArticle = (req, res) => {
     res.send('ok')
   }
   
   ```

   

2. 修改 `/router/article.js` 中的代码

   ```js
   // 导入文章的路由处理函数模块
   const article_handler = require('../router_handler/article')
   
   // 发布新文章
   router.post('/add', article_handler.addArticle)
   ```

   

3.  完整代码

   ```js
   // 导入 express
   const express = require('express')
   // 创建路由对象
   const router = express.Router()
   
   // 导入文章的路由处理函数模块
   const article_handler = require('../router_handler/article')
   
   // 发布新文章
   router.post('/add', article_handler.addArticle)
   
   // 向外共享路由对象
   module.exports = router
   
   ```

   

4. 验证

   <img src="./images/Day_008/018 - 初始化路由处理函数模块.png" style="zoom:80%;" />



#### 8.5 了解 `multer` 的作用

1.  使用 `express.urlencoded()` 中间件无法解析 `multipart/form-data` 格式的请求体数据，也就是说无法接收到 `fomData` 表单传递过来的数据
2.   推荐使用 `multer` 来解析 `multipart/form-data` 格式的表单数据



#### 8.6 安装和配置 `multer`

1. 运行如下的终端命令，在项目中安装 `multer`

   ```js
   cnpm i multer@1.4.2 -S
   ```

   

2.  在 `/router/article.js` 模块中导入并配置 `multer`

   ```js
   // 导入解析 formdata 格式表单数据的包
   const multer = require('multer')
   // 导入处理路径的核心模块
   const path = require('path')
   
   // 创建 multer 的实例对象，通过 dest 属性指定文件的存放路径
   const upload = multer({ dest: path.join(__dirname, '../uploads') })
   ```





#### 8.7 使用 `multer`解析  `FormData`  格式的表单数据

1.  修改 `发布新文章` 的路由

   - 使用 `upload.single()` 方法，它是一个局部生效的中间件，用来解析 `FormData` 格式的表单数据
   - 将文件类型的数据，解析并挂载到 `req.file` 属性中
   - 将文本类型的数据，解析并挂载到 `req.body` 属性中

   ```js
   // 发布新文章的路由
   router.post('/add', upload.single('cover_img'), article_handler.addArticle)
   ```

   

2.  在 `/router_handler/article.js` 模块的 `addArticle` 处理函数中，将 `multer` 解析出来的数据进行打印

   ```js
   // 发布新文章的处理函数
   exports.addArticle = (req, res) => {
     console.log(req.body) // 文本类型的数据
     console.log('--------分割线----------')
     console.log(req.file) // 文件类型的数据
   
     res.send('ok')
   }
   
   ```

   

3.  验证

   <img src="./images/Day_008/019 - 解析表单数据.png" style="zoom:80%;" />





#### 8.8 对 `req.body` 中的数据进行验证

1.  实现思路：通过 `express-joi `**自动验证** `req.body` 中的文本数据；通过 `if` 判断**手动验证** `req.file` 中的文件数据

   ```js
   // 导入定义验证规则的模块
   const joi = require('@hapi/joi')
   
   // 定义 标题、分类Id、内容、发布状态 的验证规则
   const title = joi.string().required()
   const cate_id = joi.number().integer().min(1).required()
   const content = joi.string().required().allow('')
   const state = joi.string().valid('已发布', '草稿').required()
   
   // // 向外共享发布文章的规则对象
   exports.add_article_schema = {
     body: {
       title,
       cate_id,
       content,
       state
     }
   }
   ```

   

2. 在 `/router/article.js` 模块中，导入需要的验证规则对象，并在路由中使用

   ```js
   // 导入验证数据的中间件
   const expressJoi = require('@escook/express-joi')
   // 导入文章的验证模块
   const { add_article_schema } = require('../schema/article')
   
   // 发布新文章
   // 注意：在当前的路由中，先后使用了两个中间件：
   //  先使用 multer 解析表单数据
   //  再使用 expressJoi 对解析的表单数据进行验证
   router.post('/add', upload.single('cover_img'), expressJoi(add_article_schema), article_handler.addArticle)
   ```

   

#### 8.9 对 `req.file` 中的数据进行验证

1. 在 `/router_handler/article.js` 模块中的 `addArticle` 处理函数中，通过 `if` 判断客户端是否提交了 `封面图片`

   ```js
   // 发布新文章的处理函数
   exports.addArticle = (req, res) => {
     console.log(req.body) // 文本类型的数据
     console.log('--------分割线----------')
     console.log(req.file) // 文件类型的数据
   
     // 判断客户端是否提交了 封面图片
     if (!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数！')
   
     res.send('ok')
   }
   
   ```

   

#### 8.10 处理文章信息对象

1.  整理要插入数据库的文章信息对象

   ```js
   const articleInfo = {
     // 标题、内容、状态、所属的分类Id
     ...req.body,
     // 文章封面在服务器端的存放路径
     cover_img: path.join('/uploads', req.file.filename),
     // 文章发布时间
     pub_date: new Date(),
     // 文章作者的Id
     author_id: req.user.id,
   }
   ```

   

2.  完整代码

   ```js
   // 导入处理路径的 path 核心模块
   const path = require('path')
   
   // 发布新文章的处理函数
   exports.addArticle = (req, res) => {
     console.log(req.body) // 文本类型的数据
     console.log('--------分割线----------')
     console.log(req.file) // 文件类型的数据
   
     // 判断客户端是否提交了 封面图片
     if (!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数！')
   
     const articleInfo = {
       // 标题、内容、状态、所属的分类Id
       ...req.body,
       // 文章封面在服务器端的存放路径
       cover_img: path.join('/uploads', req.file.filename),
       // 文章发布时间
       pub_date: new Date(),
       // 文章作者的Id
       author_id: req.user.id,
     }
   
     res.send(articleInfo)
   }
   
   ```

   

3.  验证

   <img src="./images/Day_008/021 - 处理文章信息对象.png" style="zoom:80%;" />





#### 8.11 实现发布文章的功能

1.  定义发布文章的 `SQL` 语句

   ```js
   // 定义发布文章的 sql 语句
   const sql = `insert into ev_articles set ?`
   ```

   

2.  调用 `db.query()` 执行发布文章的 `SQL` 语句

   ```js
   // 导入数据库操作模块
   const db = require('../db/index')
   
   // 执行 SQL 语句
   db.query(sql, articleInfo, (err, results) => {
     // 执行 SQL 语句失败
     if (err) return res.cc(err)
   
     // 执行 SQL 语句成功，但是影响行数不等于 1
     if (results.affectedRows !== 1) return res.cc('发布文章失败！')
   
     // 发布文章成功
     res.cc('发布文章成功', 0)
   })
   ```

   

3.  完整代码

   ```js
   // 导入处理路径的 path 核心模块
   const path = require('path')
   
   // 发布新文章的处理函数
   exports.addArticle = (req, res) => {
   
     // 判断客户端是否提交了 封面图片
     if (!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数！')
   
     const articleInfo = {
       // 标题、内容、状态、所属的分类Id
       ...req.body,
       // 文章封面在服务器端的存放路径
       cover_img: path.join('/uploads', req.file.filename),
       // 文章发布时间
       pub_date: new Date(),
       // 文章作者的Id
       author_id: req.user.id,
     }
   
     // 定义发布文章的 sql 语句
     const sql = `insert into ev_articles set ?`
   
     // 导入数据库操作模块
     const db = require('../db/index')
   
     // 执行 SQL 语句
     db.query(sql, articleInfo, (err, results) => {
       // SQL 执行语句失败
       if (err) return res.cc(err)
   
       // 执行 SQL 语句成功，但是影响行数不等于 1
       if (results.affectedRows !== 1) return res.cc('发布文章失败！')
   
       // 发布文章成功
       res.cc('发布文章成功', 0)
     })
   }
   
   ```

   

4.  验证

   <img src="./images/Day_008/022 - 实现发布文章的功能.png" style="zoom:80%;" />





#### 8.12 托管静态资源文件