快速上手Node.js

约 12829 字大约 43 分钟

Node.js

2024-11-03

控制台文字格式化

颜色

npm install ansi-colors

const colors = require('ansi-colors');

console.log(colors.red('这是一个红色的文本'));
console.log(colors.blue('这是一个蓝色的文本'));
console.log(colors.green('这是一个绿色的文本'));
console.log(colors.yellow('这是一个黄色的文本'));
console.log(colors.bgCyan('这是一个青色背景的文本'));
console.log(colors.bold('这是一个加粗的文本'));
console.log(colors.underline('这是一个带有下划线的文本'));

清屏

npm install clear

const clear = require('clear');
clear(); // 清屏

符号

// 输出箭头符号
console.log('→');

// 输出勾选符号
console.log('✔');

// 输出错误符号
console.log('✖');

// 输出信息符号
console.log('ℹ');

// 输出警告符号
console.log('⚠');

// 输出其他符号
console.log('★'); // 星号
console.log('♥'); // 心形
console.log('☀'); // 太阳

可以使用Tab键快速补全文件名(路径)

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

const fs = require('fs'); // 导入fs模块

fs.readFile( 文件路径 , 编码格式(可选) , 回调函数 )

const fs = require('fs');
fs.readFile('1.txt','utf-8',function(err,data){ // err代表失败结果，data代表成功结果
console.log(err);
console.log('----------------');
console.log(data);
})

fs.writeFile( 文件路径，写入内容，格式（可选），回调函数)

const fs = require('fs');
fs.writeFile('1.txt','Hello World!','utf-8',function(err){
console.log(err);
})

\r\n代表换行

使用绝对路径时候注意一个斜线在JavaScript中代表转译，所以使用两个斜线即可

__dirname表示当前文件所处的目录

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

const path = require('path') // 导入Path模块

const path = require("path")
const pathStr = path.join('/a','/b/c','../','./d','e') // ../代表抵消前一个路径，(返回)
console.log(pathStr); // \a\b\d\e
const pathStr2 = path.join(__dirname,'1.txt')
console.log(pathStr2); // 输出当前文件所处的目录

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

const path1 = "Y:\百日工作\Node.js";
const fullNmae = path.basename(path1);
console.log(fullNmae); // node.js

const fullNmae1 = path.basename(path1,'.js');
console.log(fullNmae1); // node
//传入参数有扩展名时，返回值将省略扩展名

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

const fpath = 'a/b/c/index/index.html';
const fext = path.extname(fpath)
console.log(fext); // .html

HTTP

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

const http = require('http')
const server = http.createServer() // 创建web服务器实例
server.on("request",function(req,res){
    console.log("Someone visit our web server"); // 为服务器实例绑定request事件，监听客户端请求
}) 
server.listen(8080,function(){
console.log("server runing at http://127.0.0.1:8080"); // 启动服务器
})

req请求对象中存储了与客户端相关的数据或者属性

req.url客户端请求的URL地址

req.method客户端的method请求类型

req

const http = require('http')
const server = http.createServer()
server.on("request",function(req,res){
    console.log("Someone visit our web server");
    const url = req.url;
    const method = req.method;
    const str = `请求地址:${url},请求类型${method}`
    console.log(str);
})
server.listen(8080,function(){
console.log("server runing at http://127.0.0.1:8080");
})
//http://127.0.0.1:8080/index.html
// /index.html
// GET

res

访问与服务器相关的数据或者属性

res.end(str) // 方法用于向客户端发送指定内容，并结束本次请求的处理过程

解决中文乱码问题

设置响应头content-Type的值为text/html：charset=utf-8

Content-Type表示以什么编码格式解析返回的内容

   res.setHeader('Content-Type','text/html; charset=utf-8')

根据不同的url地址响应不同的html内容

const http = require('http')
const server = http.createServer()
server.on("request", function (req, res) {
    console.log("Someone visit our web server");
    const url = req.url;
    const method = req.method;
    let content = '<  h1>404 Not found!<  /h1>';
    if (url === '/' || url === '/index.html') {
        content = '<  h1>首页<  /h1>'
    }
    else if (url === '/about.html') {
        content = '<  h1>关于<  /h1>'
    }
    const str = `\r\n请求地址:${url},请求方式:${method}`
    console.log(str);
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    res.end(content)
})
server.listen(8080, function () {
    console.log("server runing at http://127.0.0.1:8080");
})

模块化

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

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

好处：提高复用性，可维护性，以及按需加载

模块化规范

例如：

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

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

内置模块（内置模块是由Node官方提供的，例如：fs，path，http等）自定义模块（用户创建的每个JS文件，都是自定义模块）第三方模块（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，并且使用第三方模块需要下载）

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

在使用require()加载自定义模块时可以省略后缀名

模块作用域

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

作用：用于防止全局变量污染的问题

共享模块成员

module对象

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

module.exports对象，将模块内的成员共享出去，提供给外界使用

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

module.exports.username='zs'; //向module.exports对象上挂载username属性
module.exports.sayHello= function(){ // ...
    console.log("Hello World!");
}

const user = require('./user')
console.log(user); // { username: 'zs', sayHello: [Function (anonymous)] }

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

module.exports.username='zs'; //向module.exports对象上挂载username属性
module.exports.sayHello= function(){ // ...
    console.log("Hello World!");
}

module.exports={
    name:'bill',
    say(){
        console.log("Hi!");
    }
}

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

console.log(exports);
console.log(module.exports);
console.log(exports === module.exports); // true

module.exports和exports的使用误区

注意：require()模块时，得到的永远是module.exports指向的对象

为了防止混乱，建议在一个模块中不要同时使用exports和module.exports

