node基础学习笔记_值不被接受。有效值: "classic", "node", "node10", "node16", -CSDN博客

本文链接：https://blog.csdn.net/m0_58730471/article/details/127928515

1.初始Node.js

1.1 回顾与思考

浏览器中的 JavaScript 的组成部分
在这里插入图片描述
为什么 JavaScript 可以在浏览器中被执行

为什么 JavaScript 可以操作 DOM 和 BOM

浏览器中的 JavaScript 运行环境
在这里插入图片描述

1.2 Node.js 简介

什么是 Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 的官网地址： https://nodejs.org/zh-cn/

Node.js 中的 JavaScript 运行环境
在这里插入图片描述

Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。然而，基于 Node.js 提供的这些基础能，很多强大的工具和框架如雨后春笋，层出不穷，所以学会了 Node.js ，可以让前端程序员胜任更多的工作和岗位：
① 基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用
② 基于 Electron 框架（https://electronjs.org/），可以构建跨平台的桌面应用
③ 基于 restify 框架（http://restify.com/），可以快速构建 API 接口项目
④ 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…

js在前后端上学习的区别：

浏览器中的 JavaScript 学习路径：
JavaScript 基础语法 +
浏览器内置 API（DOM + BOM） +
第三方库（jQuery、art-template 等）

Node.js 的学习路径：
JavaScript 基础语法 +
Node.js 内置 API 模块（fs、path、http等）+
第三方 API 模块（express、mysql 等）

1.3 Node.js 环境的安装

进入到 Node.js 的官网首页（https://nodejs.org/en/）

区分 LTS 版本和 Current 版本的不同
① LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本的 Node.js。
② Current 为新特性尝鲜版，对热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js。但是，Current 版本中可能存在隐藏的 Bug 或安全性漏洞，因此不推荐在企业级项目中使用 Current 版本的 Node.js。
选这个就OK了 ---> LTS 为长期稳定版
在终端输入命令 node –v 后，按下回车键，即可查看已安装的 Node.js 的版本号。

在 Windows 的 powershell 或 cmd 终端中，我们可以通过如下快捷键，来提高终端的操作效率：
① 使用 ↑ 键，可以快速定位到上一次执行的命令
② 使用 tab 键，能够快速补全路径
③ 使用 esc 键，能够快速清空当前已输入的命令
④ 输入 cls 命令，可以清空终端

2.fs 文件系统模块

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

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

在这里插入图片描述
读取指定文件中的内容

向指定的文件中写入内容

在使用 fs 模块操作文件时，如果提供的操作路径是以 ./ 或 …/ 开头的相对路径时，很容易出现路径动态拼接错误的问题。
原因：代码在运行的时候，会以执行 node 命令时所处的目录，动态拼接出被操作文件的完整路径。
注意：
./ 代指的是当前路径
../ 代指的是当前路径的上一级路径（向上找一级）
但是在路径拼接时一个 ../就会抵消一个前面紧邻的层级,如有多个../就会抵消多个相邻层级

3.path 路径模块

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

path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
path.basename() 方法，用来从路径字符串中，将文件名解析出来

在这里插入图片描述
路径拼接

获取路径中的文件名

在这里插入图片描述

获取路径中的文件扩展名

在这里插入图片描述

4.http模块

在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑，叫做服务器。

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

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

创建 web 服务器的基本步骤
① 导入 http 模块

const http=require('http');

② 创建 web 服务器实例

const server=http.createServer();

③ 为服务器实例绑定 request 事件，监听客户端的请求

// 使用服务器实例的.on() 方法，为服务器绑定一个request事件
server.on('request',function(req,res){
consloe.long('有人请求服务器了~~~');
})

④ 启动服务器

// 调用服务器的.listen() 方法，启动当前的web服务器实例
server.listen(80,function(){
	conslo.log('http server running at http://127.0.0.1:80')
})
// 80是端口号

req 请求对象
request
在这里插入图片描述
res 响应对象
response

解决中文乱码问题

在这里插入图片描述

5.Node.js 中模块化

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

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

把代码进行模块化拆分的好处：
① 提高了代码的复用性
② 提高了代码的可维护性
③ 可以实现按需加载

Node.js 中模块的分类
在这里插入图片描述
加载模块

Node.js 中的模块作用域

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