模块化规范

Node.js遵循了CommonJS模块化的规范，CommonsJS规定了模块化的特性和各模块之间的如何相互依赖

每个模块内部，module变量代表当前模块 module变量是一个对象，它的exports属性（即module.exports）是对外的接口加载某个模块，其实是加载模块的module.exports属性，require()方法用于加载模块

包

Node中的第三方模块又叫做包

作用：

由于Node内置模块提供了一些底层的API，导致在基于内置模块进行开发项目中，效率很低

包是基于内置模块封装出来的，提供了更高级，更方便的API，极大的提高了开发效率

全球最大的包共享平台：https://www.npmjs.com/

下载地址：https://registy.npmjs.org/

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

包的语义化规范：

例如：2.24.0

第一位数字：大版本

第二位数字：功能版本

第三问数字：Bug修复版本

版本提升规则：只要前面的版本号增加了，则后面版本号归零。

package.json配置文件记录配置信息，如

项目的名称，版本号，描述等 项目中使用了哪些包 开发期间使用的包部署时需要的包

注意：在项目开发中，要把node_modules文件夹添加到.gitignore忽略文件中。

使用npm init -y命令快速创建package.json文件

注意：上述命令只能在英文目录下成功运行！即项目文件夹名称一定要使用英文名称，不要有空格。

npm install命令会一次性把所有依赖的包安装

npm uninstall卸载包

如果某些包只在项目开发阶段会用到，在项目上线之后就用不到了，则建议把这些包记录到devDependencies节点中，如果开发和上线都要用到，则记录到dependencies节点中。

//安装指定包，并记录到devDependencies节点中

npm i 包名 -D

完整写法：npm install 包名 --save-dev

查看当前的下载镜像地址：npm config get registry

切换镜像源地址：npm config set registry=https://registry.npm.taobao.org/

nrm

为了更方便的切换下包的镜像源，可以安装nrm工具。

npm i nrm -g // 全局安装

nrm ls查看所有可用的镜像源

nrm use < name>切换地址

分类

使用npm包管理工具下载的包，分为两大类：

项目包开发依赖包（记录在devDependencies中）核心依赖包（记录在dependencies中）

全局包 npm i < name> -gnpm uninstall < name> -g 只有工具性质的包，才有全局安装的必要性 npm root -g查看全局包路径

i5ting_toc

i5ting_toc是一个可以把md文件转化成html页面的工具

npm install -g i5ting_toc // 全局安装

i5ting_toc -f < 文件路径> -o // 使用

-f代表要转换的文件路径 -o转换完成后自动打开浏览器

注意：转换失败使用管理员cmd即可

包结构

一个规范的包，组成结构必须符合：

包必须以单独的目录而存在

包的顶级目录下必须包含package.json这个包管理配置文件

package.json必须包含name，version，main这三个属性，分别代表名字，版本号，包的入口（require加载的文件）

Express

Express是基于Node.js平台，快速，开放，极速的Web开发框架

通俗理解：Express的作用和Node.js内置http模块类似，是专门用来创建web服务器的

本质是一个第三方的包地址：http://www.expressjs.com.cn/

安装：npm i express@4.17.1

const express = require("express") // 导入Express
const app = express() // 创建Web服务器
app.listen(8080,()=>{ // 调用app.listen(端口号，回调函数)来启动服务器
    console.log("Express server running at http://127.0.0.1");
})

监听GET请求

app.get("请求URL",function(req,res){/*处理函数*/})
//req：请求对象，包含了与请求相关的属性和方法
//res：响应对象，包含了与响应相关的属性与方法

监听POST请求

app.post("请求URL",function(req,res){/*处理函数*/})
//req：请求对象，包含了与请求相关的属性和方法
//res：响应对象，包含了与响应相关的属性与方法

内容响应

res.send({
    name:"as",
    age:12,
    sex:'boy'
})

获取参数

获取URL中携带的查询参数

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

app.get("/", function (req, res) {/*处理函数*/
    console.log(req.query);
    res.send(req.query)
    
})
//http://127.0.0.1:8080/?name=zs&age=18

动态参数

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

app.get("/user/:id", function (req, res) { // 动态参数id
    res.send(req.params)
})

//http://127.0.0.1:8080/user/12
//{"id":":12"}

app.get("/user/:id/:name", function (req, res) {/*处理函数*/
    res.send(req.params)
    console.log(req.params);
})
//http://127.0.0.1:8080/user/2/23
//{"id":"2","name":"23"}

托管静态资源

express.static()

用于创建一个静态资源服务器，例如：通过以下代码就可以将public目录下的图片，css文件，JS文件对外开放了

app.use(express.static("pubilc"))
//现在外界就可以访问public的所有文件

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

http://localhost:3000/images/1.jpg http://localhost:3000/css/style.css http://localhost:3000/js/index.js

app.use(express.static(path.join(__dirname,'home')))
console.log(path.join(__dirname,'home'));

//http://127.0.0.1:8080/index.html
//http://127.0.0.1:8080/css/main.css

托管多个静态目录

多次调用即可

注意：当外界访问两个文件夹中相同文件（名）时，会根据调用顺序返回文件

挂载路径前缀

app.use('/public',express.static(path.join(__dirname,'home')))
//需要通过指定前缀才能访问到文件
//http://127.0.0.1:8080/public/index.html

nodemon

在编写和调试Node的时候，如果修改了代码需要手动关闭然后再启动，太繁琐

它可以监听项目文件的变动，当代码修改后，nodemon会自动重启项目，极大提升开发效率

Express路由

路由指映射关系

例子：

按键1-业务查询按键2-手机充值按键3-业务办理按键4-人工客服