向外共享模块作用域中的成员

//可查询module对象里面的内容
console.log(module);

在这里插入图片描述
module.exports 对象

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。
外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。

共享成员时的注意点:
使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准。

exports 对象

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

exports 和 module.exports 的使用误区

在最开始module对象中：
exports: {} 就是指向的一个空对象

只要记住：require() 模块时，得到的永远是 module.exports 指向的对象

6.npm与包

6.1 基本介绍

Node.js 中的第三方模块又叫做包。
不同于 Node.js 中的内置模块与自定义模块，包是由第三方个人或团队开发出来的，免费供所有人使用。

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

国外有一家 IT 公司，叫做 npm, Inc. 这家公司旗下有一个非常著名的网站： https://www.npmjs.com/，它是全球最大的包共享平台，你可以从这个网站上搜索到任何你需要的包，只要你有足够的耐心！

npm, Inc. 公司提供了一个地址为 https://registry.npmjs.org/ 的服务器（服务器在外国，所以你懂的！），来对外共享所有的包，我们可以从这个服务器上下载自己所需要的包。

6.2 `解决下包速度慢的问题`

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

淘宝 NPM 镜像服务器
# 在cmd窗口执行即可，也可以在vscode的终端（一样的）
#切换 npm 的下包镜像源（下包的镜像源，指的就是下包的服务器地址。）

#查看当前的下包镜像源
npm config get registry
# 将下包的镜像源切换为淘宝镜像源
npm config set registry=https://registry.npm.taobao.org/
#检查镜像源是否下载成功
npm config get registry

6.3 在项目中安装包和卸载包的命令

不指定版本默认安装最新版
在这里插入图片描述
安装指定版本的包

一次性安装所有的包

卸载包

初次装包后多了哪些文件
初次装包完成后，在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件。
其中：

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

注意：程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码，npm 包管理工具会自动维护它们。

补充知识：包的语义化版本规范
包的版本号是以“点分十进制”形式进行定义的，总共有三位数字，例如 2.24.0
其中每一位数字所代表的的含义如下：
第1位数字：大版本
第2位数字：功能版本
第3位数字：Bug修复版本
版本号提升的规则：只要前面的版本号增长了，则后面的版本号归零。

6.4 包管理配置文件

在这里插入图片描述

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

多人协作时，第三方包的体积过大，不方便团队成员之间共享项目源代码。
所以：共享时剔除node_modules，创建 package.json 的配置文件，用来记录项目中安装了哪些包。

快速创建 package.json

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

devDependencies 节点:

6.5 包的分类

使用 npm 包管理工具下载的包，共分为两大类，分别是：
⚫ 项目包
⚫ 全局包

项目包

全局包

官方说明看这里：https://www.npmjs.com/
例如：
可以快速查看和切换下包的镜像源的nrm小工具

i5ting_toc小工具

7. 模块的加载机制

优先从缓存中加载

内置模块的加载机制

自定义模块的加载机制

第三方模块的加载机制

目录作为模块

8. Express

8.1 什么是 Express

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

思考：不使用 Express 能否创建 Web 服务器？
答案：能，使用 Node.js 提供的原生 http 模块即可。

思考：有了 http 内置模块，为什么还有用 Express？
答案：http 内置模块用起来很复杂，开发效率低；Express 是基于内置的 http 模块进一步封装出来的，能够极大的提高开发效率。

思考：http 内置模块与 Express 是什么关系？
答案：类似于浏览器中 Web API 和 jQuery 的关系。后者是基于前者进一步封装出来的。

8.2 Express 的基本使用

安装
在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用：
npm i express
在学习中我使用的是4.17.1
npm i express@4.17.1

创建基本的 Web 服务器

监听 GET/POST 请求
(app指的是上面创建的express服务端实例)

req：request获取客户端的请求
res：response响应客户端的请求（返回数据给客户端）

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

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

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

是以：为准，名称(id)任意，可以有多个/: 多次获取（动态获取参数）

8.3 托管静态资源

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

假设当前public目录下有如下资源：

现在，你就可以访问 public 目录中的所有文件了：
这里对应上面创建的监听端口号80（80为默认端口号，可以省略不写）
http://localhost/clock.html
http://localhost/clock.css
http://localhost/clock.js

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