路由是按键和服务之间的映射关系

所以：

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

共有三个部分组成：

请求类型 (method) 请求URL (path) 处理函数 (handlek)

app.method(path,handlek)
// method:get post ...
// path:...
// handlek:...

app.post("/user", function (req, res) {/*处理函数*/
    res.send("请求成功")
})

模块化路由

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

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

// 创建路由模块
const express = require("express")
const router = express.Router() //  创建路由对象

router.get("/", function (req, res) {
    res.send("Get Success!")
    console.log("Get!");
})
router.post("/", function (req, res) {
    console.log("Post!");
    res.send("Post Success!")
})

module.exports = router // 向外导出路由对象

// 注册路由模块
const express = require('express');
const app = express()

const userRouter = require('./Router') // 导入路由模块
app.use(userRouter) // 注册路由模块

app.listen(8080, () => {
    console.log("express server running at http://127.0.0.1:8080");
})

app.use()函数的作用，就是来注册全局中间件的

路由模块前缀

app.use('/api',userRouter)

中间件

中间件，特指业务流程的中间处理环节

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

express的中间件本质就是一个function处理函数，express格式如下：注意：中间件函数的形参列表中必须包含next函数，而路由处理函数只有包含req和res

app.get('/'.function(req,res,next){
        next();
})
app.listen(3000)

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

//常量mw所指向的就是一个中间件函数
const mw = function (req, res, next) {
    console.log("中间件函数");
    next()
    //注意：在当前中间件业务处理完毕后必须调用next()函数表示把流转关系转交给下一个中间件或者路由
}

全局生效的中间件

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

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

app.use((req, res, next) => {
    next()
})

中间件的作用：

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

app.use((req, res, next) => {
    const time = Date.now()
    req.time= time // 为req对象挂载一个自定义属性，从而把时间共享给所有的路由或者中间件
    next()
})
app.get('/', (req, res) => {
    res.send("Home pags"+req.time)
})

定义多个全局中间件

app.use((req, res, next) => {
    const time = Date.now()
    req.time= time // 为req对象挂载一个自定义属性，从而把时间共享给所有的路由或者中间件
    console.log('中间件1');
    next()
})
app.use((req, res, next) => {
    console.log('中间件2');
    
    next()
})
app.get('/', (req, res) => {
    res.send("Home pags"+req.time)
})

局部生效的中间件

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

const mw = function (req, res, next) {
    console.log("局部中间件函数");
    next()
}
app.get('/qwe',mw,function(req,res){
    res.send('zjj');
    console.log('局部中间件log');
})

定义多个局部中间件

const mw1 = function (req, res, next) {
    console.log("局部中间件函数1");
    next()
}
const mw2 = function (req, res, next) {
    console.log("局部中间件函数2");
    next()
}
app.get('/qwe',mw1,mw2,function(req,res){
    res.send('zjj')
    console.log('局部中间件log');
})
app.get('/qwe',[mw1,mw2],function(req,res){
    res.send('zjj')
    console.log('局部中间件log');
})

中间件的注意事项

一定要在路由之前注册中间件

客户端发送过来的请求，可以连续调用多个中间件进行处理

执行完中间件业务代码后，不要忘记调用next()函数

为了防止代码逻辑混乱，调用next()函数后不要再了写额外代码

连续调用多个中间件的时，多个中间件之间，共享req和res对象

中间件分类

应用级别的中间件

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

路由级别的中间件

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

错误级别的中间件

作用：专门捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题 -

格式：错误中间件的function处理函数中，必须有4个形参，分别为（err,req,res,next）

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

   app.get('/', (req, res) => {
       throw new Error("error")
       res.send("Home pags"+req.time)
   })
   app.use(function(err,req,res,next){
       console.log('错误:',err.message);
       res.send('错误:',err.message)
   })
   //定义错误级别的中间件，用于捕获整个项目的异常错误，防止程序的崩溃/停止

Express内置的中间件

Express内置了三个常用的中间件，极大提高开发效率和体验

express.static快速托管静态资源的内置中间件，例如：HTML，图片，css文件等

express.json解析JSON格式的请求体数据类型（有兼容性，仅在4.16.0+使用）

express.urlencoded解析 URL-encoded格式的请求体数据（有兼容性）

  // app.use(express.json)
  //  app.use(express.urlencoded({extended:false}))
  // 在服务器，可以使用req.body这个属性，来接收客户端发送过来的请求数据
  // 默认情况下，如果不配置解析表单数据的中间件，则req.body默认等于undefined
  // 除了错误级别中间件，其他的中间件必须在路由之间配置

  //JSON
  app.use(express.json)
  app.post('/data', function (req, res) {
      console.log(req.body);
      res.send("Success")
  })

  //URL
  app.use(express.urlencoded({ extended: false }))
  app.post('/book', function (req, res) {
      console.log(req.body);
      res.send("Success")
  })

第三方中间件

非Express官方内置的，而是由第三方开发出来的中间件，在项目中，按需下载并配置第三方中间件，从而提高项目的开发效率

例如：body-parser，这个中间件来解析请求体数据

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

注意：Express内置的中间件，就是基于body-parser这个中间件进一步封装的

  const express = require('express')

  const app = express()

  const parser = require('body-parser')
  app.use(parser.urlencoded({extended:false}))

  app.post('/user',(req,res)=>{
      console.log(req.body);
      res.send("OK")
  })

  app.listen(99,function(){
      console.log("http://127.0.0.1:99");
  })

自定义中间件