托管多个静态资源目录

访问静态资源文件时，express.static() 函数会根据目录的添加顺序查找所需的文件。(根据上述：也就是先查找public在查找files，在查到符合要求的之后就会停止了，不会在往后继续找了)

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

假设当前public目录下有如下资源：

现在，你就可以访问 public 目录中的所有文件了：
这里对应上面创建的监听端口号80（80为默认端口号，可以省略不写）
http://localhost/public/clock.html
http://localhost/public/clock.css
http://localhost/public/clock.js

8.4 nodemon

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

安装 nodemon
在终端中，运行如下命令，即可将 nodemon 安装为全局可用的工具：

当然安装后可能会遇到和我一样的问题：

这是因为某些权限的问题，我们如下设置一下就OK了
电脑搜索 Windows Powershell右键以管理员身份运行

进入页面
执行该条指令：
set-ExecutionPolicy RemoteSigned
输入：y（之后回车）
在执行该指令查看设置情况：
get-ExecutionPolicy
在用nodemon就可以了

使用 nodemon
当基于 Node.js 编写了一个网站应用的时候，传统的方式，是运行 node app.js 命令，来启动项目。这样做的坏处是：代码被修改之后，需要手动重启项目。
现在，我们可以将 node 命令替换为 nodemon 命令，使用 nodemon app.js 来启动项目。这样做的好处是：代码被修改之后，会被 nodemon 监听到，从而实现自动重启项目的效果。

8.5 Express 路由

Express 中的路由
在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、处理函数，格式如下：

METHOD是请求方式（get/post）
PATH是请求路径url
HANDLER是处理函数
举例：

路由的匹配过程
每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。
在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的 URL 同时匹配成功，则 Express 会将这次请求，转交给对应的 function 函数进行处理。

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

路由的使用
最简单的用法
在 Express 中使用路由最简单的方式，就是把路由挂载到 app 上，示例代码如下：

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

将路由抽离为单独模块的步骤如下：
① 创建路由模块对应的 .js 文件
② 调用 express.Router() 函数创建路由对象
③ 向路由对象上挂载具体的路由
④ 使用 module.exports 向外共享路由对象
⑤ 使用 app.use() 函数注册路由模块

创建路由模块
创建router文件夹，在该文件夹下创建user.js文件

注册路由模块

为路由模块添加前缀
类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单：

路由模块儿举例：
创建一个router文件夹，在其下面创建uer.js
//创建路由模块儿
const express=require('express')
const router=express.Router();
router.get("/user/get",(req,res)=>{
  res.send("<h1>hello i am  get</h1>");
})
router.post("/user/post",(req,res)=>{
  res.send("<h1>hello i am post</h1>");
})
module.exports=router;
在创建一个js文件夹，在下面创建一个test_6.js
const express=require("express");
// 导入自定义路由模块儿
//js文件夹与router文件是同级的
const router=require("../router/user.js");
const app=express();
app.use(router);
app.listen(80,()=>{
  console.log("running~~~");
})
可以使用之前安装的nodemon运行

可以在vscode中安装一个Postcode插件，分别发送请求验证
发送post请求

发送get请求

8.6 Express 中间件

什么是中间件
中间件（Middleware ），特指业务流程的中间处理环节。
可以理解为像哨卡一样的，可以对数据进行特殊的处理。
比如处理污水：

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

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

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

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

全局中间件
客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件。
通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件，
示例代码如下：

简化形式:

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

局部中间件
不使用 app.use() 定义的中间件，叫做局部生效的中间件。
示例代码如下：

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

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

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

next()后面不是说不可以写代码，而是根据执行逻辑，在执行到next()方法后，就跳走了，去执行其他的中间件或路由了，当这些都执行了，才调头执行next()后面的代码。

中间件的分类
Express 官方把常见的中间件用法，分成了 5 大类，分别是：

① 应用级别的中间件
② 路由级别的中间件
③ 错误级别的中间件
④ Express 内置的中间件
⑤ 第三方的中间件

应用级别的中间件
通过 app.use() 或 app.get() 或 app.post() ，绑定到 app 实例上的中间件，叫做应用级别的中间件。
代码示例如下：

路由级别的中间件
绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。
它的用法和应用级别中间件没有任何区别。只不过，应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上。
代码示例如下：