// 注册路由模块
const express = require('express');
const colors = require('ansi-colors')
const clear = require('clear')
const qs = require('querystring')
const app = express()
clear()
app.use((req, res, next) => { // 监听req对象的data事件，获取客户端发送到服务器的数据
    let str = '';
    req.on('data', (chuck) => {
        str += chuck
    })
    req.on('end',()=>{ //当数据接收完毕后，会自动触发req的end事件
        const body = qs.parse(str)
        console.log(body); // 完整的请求体
        req.body=body
        next()
    })
})

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


app.listen(9090, () => {
    console.log("express server running at:", colors.green('http://127.0.0.1:9090'));
})

接口

创建API路由模块

const express = require("express")
const colors = require('ansi-colors')

const router = express.Router() //  创建路由对象

router.get("/get", function (req, res) {
    const query = req.query // 获取客户端通过查询字符串，发送到服务器的数据
    res.send({
        status:0,   // 状态码，0表示成功，1表示失败
        msg:'GET Success', // 状态描述
        data:query // 响应给客户端的具体数据
    })
    console.log(colors.green('✔ Get!'));
})



// 注意：如果要获取URL-encoded格式的数据，必须配置中间件app.use(express.urlencoded({extended.false}))
router.post("/post", function (req, res) {
    const body = req.body
    console.log("Post!");
    res.send({
        status:0,   // 状态码，0表示成功，1表示失败
        msg:'POST Success', // 状态描述
        data:body // 响应给客户端的具体数据
    })
})

module.exports = router // 向外导出路由对象 


//------------------------------------
// 注册路由模块
const express = require('express');
const colors = require('ansi-colors')
const clear = require('clear')
const app = express()
clear()

const router = require('./Router')
// app.use(express.json)
app.use(express.urlencoded({extended:false}))
app.use('/api',router)

app.listen(9090, () => {
    console.log("express server running at:", colors.green('http://127.0.0.1:9090'));
})

CORS跨域资源共享

协议不同导致无法访问

解决方案：

CORS（主流的解决方案）

JSONP（有缺陷的解决方案，指支持GET）

使用CORS中间件解决跨域问题

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

运行npm install cors 安装中间件
使用const cors = require('cors')导入中间件
在路由之间调用app.use(cors())配置中间件

//一定要在路由之间调用app.use(cors())配置中间件！！！
var cors = require('cors')
app.use(cors())

// 完整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.staticfile.net/jquery/3.4.1/jquery.min.js"><   /script>

<   /head>

<   body>
    <   button id="btnget">Get<   /button>
    <   button id="btnpost">Post<   /button>
    <   script>
        $(function () {
            $('#btnget').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:9090/api/get',
                    data: {
                        name: "张三",
                        age: 20,
                        Sex: '男',
                    },
                    success: function (res) {
                        console.log(res);
                    },
                })
            })

            $(function () {
                $('#btnpost').on('click', function () {
                    $.ajax({
                        type: 'POST',
                        url: 'http://127.0.0.1:9090/api/post',
                        data: {
                            name: "李四",
                            age: 20,
                            Sex: '女',

                        },
                        success: function (res) {
                            console.log(res);
                        }
                    })
                })
            })
        })
    <   /script>
<   /body>

<   /html>

什么是CORS

指跨资源共享，由一系列的HTTP响应头组成，这些HTTP响应头决定了浏览器是否阻止前端JavaScript代码跨域获取资源

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

响应的结果被浏览器拦截，网页无法获取到跨域响应的数据

注意事项：

CORS主要在服务器端进行配置，客户端浏览器无需做任何额外的配置，即可开启CORS的接口

CORS在浏览器中有兼容性问题，只有支持XMLHttpRequest Level 2的浏览器，才能正常访问CORS的服务端接口（例如：IE10+,Chrome4+,FireFox3.5+）

CORS响应头

Access-Control-Allow-Origin

响应头中可以携带一个Access-Control-Allow-Origin字段语法:

Access-Control-Allow-Origin: < Origin> | *

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

res.setHeader("Access-Control-Allow-Origin",'Http://itcast.cn')
// 表示我们的服务器只支持这个域名下所有网页的跨域请求

通过Access-Control-Allow-Origin响应头可以控制允许哪些网页或者网站来请求我们的服务器接口

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

res.setHeader("Access-Control-Allow-Origin",'*')

Access-Control-Allow-Headers

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

略...

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

res.setHeader('Access-Control-Allow-Header','Content-Type','X-Custon-Header')
//手动设置响应头 允许使用Content-Type请求头，也允许使用X-Custon-Header请求头

Access-Control-Allow-Methods

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

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

// 只允许 POST，GET , PUT , HEAD 请求方式
res.setHeader('Access-Control-Allow-Methods','POST','GET','HEAD','DELETE')
// 允许所有HTTP请求方式
res.setHeader('Access-Control-Allow-Methods','*')

CORS请求的分类

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

简单请求

同时满足以下请求方式：GET,POST,HEAD三者之一 http头部信息不超过以下几种字段：无自定义头部字段，Accept,Accept-Language,Content-Language,DPR,Downlink,Sava-Data,Viewport-Width,Content-Type（只有三个值application/x-www-form-URL encoded,multipart/form-data.text/pain）

预检请求

符合以下其一请求方式：GET,POST,HEAD之外的请求Method类型请求头中包含了自定义头部字段 向服务器发送了application/JSON格式的数据

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

区别：

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

// 路由模块 所有代码
const express = require("express")
const colors = require('ansi-colors')

const router = express.Router() //  创建路由对象

router.get("/get", function (req, res) {
    const query = req.query // 获取客户端通过查询字符串，发送到服务器的数据
    res.send({
        status:0,   // 状态码，0表示成功，1表示失败
        msg:'GET Success', // 状态描述
        data:query // 响应给客户端的具体数据
    })
    console.log(colors.green('✔ Get!'));
})



// 注意：如果要获取URL-encoded格式的数据，必须配置中间件app.use(express.urlencoded({extended.false}))
router.post("/post", function (req, res) {
    const body = req.body
    console.log("Post!");
    res.send({
        status:0,   // 状态码，0表示成功，1表示失败
        msg:'POST Success', // 状态描述
        data:body // 响应给客户端的具体数据
    })
})

router.delete('/delete',function(req,res){
    res.send({
        status:0,   // 状态码，0表示成功，1表示失败
        msg:'DELETE Success', // 状态描述
    })
})
module.exports = router // 向外导出路由对象

// 主服务器端 所有代码
// 注册路由模块
const express = require('express');
const colors = require('ansi-colors')
const clear = require('clear')
const app = express()
clear()

// app.use(express.json)

app.use(express.urlencoded({ extended: false }))
var cors = require('cors')
app.use(cors())

const router = require('./Router')
app.use('/api', router)

app.listen(9090, () => {
    console.log("express server running at:", colors.green('http://127.0.0.1:9090'));
})

// 测试网页
<   !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.staticfile.net/jquery/3.4.1/jquery.min.js"><   /script>

<   /head>

<   body>
    <   button id="btnget">Get<   /button>
    <   button id="btnpost">Post<   /button>
    <  button id="btndelete">Delete<  /button>
    <  script>
        $(function () {
            $('#btnget').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:9090/api/get',
                    data: {
                        name: "张三",
                        age: 20,
                        Sex: '男',
                    },
                    success: function (res) {
                        console.log(res);
                    },
                })
            })
            $('#btndelete').on('click', function () {
                $.ajax({
                    type: 'DELETE',
                    url: 'http://127.0.0.1:9090/api/delete',
                    success: function (res) {
                        console.log(res);
                    },
                })
            })
            $(function () {
                $('#btnpost').on('click', function () {
                    $.ajax({
                        type: 'POST',
                        url: 'http://127.0.0.1:9090/api/post',
                        data: {
                            name: "李四",
                            age: 20,
                            Sex: '女',

                        },
                        success: function (res) {
                            console.log(res);
                        }
                    })
                })
            })
        })
    <  /script>
<  /body>

<  /html>

注意：建议在火狐浏览器中测试，Chrome浏览器中存在问题（无法演示预检请求）

JSONP

概念：浏览器通过< script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的引用。这种请求数据的方式叫 JSONP

特点：

JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象 JSONP仅支持GET请求，其他POST，PUT，DELETE不支持

创建JSONP接口注意事项：

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前申明JSONP的接口，否则JSONP接口会被处理成开启了CORS的接口。

// 优先创建JSONP接口，即这个接口不会被处理成CORS接口
app.use('api/jsonp',(req.res)=>{...})
// 再配置CORS中间件，后续所有接口都会被处理成CORS接口
app.use(cors())

实现JSONP

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

原理：客户端通过Script标签，把一个函数的名发送给服务器，然后希望服务器返回这个函数的调用，在调用期间把数据传进来就行了

// 服务端
app.get('/api/jsonp', (req, res) => {
    // 获取客户端发送过来的回调函数的名字
    const funName = req.query.callback
    // 得到要通过 JSONP形式发送给客户端的数据
    const data = { name: 'zs', age: 33 }
    // 根据前两步得到的数据，拼接一个函数调用的字符串
    const scriptStr = `${funName}(${JSON.stringify(data)})`
    // 将拼接得到的字符串响应给客户端的<  script>标签进行解析
    res.send(scriptStr)
})

// 客户端 

//    <  button id="btnJSONP">JSONP<  /button>

 $('#btnJSONP').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:9090/api/jsonp',
                    dataType:'jsonp', // 请求数据类型
                    success: function (res) {
                        console.log(res);
                    },
                })
            })

数据库与身份认证

MySQL Server :专门来提供数据存储和服务的软件

MySQL Workbench：可视化的MySQL管理工具，通过它，可以方便的操作存储在MySQL Server中的数据

基本使用

DataType数据类型：

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

字段的特殊标识：

PK (Primary Key) 主键-唯一表示 NN (Not Null) 值不允许为空 UQ (Unique) 值唯一 AI (Auto Increment) 值自动增长

写入数据

右键表选择第一个选项

注意：

ID不需要手动输入，因为它是自增字段

status也不需要输入，因为默认值是0，表示状态正常

写入完后，点击Apply保存

// 从FROM指定的表中，查询除所有的数据，*表示所有项
select * from <  表名>
// 从FROM指定的表中查询出列名称（字段）的数据
select 列名称 FROM 表名称

注意：SQL语句中的关键字对大小写不敏感，SELECT等于select

使用--注释语句，记得加空格

// INSERT INTO 语句用于向数据表中插入新的数据行
// 向指定的表中，插入如下几列数据，列的值通过values一一指定
// 注意：列和值要一一对应，多个列和多个值之间，使用英文的逗号分隔
INSERT INTO table_name(列1,列2...) values(值1,值2...)
//例句：
insert into users(username,password) values('tony stark','098123')

// Update 语句用于修改表中的数据
// 用UPDATE指定要更新哪个表中的数据
// 用SET指定列对应的值
// 用WHERE 指定更新的条件
UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值
// 例如：
UPDATE users set password = '888888' where id = 4
//把用户id为4的密码修改为'888888'
update users set password = 'admin123' , status = '1' where id = 2
// 修改多个数据

//DELETE语句用于删除表中的行
//从指定的表中，根据WHERE条件，删除对应的行
//DELETE FROM 表名称 WHERE 列名称 = 值

WHERE（where）语句用于限定选择的标准，在select，update，delete语句中，皆可使用where语句来限定选择标准