错误级别的中间件
错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
格式：错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)。

注意：错误级别的中间件，必须写在所有路由之后！

Express内置的中间件
以Express内置的3 个常用的中间件为例：

① express.static 快速托管静态资源的内置中间件，例: HTML 文件、图片、CSS 样式等（无兼容性）
② express.json 解析 JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
③ express.urlencoded 解析 URL-encoded 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
// 将public目录下的资源快速托管为静态资源（前面已经用过）
app.use(express.static("public"))
// 配置解析application/json格式数据的内置中间件
app.use(express.json());
//配置解析application/x-www-form-urlencoded 格式数据的内置中间件
app.use(express.urlencoded({extended:false}));
/*
如果设置为false，那么对URL-encoded的数据的解析采用querystring库；
如果设置为true，那么采用qs库，允许将富对象和数组编码为url编码格式，
允许使用url编码的json体验。
*/
获取客户端的参数的几种方式：
在express中，可以通过req.query、req.body、req.params三种方法获取用户传递的参数

通过nodejs默认提供的req.query 对象，可以访问到客户端通过（get/post请求都行，通常用于get请求）查询字符串的形式发送到服务器的参数，如果用户没有传参，则默认值为{}
通过 req.body对象，可以访问到客户端通过post请求传递到服务器的body参数，默认值为undefined；

body不是node.js默认提供的，需要载入body-parser中间件才可以使用req.body；
① 运行 npm install body-parser 安装中间件
② 使用 require 导入中间件
③ 调用 app.use() 注册并使用中间件
Express 内置的 express.urlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。
在使用内置的 express.urlencoded时，可以直接调用req.body。
但是在接收x-www-form-urlencoded类型的参数时，不能与字符串做拼接打印输出。否则会报：Cannot convert object to primitive value
本人在学习时，在控制台想要打印body，与“post=”+做了拼接，接收x-www-form-urlencoded类型的参数做打印，然后就GG了。

可以把“+”换成“，”

通过 req.params 对象，可以访问到 URL 中，通过 : 匹配到的动态参数，默认值为{}

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

例如：在 express@4.16.0 之前的版本中，经常使用 body-parser 这个第三方中间件，来解析请求体数据。使用步
骤如下：
① 运行 npm install body-parser 安装中间件
② 使用 require 导入中间件
③ 调用 app.use() 注册并使用中间件
注意：Express 内置的 express.urlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。

综合练习：自定义中间件模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据
实现步骤：

① 定义中间件
② 监听 req 的 data 事件
③ 监听 req 的 end 事件
④ 使用 querystring 模块解析请求体数据
⑤ 将解析出来的数据对象挂载为 req.body
⑥ 将自定义中间件封装为模块

监听 req 的 data 事件
在中间件中，需要监听 req 对象的 data 事件，来获取客户端发送到服务器的数据。
如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以 data 事件可能会触发多次，每一次触发 data 事件时，获取到数据只是完整数据的一部分.
监听 req 的 end 事件
当请求体数据接收完毕之后，会自动触发 req 的 end 事件。
因此，我们可以在 req 的 end 事件中，拿到并处理完整的请求体数据。
querystring 模块解析请求体数据
Node.js 内置了一个 querystring 模块，专门用来处理查询字符串。通过这个模块提供的 parse() 函数，可以轻松把查询字符串，解析成对象的格式。

创建test_2.js

/* 内置了一个 querystring 模块，专门用来处理查询字符串。
通过这个模块提供的 parse() 函数，可以轻松把
查询字符串，解析成对象的格式。 */
const qs=require("querystring");
function myFun(req,res,next) {
    // 用来拼接保存数据
    let str="";
    /**
     * 监听 req 的 data 事件,来获取客户端发送到服务器的数据。
     * 如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。
     * 所以 data 事件可能会触发多次，
     * 每一次触发 data 事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接。
     */
    req.on('data',function(chunk){
        str+=chunk;
    })
    /**
     * 监听 req 的 end 事件
     * 当请求体数据接收完毕之后，会自动触发 req 的 end 事件。
     */
    req.on('end',function(){
        // 将查询字符串解析为对象
        const body=qs.parse(str);
        // 将解析的body挂载为body属性
        /**
        *上游的中间件和下游的中间件及路由之间，共享同一份 req 和 res。
        *因此，我们可以将解析出来的数据，挂载为 req 的自定义属性，命名为 req.body，供下游使用。
        */
        req.body=body;
        // 调用next函数，处理结束，转交给下一位
        next();
    })
}
// 将myFun对接出去
module.exports=myFun;