=等于 < >不等于 >大于 < 小于 >=大于等于 < =小于等于 BETWEEN在某个范围 LIKE搜索某种模式

注意：在某些版本的SQL中，操作符< >可以写成!=

select * from users where username<  >'ls'

AND和OR可在WHERE语句中把两个或者多个条件结合起来

select * from users where status = 0 and id > 1

ORDER BY语句用于根据指定的列队结果进行排序

默认安按照升序ASC，如果要使用降序可以使用DESC关键字

select * from users order by status DESC
select * from users order by status ASC

多重排序

对users表中的数据，先按照status字段进行降序排序，再按照username的字母进行升序排序

select * from users order by status DESC ,username ASC

Count(*)函数用于返回查询结果的总数据条数

SELECT COUNT(*) FROM 表名称

使用AS为列设置别名

SELECT COUNT(*) AS TOTAL FROM users where status=0
             
select username as 用户名,password as 密码 from users

在项目中操作MySQL

步骤：

安装操作MySQL数据库的第三方模块(MySQL)
通过MYSQL模块连接到MySQL数据库
通过MySQL模块执行SQL语句

安装MySQL模块npm install mysql

调用db.query()函数，指定要执行的SQL语句，通过回调函数拿到执行的结果

// 检测MYSQL是否能正常工作
db.query("SELECT 1", (err, results)=> {
    if (err) return console.log(err.message);
    // 只要打印出[RowDataPacket {'1':1}] 的结果，就证明数据库连接正常
    console.log(results);
})

查询数据

db.query("select * from users",(err,results)=>{
    if(err) return console.log(err.message);
    console.log(results);
})
// 注意：如果执行的是select查询语句，则执行的结果是数组
// 结果：
[
  RowDataPacket {        
    id: 1,
    username: 'zs',      
    password: '123456',  
    status: 0
  },
  RowDataPacket {        
    id: 2,
    username: 'ls',      
    password: 'admin123',
    status: 1
  },
  RowDataPacket {
    id: 3,
    username: 'xh',
    password: '654321',
    status: 0
  }
]

插入数据

// 向users表中新增数据，其中username为Spider-Man ，password为pcc1234

// 要插入到users表中的对象
const user = { username: "spider-Man", password: 'spcc1122' }
// 待执行的sql语句，其中英文的？表示占位符
const sqlStr = 'insert into users (username,password) values (?,?)'
// 使用数组的样式，依次为？占位符指定的值
db.query(sqlStr,[user.username,user.password],(err,results)=>{
    if(err) return console.log(err.message);
    if(results.affectedRows === 1) {
        console.log("插入成功!");
    }
})

注意：id具有唯一性，只要这个id曾经被别人占用过，哪怕把对应的数据删除了，那这个id也不能被重复占用(使用)

便捷方式

插入数据的便捷方式

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

const user = { username: "李四", password: 'nbgls2333' }
const sqlStr = 'insert into users set ?'
db.query(sqlStr, user, (err, results) => {
    if (err) return console.log(err.message);
    if (results.affectedRows === 1) {
        // console.log(results);
        console.log("插入成功!");
    }
})

更新数据

// 要更新的数据对象
const user = { id: 1, username: 'aaa', password: '000' }
// 待执行的SQL语句
const sqlStr = 'update users set username=?,password=? where id?'
// 调用db.query()执行SQL语句，同时使用数组依次为占位符指定具体的值
db.query(sqlStr, [user.username, user.password, user.id], (err, results) => {
    if (err) return console.log(err.message);
    // 注意： 执行了update语句之后，执行的结果也是一个对象，可以通过affectedRows判断成功与否
    if (results.affectedRows === 1) {
        console.log('更新数据成功！');
    }
})

便捷方式

// 要更新的数据对象
const user = { id: 7, username: 'bbb', password: '000' }
// 待执行的SQL语句
const sqlStr = 'update users set ? where id=?'
// 调用db.query()执行SQL语句，同时使用数组依次为占位符指定具体的值
db.query(sqlStr, [user,user.id], (err, results) => {
    if (err) return console.log(err.message);
    if (results.affectedRows === 1) {
        console.log('更新数据成功！');
    }
})

删除数据

推荐使用ID这样的唯一标识来删除对应的数据

//要执行的语句
const sqlStr = 'delete from users where id=?'
// 为了占位符指定具体的值
// 注意：如果SQL语句中有多个占位符，则必须使用数组每个占位符指定具体的值
// 如果只有一个值，则可以省略数组
db.query(sqlStr, 7, (err, results) => {
    if (err) return console.log(err.message);
    if (results.affectedRows === 1) {
        console.log('删除数据成功！');
    }
})

标记删除

使用delete语句，会真的把数据从表中删除，为了保险起见，推荐使用标记删除的形式，来模拟删除的动作

所谓标记删除就是在表中设置类似status这样的状态字段，来标记当前这条数据是否被删除

db.query('update users set status = 1 where id=?', 6, (err, results) => {
    if (err) return console.log(err.message);
    if (results.affectedRows === 1) {
        console.log('标记删除数据成功！');
    }
})

身份认证

web开发模式

基于服务端渲染的传统Web开发模式

服务器发送给客户端的HTML页面，是在服务器通过字符串拼接，动态生成的。因从，客户端不需要Ajax这样的技术额外请求页面的数据

优点：

前端耗时少，因为服务端负责生成HTML内容，浏览器只需要直接渲染即可，尤其是移动端，更省电
有利于SEO，因为服务器响应的是完整的HTML页面内容，所以爬虫更容易爬取信息，更利于SEO搜索引擎
缺点：
占用服务器资源，即服务器端完成HTML页面的拼接，如果请求过多，会对服务器造成一定的访问压力

不利于前后端分离，开发效率低。无法进行分工合作，尤其是对于前端复杂度高的项目，不利于开发效率

  app.get('./', (req, res) => {
      const user = { name: 'ee', age: 11 }
      const html = `<  h1>姓名:${user.name},年龄：${user.age}<  /h1>`
      res.send(html)
  })

基于前后端分离的新型Web开发模式

依赖于Ajax技术的广泛应用，就是后端只负责提供API接口，前端使用Ajax调用接口的开发模式优点：开发体验好，前端专注UI页面开发，后端专注API的开发，且前端有更多的选择性用户体验好，Ajax的应用，极大提高了用户的体验，可以轻松的实现页面局部刷新缺点：不利于SEO，因为完整的HTML页面信息需要在客户端通过JS动态拼接完成，所以爬虫无法爬取页面有效信息（可以使用Vue，react等框架的SSR(server side render)技术能很好的解决SEO问题）

如何选择开发模式？

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

比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的SEO，则推荐使用服务器端渲染（SSR）而类似后台管理项目，交互性强，不需要考虑SEO，则推荐使用前后端分离（CSR）

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

概念

身份认证又称身份验证，鉴权，是指通过一定的手段，完成对用户身份的确认

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

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

Session

http协议的无状态性

指的是客户端的每次HTTP请求都是独立的，连续多个请求之间没有直接关系，服务器不会主动保留每次HTTP请求的状态

如何突破HTTP无状态的限制？

比如：对于超市来说。为了方便收银员在进行结算的时候给VIP客户打折，超市会为每个VIP用户发放会员卡

对于客户端和服务器之间同理

注意：现实生活中的会员卡身份认证方式，在Web开发中的专业术语叫做Cookie

当客户端用户登录成功后，服务器会向客户端发送一个Cookie（身份认证标识）

之后如果再进行登录，客户端把cookie发送给服务器，来进行客户端身份认证

通过Cookie即可突破http协议无状态限制

Cookie是存储在用户浏览器中的一段不超过4kb的字符串。

它有一个名称（name），一个值（values）和其他几个用于控制Cookie有效期，安全性，使用范围的可选属性组成。

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

特性：

自动发送域名独立过期时限 4kb限制

cookie在身份认证中的作用

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

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

Cookie不具有安全性

由于Cookie是存储在浏览器的，而且浏览器也提供了读写Cookie的API，因此Cookie很容易伪造，不具有安全性，因此不建议服务器将重要的隐私数据，通过Cookie的形式发送给浏览器

注意：千万不要使用Cookie存储重要的隐私数据！比如用户的身份信息，密码等

提高身份认证的安全性

为了防止客户伪造会员卡，收银员在拿到客户出示的会员卡后，可以在收银机上进行刷卡认证，只有收银机确认存在的会员卡，才能被正常使用

原理

Session的工作原理

...将登录后的用户信息存储在服务器的内存中，同时生成对应的Cookie

后续服务器会根据请求头中携带的Cookie，从内存中查找对应的信息

安装

安装Express-session中间件

npm install express-session

配置express-session中间件

中间件安装成功之后，需要通过app.use()来注册session中间件

const session = require('express-session')
app.use(session({
  secret: 'item',
  resave: false,
  saveUninitialized: true
}))

当Express-session中间件配置完成后，即可通过req.session来访问和使用session对象，从而存储用户的关键信息

req.session.user = req.body // 将用户的信息存储到session
req.session.islogin = true // 将用户的状态存储到Session

从session中取数据

可以直接从req.session对象上获取之前存储的数据

 if (!req.session.islogin) {
    return res.send({ status: 1, msg: 'fail' })
  }
  res.send({ status: 0, msg: 'success', username: req.session.user.username })

清空session

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

req.session.destroy()

代码

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