创建test_1.js

// 导入自定义的test_2模块儿
const myFun=require('./test_2');
const express=require('express');
const app=express();
//添加为全局中间件
app.use(myFun);
app.post("/post",(req,res)=>{
    res.send(req.body);
})
app.listen(80,()=>{
    console.log("runing----");
})

在这里插入图片描述

8.7 CORS 跨域资源共享

资料准备：（提前写好了test1.js , test3.js ,test1.html）
test1.js 创建的服务启动端

const express=require("express");
const app=express();
//导入自定义的路由模块儿
const myrouter=require("./test3.js");
app.use(myrouter);
app.listen(80);

test3.js 路由模块儿

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

// 在这里挂载对应的路由
router.get('/get', (req, res) => {
  // 通过 req.query 获取客户端通过查询字符串，发送到服务器的数据
  const query = req.query
  // 调用 res.send() 方法，向客户端响应处理的结果
  res.send({
    status: 0, // 0 表示处理成功，1 表示处理失败
    msg: 'GET 请求成功！', // 状态的描述
    data: query, // 需要响应给客户端的数据
  })
})

// 定义 POST 接口
router.post('/post', (req, res) => {
  // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
  const body = req.body
  // 调用 res.send() 方法，向客户端响应结果
  res.send({
    status: 0,
    msg: 'POST 请求成功！',
    data: body,
  })
})

// 定义 DELETE 接口
router.delete('/delete', (req, res) => {
  res.send({
    status: 0,
    msg: 'DELETE请求成功',
  })
})

module.exports = router