// TODO_01：请配置 Session 中间件
const session = require('express-session')
app.use(session({
  secret: 'item',
  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 中
  req.session.user = req.body // 将用户的信息存储到session
  req.session.islogin = true // 将用户的状态存储到Session
  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(8080, function () {
  console.log('Express server running at http://127.0.0.1:8080')
})

// index.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="./jquery.js"><  /script>
<  /head>

<  body>
  <  h1>首页<  /h1>

  <  button id="btnLogout">退出登录<  /button>

  <  script>
    $(function () {

      // 页面加载完成后，自动发起请求，获取用户姓名
      $.get('/api/username', function (res) {
        // status 为 0 表示获取用户名称成功；否则表示获取用户名称失败！
        if (res.status !== 0) {
          alert('您尚未登录，请登录后再执行此操作！')
          location.href = './login.html'
        } else {
          alert('欢迎您：' + res.username)
        }
      })

      // 点击按钮退出登录
      $('#btnLogout').on('click', function () {
        // 发起 POST 请求，退出登录
        $.post('/api/logout', function (res) {
          if (res.status === 0) {
            // 如果 status 为 0，则表示退出成功，重新跳转到登录页面
            location.href = './login.html'
          }
        })
      })
    })
  <  /script>
<  /body>

<  /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>Document<  /title>
  <  script src="./jquery.js"><  /script>
<  /head>

<  body>
  <  !-登录表单 -->
  <  form id="form1">
    <  div>账号：<  input type="text" name="username" /><  /div>
    <  div>密码：<  input type="password" name="password" /><  /div>
    <  button>登录<  /button>
  <  /form>

  <  script>
    $(function () {
      // 监听表单的提交事件
      $('#form1').on('submit', function (e) {
        // 阻止默认提交行为
        e.preventDefault()
        // 发起 POST 登录请求
        $.post('/api/login', $(this).serialize(), function (res) {
          // status 为 0 表示登录成功；否则表示登录失败！
          if (res.status === 0) {
            location.href = './index.html'
          } else {
            alert('登录失败！')
          }
        })
      })
    })
  <  /script>
<  /body>

<  /html>

JWT

Session的认证的局限性

session认证机制需要配合Cookie才能实现，由于Cookie默认不支持跨域访问，所以，当涉及到跨域请求后端接口的时候，需要做很多额外的配置，才能实现跨域Session认证

注意：当前端请求后端接口不存在跨域请求的时候，推荐使用session认证机制，反之则推荐使用JWT认证机制

概念

JWT时目前最流行的跨域认证解决方案

JWT通常由三部分组成，分别是Header（头部），Payload（有效荷载），Signature（签名），三者之间使用英文 ‘.‘分隔

Header.Payload.Signature

Payload部分才是真正的用户信息，它是用户信息经过加密之后生成的字符串

header和Signature是安全性相关的信息，只是为了保证Token的安全性

认证机制

客户端收到服务器返回的JWT之后，通常会将它存储到localStorage或者sessionStorage中

此后，客户端每次与服务器通信，都会带上这个JWT字符串，从而进行身份认证，推荐的做法是把JWT放在HTTP请求头的Authorization字段中

安装

npm install jsonwebtoken express-jwt

jsonwebtoken用于生成JWT字符串

express-jwt用于将JWT字符串解析还原成JSON对象

导入

使用require函数分别导入JWT相关的包

const jwt = require('jsonwebtoken') // 用于生成JWT的字符串的包
const expressJWT = require('express-jwt') //用于解析客户端发送来的JWT字符串，还原成JSON对象

密钥

定义secret密钥

为了保证JWT字符串的安全性，防止JWT字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的secret的密钥

当生成JWT字符串的时候，需要使用secret密钥对用户的信息进行加密，最终得到加密好的JWT字符串当把JWT字符串解析还原成JSON对象的时候，需要使用secret密钥进行解密

const secretKey = 'qwertyuiop'
// 密钥的本质就是一个字符串,越复杂越好

生成

生成JWT字符串，在用户登录成功后，进行生成JWT字符串

调用jsonwebtoken包提供的sign()方法，将用户的信息加密成JWT字符串，响应给客户端

res.send({
    status:200,
    message:'logn success',
    // 调用jwt.sign()生成JWT字符串，三个参数分别是，用户的信息对象，加密密钥，配置对象
    token: jwt.sjgn({username:userinfo.username},secretKey,{expiresIn:'30s'})
    // expiresIn属性表示token字符串的有效期 
})

还原

将JWT字符串还原成JSON对象

客户端每次在访问那些有权限的接口的时候，都需要主动通过请求头的Authorization字段，将token字符串发送到服务器进行身份验证

此时，通过express-jwt中间件，自动将token解析成JSON

// expressJWT({secret: secretKey })就是用来解析TOKEN的中间件
// .unless({path:[/^\/api\//]}) 用来指定哪些接口不需要访问权限
app.use(expressJWT({secret: secretKey}).unless({path:[/^\/api\//]}))
// 使用正则表达式匹配不需要访问权限的接口

注意：只要配置了成功了express-jwt这个中间件，就可以把解析出来的用户信息挂载到req.uers属性上

console.log(req.user)

//http://127.0.0.1:8888/api/login
// username:admin
// password:000000
{
    "status": 200,
    "message": "登录成功！",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNzMzODI2NDM1LCJleHAiOjE3MzM4MjY0OTV9.3tWej8V6Oq7gqBwQaHaP2qgJphlMKAFTmBrOiCVAc3Y"
}

//http://127.0.0.1:8888/admin/getinfo
Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNzMzODI2NDM1LCJleHAiOjE3MzM4MjY0OTV9.3tWej8V6Oq7gqBwQaHaP2qgJphlMKAFTmBrOiCVAc3Y

{
    "status": 200,
    "message": "获取用户信息成功！",
    "data": {
        "username": "admin"
    }
}

注意：请求头的值记得加Bearer

遵循HTTP标准：根据W3C的HTTP 1.0规范，Authorization头的值格式是

< type> < credentials>，其中< type>是授权类型，< credentials>是具体的凭证信息。在JWT认证中，“Bearer”是一种常见的授权类型，用于指示后续的字符串是一个令牌（token），而不是用户名和密码等其他类型的凭证

捕获失败

解析JWT失败后产生的错误

当使用express-jwt解析Token字符串时，如果客户端发送的Token是过期或者不合法，会产生一个解析失败的错误，影响项目的正常运行，我们可以通过Express的错误中间件，捕获这个错误并进行处理


// TODO_06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  if (err.name === "UnauthorizedError") {
    return res.send({ status: 401, message: '无效的token' })
  }
  // 其他错误
  res.send({ status: 500, message: '未知错误' })
})

代码

// 完整代码
// 导入 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 = 'qwertyuiop!@#$%^&*('
// TODO_04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
app.use(
  expressJwt.expressjwt({ secret: secretKey, algorithms: ["HS256"] }).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 属性发送给客户端
  const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '60s' })
  res.send({
    status: 200,
    message: '登录成功！',
    token: tokenStr // 要发送给客户端的 token 字符串
  })
})

// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
  // TODO_05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
  let name = req.auth.username
  res.send({
    status: 200,
    message: '获取用户信息成功！',
    data: {
      username: name
    } // 要发送给客户端的用户信息
  })
})

// TODO_06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  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')
})

版权所有

版权归属：yumengjh

许可证：署名 4.0 国际 (CC-BY-4.0)