test1.html 前端页面

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.js"></script>
    <style>
        button {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 27;
            -moz-border-radius: 27;
            border-radius: 27px;
            font-family: Courier New;
            color: #ffffff;
            font-size: 19px;
            padding: 11px 20px 10px 18px;
            text-decoration: none;
        }
        button:hover {
            background: #3cb0fd;
            background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
            background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <button id="btnDelete">DELETE</button>
    <button id="btnJSONP">JSONP</button>
    <script>
        $(function () {
          // 1. 测试GET接口
          $('#btnGET').on('click', function () {
            $.ajax({
              type: 'GET',
              url: 'http://127.0.0.1/get',
              data: { name: 'zs', age: 20 },
              success: function (res) {
                console.log(res)
              },
            })
          })
          // 2. 测试POST接口
          $('#btnPOST').on('click', function () {
            $.ajax({
              type: 'POST',
              url: 'http://127.0.0.1/post',
              data: { bookname: '水浒传', author: '施耐庵' },
              success: function (res) {
                console.log(res)
              },
            })
          })
  
          // 3. 为删除按钮绑定点击事件处理函数
          $('#btnDelete').on('click', function () {
            $.ajax({
              type: 'DELETE',
              url: 'http://127.0.0.1/delete',
              success: function (res) {
                console.log(res)
              },
            })
          })
  
          // 4. 为 JSONP 按钮绑定点击事件处理函数
          $('#btnJSONP').on('click', function () {
            $.ajax({
              type: 'GET',
              url: 'http://127.0.0.1/api/jsonp',
              dataType: 'jsonp',
              success: function (res) {
                console.log(res)
              },
            })
          })
        })
      </script>
</body>
</html>

初识跨域问题
先启动服务端

打开前端页面
发送get或post请求（打开F12先），二者协议不同（file和http）

解决接口跨域问题
解决接口跨域问题的方案主要有两种：
① CORS（主流的解决方案，推荐使用）
② JSONP（有缺陷的解决方案：只支持 GET 请求）
使用 cors 中间件解决跨域问题
cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

使用步骤分为如下 3 步：
① 运行 npm install cors 安装中间件
② 使用 const cors = require(‘cors’) 导入中间件
③ 在路由之前调用 app.use(cors()) 配置中间件

注意事项：

① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口

什么是 CORS

CORS 响应头部 - Access-Control-Allow-Origin

CORS 响应头部 - Access-Control-Allow-Headers

CORS 响应头部 - Access-Control-Allow-Methods

CORS请求的分类
客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类，分别是：
① 简单请求
② 预检请求
简单请求
同时满足以下两大条件的请求，就属于简单请求：

① 请求方式：GET、POST、HEAD 三者之一
② HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-formurlencoded、multipart/form-data、text/plain）

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

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

在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。
复杂请求：
复杂请求会先发送一个预检请求，方法为OPTIONS，只包含头部信息，不包含请求体，单独一个包发给服务器。

预检请求，方法为OPTIONS
预检请求没有请求体
预检请求没有响应体
预检请求就是试探一下服务器那边是否允许自己发请求。如果被拒绝了就不请求了，节省资源。

简单请求和预检请求的区别:

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

JSONP 的概念与特点

创建 JSONP 接口的注意事项
如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否则JSONP 接口会被处理成开启了 CORS 的接口。
示例代码如下：

实现 JSONP 接口的步骤

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

实现 JSONP 接口的具体代码:

在网页中使用 jQuery 发起 JSONP 请求
调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求。
示例代码如下：

9. 数据库

建立在已经具备基础数据库知识的前提下，这里主要是怎们用代码与数据库建立连接和操作库。

9.1 数据库的基本概念

数据库（database）是用来组织、存储和管理数据的仓库.
常见的数据库及分类
市面上的数据库有很多种，最常见的数据库有如下几个：

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

其中，MySQL、Oracle、SQL Server 属于传统型数据库（又叫做：关系型数据库或 SQL 数据库），这三者的设计理念相同，用法比较类似。
而 Mongodb 属于新型数据库（又叫做：非关系型数据库或 NoSQL 数据库），它在一定程度上弥补了传统型数据库的缺陷。
在传统型数据库中，数据的组织结构分为数据库(database)、数据表(table)、数据行(row)、字段(field)这 4 大部分组成。

9.2 在项目中操作数据库的步骤

① 安装操作 MySQL 数据库的第三方模块（mysql）
② 通过 mysql 模块连接到 MySQL 数据库
③ 通过 mysql 模块执行 SQL 语句

在这里插入图片描述

安装 mysql 模块
mysql 模块是托管于 npm 上的第三方模块。它提供了在 Node.js 项目中连接和操作 MySQL 数据库的能力。
想要在项目中使用它，需要先运行如下命令，将 mysql 安装为项目的依赖包：
npm install mysql
配置 mysql 模块
在使用 mysql 模块操作 MySQL 数据库之前，必须先对 mysql 模块进行必要的配置，主要的配置步骤如下：
const mysql=require("mysql");
const db=mysql.createPool({
   host:'127.0.0.1',          //要连接的服务器ip
   user:'root',              // 用户名
   password:'123456',       // 密码
   port:'3307',            // 端口号
   database:'table_03'    //要操作的库名字
})
使用db.query(sql,[参数,…],function(err,results){ }),进行增删改查操作。

查询数据
查询 users 表中所有的数据：

插入数据
向 users 表中新增数据，其中 username 为 Spider-Man，password 为 pcc321。示例代码如下：

便捷方式
向表中新增数据时，如果数据对象的每个属性和数据表的字段一一对应，则可以通过如下方式快速插入数据：

更新数据

便捷方式
更新表数据时，如果数据对象的每个属性和数据表的字段一一对应，则可以通过如下方式快速更新表数据：

删除数据
在删除数据时，推荐根据 id 这样的唯一标识，来删除对应的数据。示例如下：

使用 DELETE 语句，会把真正的把数据从表中删除掉。为了保险起见，推荐使用标记删除的形式，来模拟删除的动作。
所谓的标记删除，就是在表中设置类似于 status 这样的状态字段，来标记当前这条数据是否被删除。
当用户执行了删除的动作时，我们并没有执行 DELETE 语句把数据删除掉，而是执行了 UPDATE 语句，将这条数据对应的 status 字段标记为删除即可。

10 前后端的身份认证

目前主流的 Web 开发模式有两种，分别是：
① 基于服务端渲染的传统 Web 开发模式
② 基于前后端分离的新型 Web 开发模式

10.1 服务端渲染的 Web 开发模式

服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据。代码示例如下：

优缺点:

10.2 前后端分离的 Web 开发模式

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

10.3 身份认证

身份认证（Authentication）又称“身份验证”、“鉴权”，是指通过一定的手段，完成对用户身份的确认。
在 Web 开发中，涉及到用户身份的认证，例如：各大网站的手机验证码登录、邮箱密码登录、二维码登录等。
不同开发模式下的身份认证
① 服务端渲染推荐使用 Session 认证机制
② 前后端分离推荐使用 JWT 认证机制

Session 认证机制

了解 HTTP 协议的无状态性是进一步学习 Session 认证机制的必要前提。

什么是 Cookie

Cookie 在身份认证中的作用

Cookie 不具有安全性

Session 的工作原理

在 Express 中使用 Session 认证

1.安装 express-session 中间件
npm i express-session
2.配置 express-session 中间件
express-session 中间件安装成功后，需要通过 app.use() 来注册 session 中间件，示例代码如下：

3. 向 session 中存数据
当 express-session 中间件配置成功后，即可通过 req.session 来访问和使用 session 对象，从而存储用户的关键信息：

4. 从 session 中取数据
可以直接从 req.session 对象上获取之前存储的数据，示例代码如下：

5. 清空 session
调用 req.session.destroy() 函数，即可清空服务器保存的 session 信息

6.Session 认证的局限性

完整案例：
在这里插入图片描述

// 导入 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')
})

JWT 认证机制

JWT（英文全称：JSON Web Token）是目前最流行的跨域认证解决方案。
JWT 的工作原理

用户的信息通过 Token 字符串的形式，保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用户的身份。
JWT 的组成部分
JWT 通常由三部分组成，分别是Header（头部）、Payload（有效荷载）、Signature（签名）。
三者之间使用英文的“.”分隔，格式如下：

JWT 字符串的示例：

JWT 的三个部分各自代表的含义

JWT 的使用方式
客户端收到服务器返回的 JWT 之后，通常会将它储存在localStorage 或 sessionStorage中。
此后，客户端每次与服务器通信，都要带上这个 JWT 的字符串，从而进行身份认证。推荐的做法是把 JWT 放在 HTTP 请求头的 Authorization 字段中，格式如下：

在 Express 中使用 JWT

1. 安装 JWT 相关的包
npm install jsonwebtoken express-jwt	
⚫ jsonwebtoken 包用于生成 JWT 字符串
⚫ express-jwt 包用于将 JWT 字符串解析还原成 JSON 对象
2. 导入 JWT 相关的包
使用 require() 函数，分别导入 JWT 相关的两个包：

3. 定义 secret 密钥
为了保证 JWT 字符串的安全性，防止 JWT 字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的 secret 密钥：
① 当生成 JWT 字符串的时候，需要使用 secret 密钥对用户的信息进行加密，最终得到加密好的 JWT 字符串
② 当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 密钥进行解密

4. 在登录成功后生成 JWT 字符串
调用 jsonwebtoken 包提供的 sign() 方法，将用户的信息加密成 JWT 字符串，响应给客户端：

30s为token有效时间，可以根据需要自定义设置时长
5. 将 JWT 字符串还原为 JSON 对象
客户端每次在访问那些有权限接口的时候，都需要主动通过请求头中的 Authorization 字段，将 Token 字符串发送到服务器进行身份认证。
此时，服务器可以通过 express-jwt 这个中间件，自动将客户端发送过来的 Token 解析还原成 JSON 对象：

path:[]是以数组的形式，可以放多个路径，/^\/api\//是正则校验
6. 使用 req.user 获取用户信息
当 express-jwt 这个中间件配置成功之后，即可在那些有权限的接口中，使用 req.user 对象，来访问从 JWT 字符串中解析出来的用户信息了，示例代码如下：

7. 捕获解析 JWT 失败后产生的错误
当使用 express-jwt 解析 Token 字符串时，如果客户端发送过来的 Token 字符串过期或不合法，会产生一个解析失败的错误，影响项目的正常运行。我们可以通过 Express 的错误中间件，捕获这个错误并进行相关的处理，示例代码如下:

完整案例：

// 导入 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())

// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
app.use(bodyParser.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(8888, function () {
  console.log('Express server running at http://127.0.0.1:8888')
})