01_Node.js入门
什么是 Node.js
- Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来编写服务器后端的应用程序
- Node.js 作用除了编写后端应用程序,也可以对前端代码进行压缩,转译,整合等等,提高前端开发和运行效率
- Node.js 基于Chrome V8 引擎封装,独立执行 JS 代码,但是语法和浏览器环境的 V8 有所不同,没有 document 和 window 但是都支持 ECMAScript 标准的代码语法
- Node.js 执行目标 JS 文件,需要使用 node xxx.js 命令来执行
注:tab键 补全路径 esc键 快速删除已输入命令 cls命令 清空终端
fs模块-读写文件
- 模块:类似插件,封装了方法和属性供我们使用
- fs 模块:封装了与本机文件系统进行交互的,方法和属性
- 语法:
- 加载 fs 模块,得到 fs 对象
1const fs = require('fs') 2
- 写入文件内容语法:
1fs.writeFile('文件路径', '写入内容', err => { 2 // 写入后的回调函数 3}) 4
- 读取文件内容的语法:
1fs.readFile('文件路径', (err, data) => { 2 // 读取后的回调函数 3 // data 是文件内容的 Buffer 数据流 4 // data 是 buffer 16 进制数据流对象 .toString() 转换成字符串 5}) 6
path模块-路径处理
建议:在Node.js代码中,使用绝对路径
补充:__dirname (动态获取当前文件所在文件夹的绝对路径)
注意:path.join()会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起
案例-压缩前端html
- 读取源 html 文件内容
- 正则替换字符串
- 写入到新的 html 文件中,并运行查看是否能正常打开网页
1const fs = require('fs') 2const path = require('path') 3// 1.1 读取 public/index.html 内容 4fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => { 5 const htmlStr = data.toString() 6 // 1.2 使用正则替换内容字符串里的,回车符\r 换行符\n 7 const resultStr = htmlStr.replace(/[\r\n]/g, '') 8 // 1.3 确认后,写入到 dist/index.html 内 9 fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => { 10 if (err) console.log(err) 11 else console.log('压缩成功') 12 }) 13}) 14
URL中的端口号
- URL 是统一资源定位符,简称网址,用于访问网络上的资源
- 端口号的作用:标记服务器里对应的服务程序,值为(0-65535 之间的任意整数)
- 注意:http 协议,默认访问的是 80 端口
- Web服务:一个程序,用于提供网上信息浏览功能
- 注意:0-1023 和一些特定的端口号被占用,我们自己编写服务程序请避开使用
http模块-创建Web服务
- 引入 http 模块,创建 Web 服务对象
- 监听 request 请求事件,设置响应头和响应体
- 启动 Web 服务监听对应端口号
- 浏览器请求 http://localhost:3000 测试
注意:本机的域名叫做 localhost
Node.js模块化
模块化简介
- 在 Node.js 中每个文件都被当做是一个独立的模块,模块内定义的变量和函数都是独立作用域的
- 项目是由多个模块组成的,每个模块之间都是独立的
- 模块内的属性和函数都是私有的,如果对外使用,需要使用标准语法导出和导入才可以,而这个标准叫 CommonJS 标准
- 导出语法:
1module.exports = { 2 对外属性名: 模块内私有变量 3} 4
- 导入语法:
1const 变量名 = require('模块名或路径') 2// Node.js 环境内置模块直接写模块名(例如:fs,path,http) 3// 自定义模块:写模块文件路径(例如:./utils.js) 4
变量名的值接收的就是目标模块导出的对象
ECMAScript标准-默认导出和导入
- 导出语法:
1export default { 2 对外属性名: 模块内私有变量 3} 4
- 导入语法:
1import 变量名 from '模块名或路径' 2
变量名的值接收的就是目标模块导出的对象
- 注意:Node.js 默认只支持 CommonJS 标准语法,如果想要在当前项目环境下使用 ECMAScript 标准语法,请新建 package.json 文件设置 type: ‘module’ 来进行设置
1{ “type”: "module" } 2
ECMAScript标准-命名导出和导入
- 命名导出语法:
1export 修饰定义语句 2
- 命名导入语法:
1import { 同名变量 } from '模块名或路径' 2
注意:同名变量指的是模块内导出的变量名
- 与默认导出如何选择:
- 按需加载,使用命名导出和导入
- 全部加载,使用默认导出和导入
包的概念
- 包:将模块,代码,其他资料整合成一个文件夹,这个文件夹就叫包
- 包分类:
- 项目包:主要用于编写项目和业务逻辑
- 软件包:封装工具和方法进行使用
- 包要求:根目录中,必须有 package.json 文件(记录包的清单信息)
- 包使用:在引入一个包文件夹到代码中,默认引入的是包文件节下的 index.js 模块文件里导出的对象,如果没有 index.js 文件,则会引入 package.json 里 main 属性指定的文件模块导出的对象
npm软件包管理器
npm 使用步骤:
- 初始化清单文件: npm init -y (得到 package.json 文件,有则跳过此命令)
注意 -y 就是所有选项用默认值,所在文件夹不要有中文/特殊符号,建议英文和数字组成,因为 npm 议用英文和数字或者下划线中划线
- 下载软件包:npm i 软件包名称
- 使用软件包
npm安装所有依赖
拿到了一个别人编写的项目,但是没有 node_modules,如何得到需要的所有依赖软件包?直接在项目目录下,运行终端命令:npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules
npm全局软件包-nodemon
- 软件包区别:
- 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules
- 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置
- nodemon 作用:替代 node 命令,检测代码更改,自动重启程序
- 使用:
- 安装:npm i nodemon -g (-g 代表安装到全局环境中)
- 运行:nodemon 待执行的目标 js 文件
Node.js概念和常用命令总结
- 执行js文件 node xxx
- 初始化 package.json npm init -y
- 下载本地软件包 npm i 软件包名
- 下载全局软件包 npm i 软件包名 -g
- 删除软件包 npm uni 软件包名
Express
初识Express
用来创造web服务器的
本质:npm的第三方包,提供了快速创造服务器的方法
可以快速创建web服务器和api接口服务器
基本使用
安装:npm i express@4.17.1
创建基本的web服务器
1// 1. 导入 express 2const express = require('express') 3// 2. 创建 web 服务器 4const app = express() 5 6// 4. 监听客户端的 GET 和 POST 请求,并向客户端响应具体的内容 req是请求对象 res是响应对象 7app.get('/user', (req, res) => { 8 // 调用 express 提供的 res.send() 方法(把处理好的内容发送给客户端),向客户端响应一个 JSON 对象 9 res.send({ name: 'zs', age: 20, gender: '男' }) 10}) 11app.post('/user', (req, res) => { 12 // 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串 13 res.send('请求成功') 14}) 15app.get('/', (req, res) => { 16 // 通过 req.query 可以获取到客户端发送过来的 查询参数 17 // 注意:默认情况下,req.query 是一个空对象 18 console.log(req.query) 19 res.send(req.query) 20}) 21// 注意:这里的 :id 是一个动态的参数 22app.get('/user/:ids/:username', (req, res) => { 23 // req.params 是动态匹配到的 URL 参数,默认也是一个空对象 24 console.log(req.params) 25 res.send(req.params) 26}) 27 28// 3. 启动 web 服务器 29app.listen(80, () => { 30 console.log('express server running at http://127.0.0.1') 31}) 32 33
托管静态资源
1const express = require('express') 2const app = express() 3 4// 在这里,调用 express.static() 方法,快速的对外提供静态资源 5app.use('/files', express.static('./files')) 6app.use(express.static('./clock')) 7 8app.listen(80, () => { 9 console.log('express server running at http://127.0.0.1') 10}) 11 12
Express路由
在Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express 中的路由分3 部分组成,分别是请求的类型、请求的URL 地址、处理函数,格式如下:
1app.METHOD(PATH,HANDLER) 2
路由的匹配过程
路由匹配的注意点:
- 按照定义的先后顺序进行匹配
- 请求类型和请求的URL同时匹配成功,才会调用对应的处理函数
路由的使用
- 最简单的路由
1const express = require('express') 2const app = express() 3 4// 挂载路由 5app.get('/', (req, res) => { 6 res.send('hello world.') 7}) 8app.post('/', (req, res) => { 9 res.send('Post Request.') 10}) 11 12app.listen(80, () => { 13 console.log('http://127.0.0.1') 14}) 15 16
- 模块化路由
将路由抽离为单独模块的步骤如下:
- 创建路由模块对应的.js 文件
- 调用express.Router() 函数创建路由对象
- 向路由对象上挂载具体的路由
- 使用module.exports 向外共享路由对象
- 使用app.use() 函数注册路由模块
- 注册路由模块
1// 1. 导入路由模块 2const router = require('./03.router') 3// 2. 注册路由模块 4app.use('/api', router) 5 6// 注意: app.use() 函数的作用,就是来注册全局中间件 7
- 为路由模块添加前缀
直接在第一个参数加前缀
Express中间件
中间件的概念
当一个请求到达Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理
Express 的中间件,本质上就是一个function 处理函数
注:中间件函数的形参列表中,必须包含next 参数。而路由处理函数中只包含req 和res
1app.use((req, res, next) => { 2 next() 3}) 4
next 函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由
Express 中间件的初体验
- 定义中间件函数
1const express = require('express') 2const app = express() 3 4// 定义一个最简单的中间件函数 5const mw = function (req, res, next) { 6 console.log('这是最简单的中间件函数') 7 // 把流转关系,转交给下一个中间件或路由 8 next() 9} 10 11app.listen(80, () => { 12 console.log('http://127.0.0.1') 13}) 14 15
- 全局生效的中间件
客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件。
通过调用app.use(中间件函数),即可定义一个全局生效的中间件
1const express = require('express') 2const app = express() 3 4// // 定义一个最简单的中间件函数 5// const mw = function (req, res, next) { 6// console.log('这是最简单的中间件函数') 7// // 把流转关系,转交给下一个中间件或路由 8// next() 9// } 10 11// // 将 mw 注册为全局生效的中间件 12// app.use(mw) 13 14// 这是定义全局中间件的简化形式 15app.use((req, res, next) => { 16 console.log('这是最简单的中间件函数') 17 next() 18}) 19 20app.get('/', (req, res) => { 21 console.log('调用了 / 这个路由') 22 res.send('Home page.') 23}) 24app.get('/user', (req, res) => { 25 console.log('调用了 /user 这个路由') 26 res.send('User page.') 27}) 28 29app.listen(80, () => { 30 console.log('http://127.0.0.1') 31}) 32 33
- 中间件的作用
多个中间件之间,共享同一份req和res。基于这样的特性,我们可以在上游的中间件中,统一为req 或res 对象添
加自定义的属性或方法,供下游的中间件或路由进行使用。
示例:
1const express = require('express') 2const app = express() 3 4// 这是定义全局中间件的简化形式 5app.use((req, res, next) => { 6 // 获取到请求到达服务器的时间 7 const time = Date.now() 8 // 为 req 对象,挂载自定义属性,从而把时间共享给后面的所有路由 9 req.startTime = time 10 next() 11}) 12 13app.get('/', (req, res) => { 14 res.send('Home page.' + req.startTime) 15}) 16app.get('/user', (req, res) => { 17 res.send('User page.' + req.startTime) 18}) 19 20app.listen(80, () => { 21 console.log('http://127.0.0.1') 22}) 23 24
- 定义多个全局中间件
可以使用app.use() 连续定义多个全局中间件。客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行
调用
1const express = require('express') 2const app = express() 3 4// 定义第一个全局中间件 5app.use((req, res, next) => { 6 console.log('调用了第1个全局中间件') 7 next() 8}) 9// 定义第二个全局中间件 10app.use((req, res, next) => { 11 console.log('调用了第2个全局中间件') 12 next() 13}) 14 15// 定义一个路由 16app.get('/user', (req, res) => { 17 res.send('User page.') 18}) 19 20app.listen(80, () => { 21 console.log('http://127.0.0.1') 22}) 23 24
- 局部生效的中间件
不使用app.use() 定义的中间件,叫做局部生效的中间件
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5 6// 1. 定义中间件函数 7const mw1 = (req, res, next) => { 8 console.log('调用了局部生效的中间件') 9 next() 10} 11 12// 2. 创建路由 13app.get('/', mw1, (req, res) => { 14 res.send('Home page.') 15}) 16app.get('/user', (req, res) => { 17 res.send('User page.') 18}) 19 20// 调用 app.listen 方法,指定端口号并启动web服务器 21app.listen(80, function () { 22 console.log('Express server running at http://127.0.0.1') 23}) 24 25
- 定义多个局部中间件
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5 6// 1. 定义中间件函数 7const mw1 = (req, res, next) => { 8 console.log('调用了第一个局部生效的中间件') 9 next() 10} 11 12const mw2 = (req, res, next) => { 13 console.log('调用了第二个局部生效的中间件') 14 next() 15} 16 17// 2. 创建路由 18app.get('/', [mw1, mw2], (req, res) => { 19 res.send('Home page.') 20}) 21app.get('/user', (req, res) => { 22 res.send('User page.') 23}) 24 25// 调用 app.listen 方法,指定端口号并启动web服务器 26app.listen(80, function () { 27 console.log('Express server running at http://127.0.0.1') 28}) 29 30
- 了解中间件的5个使用注意事项
- 一定要在路由之前注册中间件
- 客户端发送过来的请求,可以连续调用多个中间件进行处理
- 执行完中间件的业务代码之后,不要忘记调用next() 函数
- 为了防止代码逻辑混乱,调用next() 函数后不要再写额外的代码
- 连续调用多个中间件时,多个中间件之间,共享req 和res 对象
中间件的分类
- 应用级别的中间件
- 路由级别的中间件
- 错误级别的中间件
- Express 内置的中间件
- 第三方的中间件
- 应用级别的中间件
通过app.use() 或 app.get() 或 app.post() ,绑定到 app 实例上的中间件,叫做应用级别的中间件 - 路由级别的中间件
绑定到express.Router() 实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不
过,应用级别中间件是绑定到app 实例上,路由级别中间件绑定到router 实例上 - 错误级别的中间件
错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。
格式:错误级别中间件的function 处理函数中,必须有4 个形参,形参顺序从前到后,分别是(err, req, res, next)
注意:错误级别的中间件,必须注册在所有路由之后! - Express内置的中间件
自Express 4.16.0 版本开始,Express 内置了 3 个常用的中间件,极大的提高了Express 项目的开发效率和体验:
- express.static 快速托管静态资源的内置中间件,例如:HTML 文件、图片、CSS 样式等(无兼容性)
- express.json 解析 JSON 格式的请求体数据(有兼容性,仅在4.16.0+ 版本中可用)
- express.urlencoded 解析 URL-encoded 格式的请求体数据(有兼容性,仅在4.16.0+ 版本中可用)
内置中间件的使用
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5 6// 注意:除了错误级别的中间件,其他的中间件,必须在路由之前进行配置 7// 通过 express.json() 这个中间件,解析表单中的 JSON 格式的数据 8app.use(express.json()) 9// 通过 express.urlencoded() 这个中间件,来解析 表单中的 url-encoded 格式的数据 10app.use(express.urlencoded({ extended: false })) 11 12app.post('/user', (req, res) => { 13 // 在服务器,可以使用 req.body 这个属性,来接收客户端发送过来的请求体数据 14 // 默认情况下,如果不配置解析表单数据的中间件,则 req.body 默认等于 undefined 15 console.log(req.body) 16 res.send('ok') 17}) 18 19app.post('/book', (req, res) => { 20 // 在服务器端,可以通过 req,body 来获取 JSON 格式的表单数据和 url-encoded 格式的数据 21 console.log(req.body) 22 res.send('ok') 23}) 24 25// 调用 app.listen 方法,指定端口号并启动web服务器 26app.listen(80, function () { 27 console.log('Express server running at http://127.0.0.1') 28}) 29 30
- 第三方的中间件
非Express 官方内置的,而是由第三方开发出来的中间件,叫做第三方中间件。在项目中,大家可以按需下载并配置
第三方中间件,从而提高项目的开发效率。
例如:在express@4.16.0 之前的版本中,经常使用body-parser 这个第三方中间件,来解析请求体数据。使用步
骤如下:
- 运行npm install body-parser安装中间件
- 使用require导入中间件
- 调用app.use() 注册并使用中间件
注意:Express 内置的 express.urlencoded 中间件,就是基于body-parser 这个第三方中间件进一步封装出来的
演示body-parser中间件的使用
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5 6// 1. 导入解析表单数据的中间件 body-parser 7const parser = require('body-parser') 8// 2. 使用 app.use() 注册中间件 9app.use(parser.urlencoded({ extended: false })) 10// app.use(express.urlencoded({ extended: false })) 11 12app.post('/user', (req, res) => { 13 // 如果没有配置任何解析表单数据的中间件,则 req.body 默认等于 undefined 14 console.log(req.body) 15 res.send('ok') 16}) 17 18// 调用 app.listen 方法,指定端口号并启动web服务器 19app.listen(80, function () { 20 console.log('Express server running at http://127.0.0.1') 21}) 22 23
自定义中间件
- 需求描述与实现步骤
自己手动模拟一个类似于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() 函数,可以轻松把
查询字符串,解析成对象的格式。 - 将解析出来的数据对象挂载为req.body
上游的中间件和下游的中间件及路由之间,共享同一份req 和res。因此,我们可以将解析出来的数据,挂载为req
的自定义属性,命名为req.body,供下游使用。 - 将自定义中间件封装为模块
为了优化代码的结构,我们可以把自定义的中间件函数,封装为独立的模块
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5// 导入 Node.js 内置的 querystring 模块 6const qs = require('querystring') 7 8// 这是解析表单数据的中间件 9app.use((req, res, next) => { 10 // 定义中间件具体的业务逻辑 11 // 1. 定义一个 str 字符串,专门用来存储客户端发送过来的请求体数据 12 let str = '' 13 // 2. 监听 req 的 data 事件 14 req.on('data', (chunk) => { 15 str += chunk 16 }) 17 // 3. 监听 req 的 end 事件 18 req.on('end', () => { 19 // 在 str 中存放的是完整的请求体数据 20 // console.log(str) 21 // TODO: 把字符串格式的请求体数据,解析成对象格式 22 const body = qs.parse(str) 23 req.body = body 24 next() 25 }) 26}) 27 28app.post('/user', (req, res) => { 29 res.send(req.body) 30}) 31 32// 调用 app.listen 方法,指定端口号并启动web服务器 33app.listen(80, function () { 34 console.log('Express server running at http://127.0.0.1') 35}) 36 37
使用Express写接口
- 创建基本的服务器
- 创建API 路由模块
- 编写GET 接口
- 编写POST 接口
注意:如果要获取URL-encoded 格式的请求体数据,必须配置中间件app.use(express.urlencoded({ extended: false }))
1// 导入 express 2const express = require('express') 3// 创建服务器实例 4const app = express() 5 6// 配置解析表单数据的中间件 7app.use(express.urlencoded({ extended: false })) 8 9// 必须在配置 cors 中间件之前,配置 JSONP 的接口 10app.get('/api/jsonp', (req, res) => { 11 // TODO: 定义 JSONP 接口具体的实现过程 12 // 1. 得到函数的名称 13 const funcName = req.query.callback 14 // 2. 定义要发送到客户端的数据对象 15 const data = { name: 'zs', age: 22 } 16 // 3. 拼接出一个函数的调用 17 const scriptStr = [`${funcName}(${JSON.stringify(data)})`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.data.md) 18 // 4. 把拼接的字符串,响应给客户端 19 res.send(scriptStr) 20}) 21 22// 一定要在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题 23const cors = require('cors') 24app.use(cors()) 25 26// 导入路由模块 27const router = require('./16.apiRouter') 28// 把路由模块,注册到 app 上 29app.use('/api', router) 30 31// 启动服务器 32app.listen(80, () => { 33 console.log('express server running at http://127.0.0.1') 34}) 35 36
16.apiRouter
1const express = require('express') 2const router = express.Router() 3 4// 在这里挂载对应的路由 5router.get('/get', (req, res) => { 6 // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据 7 const query = req.query 8 // 调用 res.send() 方法,向客户端响应处理的结果 9 res.send({ 10 status: 0, // 0 表示处理成功,1 表示处理失败 11 msg: 'GET 请求成功!', // 状态的描述 12 data: query, // 需要响应给客户端的数据 13 }) 14}) 15 16// 定义 POST 接口 17router.post('/post', (req, res) => { 18 // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据 19 const body = req.body 20 // 调用 res.send() 方法,向客户端响应结果 21 res.send({ 22 status: 0, 23 msg: 'POST 请求成功!', 24 data: body, 25 }) 26}) 27 28// 定义 DELETE 接口 29router.delete('/delete', (req, res) => { 30 res.send({ 31 status: 0, 32 msg: 'DELETE请求成功', 33 }) 34}) 35 36module.exports = router 37 38
接口的跨域问题
解决接口跨域问题的方案主要有两种:
- CORS(主流的解决方案,推荐使用)
- JSONP(有缺陷的解决方案:只支持GET 请求)
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列HTTP 响应头组成,这些HTTP 响应头决定
浏览器是否阻止前端JS 代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS 相关的HTTP 响应头,
就可以解除浏览器端的跨域访问限制
CORS 的注意事项 - CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了CORS 的接口。
- CORS 在浏览器中有兼容性。只有支持XMLHttpRequest Level2 的浏览器,才能正常访问开启了CORS的服
务端接口(例如:IE10+、Chrome4+、FireFox3.5+)
- JSONP 接口
- 特点:
- JSONP 不属于真正的Ajax 请求,因为它没有使用XMLHttpRequest这个对象。
- JSONP 仅支持GET 请求,不支持POST、PUT、DELETE 等请求。
- 创建 JSONP 接口的注意事项
如果项目中已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS 中间件之前声明JSONP的接口。否则
JSONP 接口会被处理成开启了CORS 的接口。 - 实现 JSONP 接口的步骤
-获取客户端发送过来的回调函数的名字
-得到要通过JSONP 形式发送给客户端的数据
-根据前两步得到的数据,拼接出一个函数调用的字符串
-把上一步拼接得到的字符串,响应给客户端的
数据库与身份认证
数据库基础概念
- 数据库:组织、存储、管理数据的仓库,可对数据做增删改查。
- 数据库分类
- 关系型 (SQL):MySQL、Oracle、SQL Server;数据以表结构存储。
- 非关系型 (NoSQL):Mongodb。
- 关系型数据库结构(类比 Excel)
表格
| MySQL | Excel |
| — | — |
| database 数据库 | 工作簿 |
| table 数据表 | 工作表 |
| row 数据行 | 一行数据 |
| field 字段 | 列 |
开发规范:一个项目对应一个独立数据库;不同业务存不同数据表。
MySQL 安装
需要安装两个软件:
- MySQL Server:提供数据存储服务
- MySQL Workbench:可视化管理工具
SQL 基础语法(重点 CRUD)
SQL 大小写不敏感;字符串值必须加引号;UPDATE / DELETE 务必写 WHERE 条件,否则会操作全表!
- SELECT 查询
1-- 查询全部列 2SELECT * FROM users; 3-- 查询指定列 4SELECT username,password FROM users; 5
- INSERT INTO 插入
1INSERT INTO users(username,password) VALUES('tom','123456'); 2
- UPDATE 更新
1UPDATE users SET password='888888' WHERE id=7; 2-- 更新多列 3UPDATE users SET password='admin123',status=1 WHERE id=2; 4
- DELETE 删除
1DELETE FROM users WHERE id=4; 2
- WHERE 条件:用于
SELECT/UPDATE/DELETE做条件过滤
AND同时满足;OR满足任意一个
1SELECT * FROM users WHERE status=0 AND id<3; 2SELECT * FROM users WHERE status=1 OR username='zs'; 3
- ORDER BY 排序
ASC升序(默认),DESC降序
1SELECT * FROM users ORDER BY id DESC; 2
- COUNT (*) 统计行数,
AS设置别名
1SELECT COUNT(*) AS total FROM users WHERE status=0; 2
Node.js 中操作 MySQL
- 安装模块:
npm install mysql - 基础配置连接池
1const mysql = require('mysql') 2const db = mysql.createPool({ 3 host:'127.0.0.1', 4 user:'root', 5 password:'xxx', 6 database:'my_db_01' 7}) 8
- 核心:使用**? 占位符**防止 SQL 注入
1// 查询 2db.query('SELECT * FROM users', (err, res)=>{}) 3// 插入 4const sql = 'INSERT INTO users SET ?' 5db.query(sql, {username:'xxx',password:'123'}, callback) 6// 更新 7db.query('UPDATE users SET ? WHERE id=?',[userObj,7], callback) 8// 删除 9db.query('DELETE FROM users WHERE id=?',7, callback) 10
标记删除:不真正 delete,更新 status 状态字段模拟删除,数据保留。
Web 开发两种模式
- 服务端渲染:后端拼接完整 HTML 返回浏览器
- 优点:前端压力小、利于 SEO;缺点:服务器压力大,不利于前后端分工。
- 前后端分离:后端返回 API 接口 JSON,前端 Ajax 请求渲染页面
- 优点:前后端分工开发,体验好;缺点:原生不利于 SEO(可 SSR 解决)。
选型:展示类、需要 SEO 选服务端渲染;后台管理系统交互多选前后端分离。
项目
Headline
大事件后台 API 项目,API 接口文档请参考 https://www.showdoc.cc/escook?page\_id=3707158761215217
1. 初始化
1.1 创建项目
- 新建
api_server文件夹作为项目根目录,并在项目根目录中运行如下的命令,初始化包管理配置文件:
1npm init -y 2
- 运行如下的命令,安装特定版本的
express:
1npm i express@4.17.1 2
- 在项目根目录中新建
app.js作为整个项目的入口文件,并初始化如下的代码:
1// 导入 express 模块 2const express = require('express') 3// 创建 express 的服务器实例 4const app = express() 5 6// write your code here... 7 8// 调用 app.listen 方法,指定端口号并启动web服务器 9app.listen(3007, function () { 10 console.log('api server running at http://127.0.0.1:3007') 11}) 12
1.2 配置 cors 跨域
- 运行如下的命令,安装
cors中间件:
1npm i cors@2.8.5 2
- 在
app.js中导入并配置cors中间件:
1// 导入 cors 中间件 2const cors = require('cors') 3// 将 cors 注册为全局中间件 4app.use(cors()) 5
1.3 配置解析表单数据的中间件
- 通过如下的代码,配置解析
application/x-www-form-urlencoded格式的表单数据的中间件:
1app.use(express.urlencoded({ extended: false })) 2
1.4 初始化路由相关的文件夹
- 在项目根目录中,新建
router文件夹,用来存放所有的路由模块
路由模块中,只存放客户端的请求与处理函数之间的映射关系
- 在项目根目录中,新建
router_handler文件夹,用来存放所有的路由处理函数模块
路由处理函数模块中,专门负责存放每个路由对应的处理函数
1.5 初始化用户路由模块
- 在
router文件夹中,新建user.js文件,作为用户的路由模块,并初始化代码如下:
1const express = require('express') 2// 创建路由对象 3const router = express.Router() 4 5// 注册新用户 6router.post('/reguser', (req, res) => { 7 res.send('reguser OK') 8}) 9 10// 登录 11router.post('/login', (req, res) => { 12 res.send('login OK') 13}) 14 15// 将路由对象共享出去 16module.exports = router 17
- 在
app.js中,导入并使用用户路由模块:
1// 导入并注册用户路由模块 2const userRouter = require('./router/user') 3app.use('/api', userRouter) 4
1.6 抽离用户路由模块中的处理函数
目的:为了保证
路由模块的纯粹性,所有的路由处理函数,必须抽离到对应的路由处理函数模块中
- 在
/router_handler/user.js中,使用exports对象,分别向外共享如下两个路由处理函数:
1/** 2 * 在这里定义和用户相关的路由处理函数,供 /router/user.js 模块进行调用 3 */ 4 5// 注册用户的处理函数 6exports.regUser = (req, res) => { 7 res.send('reguser OK') 8} 9 10// 登录的处理函数 11exports.login = (req, res) => { 12 res.send('login OK') 13} 14
- 将
/router/user.js中的代码修改为如下结构:
1const express = require('express') 2const router = express.Router() 3 4// 导入用户路由处理函数模块 5const userHandler = require('../router_handler/user') 6 7// 注册新用户 8router.post('/reguser', userHandler.regUser) 9// 登录 10router.post('/login', userHandler.login) 11 12module.exports = router 13
2. 登录注册
2.1 新建 ev_users 表
- 在
my_db_01数据库中,新建ev_users表如下:

2.2 安装并配置 mysql 模块
在 API 接口项目中,需要安装并配置
mysql这个第三方模块,来连接和操作 MySQL 数据库
- 运行如下命令,安装
mysql模块:
1npm i mysql@2.18.1 2
- 在项目根目录中新建
/db/index.js文件,在此自定义模块中创建数据库的连接对象:
1// 导入 mysql 模块 2const mysql = require('mysql') 3 4// 创建数据库连接对象 5const db = mysql.createPool({ 6 host: '127.0.0.1', 7 user: 'root', 8 password: 'admin123', 9 database: 'my_db_01', 10}) 11 12// 向外共享 db 数据库连接对象 13module.exports = db 14
2.3 注册
2.3.0 实现步骤
- 检测表单数据是否合法
- 检测用户名是否被占用
- 对密码进行加密处理
- 插入新用户
2.3.1 检测表单数据是否合法
- 判断用户名和密码是否为空
1// 接收表单数据 2const userinfo = req.body 3// 判断数据是否合法 4if (!userinfo.username || !userinfo.password) { 5 return res.send({ status: 1, message: '用户名或密码不能为空!' }) 6} 7
2.3.2 检测用户名是否被占用
- 导入数据库操作模块:
1const db = require('../db/index') 2
- 定义 SQL 语句:
1const sql = [`select * from ev_users where username=?`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.select.md) 2
- 执行 SQL 语句并根据结果判断用户名是否被占用:
1db.query(sql, [userinfo.username], function (err, results) { 2 // 执行 SQL 语句失败 3 if (err) { 4 return res.send({ status: 1, message: err.message }) 5 } 6 // 用户名被占用 7 if (results.length > 0) { 8 return res.send({ status: 1, message: '用户名被占用,请更换其他用户名!' }) 9 } 10 // TODO: 用户名可用,继续后续流程... 11}) 12
2.3.3 对密码进行加密处理
为了保证密码的安全性,不建议在数据库以
明文的形式保存用户密码,推荐对密码进行加密存储
在当前项目中,使用 bcryptjs 对用户密码进行加密,优点:
- 加密之后的密码,无法被逆向破解
- 同一明文密码多次加密,得到的加密结果各不相同,保证了安全性
- 运行如下命令,安装指定版本的
bcryptjs:
1npm i bcryptjs@2.4.3 2
- 在
/router_handler/user.js中,导入bcryptjs:
1const bcrypt = require('bcryptjs') 2
- 在注册用户的处理函数中,确认用户名可用之后,调用
bcrypt.hashSync(明文密码, 随机盐的长度)方法,对用户的密码进行加密处理:
1// 对用户的密码,进行 bcrype 加密,返回值是加密之后的密码字符串 2userinfo.password = bcrypt.hashSync(userinfo.password, 10) 3
2.3.4 插入新用户
- 定义插入用户的 SQL 语句:
1const sql = 'insert into ev_users set ?' 2
- 调用
db.query()执行 SQL 语句,插入新用户:
1db.query(sql, { username: userinfo.username, password: userinfo.password }, function (err, results) { 2 // 执行 SQL 语句失败 3 if (err) return res.send({ status: 1, message: err.message }) 4 // SQL 语句执行成功,但影响行数不为 1 5 if (results.affectedRows !== 1) { 6 return res.send({ status: 1, message: '注册用户失败,请稍后再试!' }) 7 } 8 // 注册成功 9 res.send({ status: 0, message: '注册成功!' }) 10}) 11
2.4 优化 res.send() 代码
在处理函数中,需要多次调用
res.send()向客户端响应处理失败的结果,为了简化代码,可以手动封装一个 res.cc() 函数
- 在
app.js中,所有路由之前,声明一个全局中间件,为 res 对象挂载一个res.cc()函数 :
1// 响应数据的中间件 2app.use(function (req, res, next) { 3 // status = 0 为成功; status = 1 为失败; 默认将 status 的值设置为 1,方便处理失败的情况 4 res.cc = function (err, status = 1) { 5 res.send({ 6 // 状态 7 status, 8 // 状态描述,判断 err 是 错误对象 还是 字符串 9 message: err instanceof Error ? err.message : err, 10 }) 11 } 12 next() 13}) 14
2.5 优化表单数据验证
表单验证的原则:前端验证为辅,后端验证为主,后端永远不要相信前端提交过来的任何内容
在实际开发中,前后端都需要对表单的数据进行合法性的验证,而且,后端做为数据合法性验证的最后一个关口,在拦截非法数据方面,起到了至关重要的作用。
单纯的使用 if...else... 的形式对数据合法性进行验证,效率低下、出错率高、维护性差。因此,推荐使用第三方数据验证模块,来降低出错率、提高验证的效率与可维护性,让后端程序员把更多的精力放在核心业务逻辑的处理上。
- 安装
@hapi/joi包,为表单中携带的每个数据项,定义验证规则:
1npm install @hapi/joi@17.1.0 2
- 安装
@escook/express-joi中间件,来实现自动对表单数据进行验证的功能:
1npm i @escook/express-joi 2
- 新建
/schema/user.js用户信息验证规则模块,并初始化代码如下:
1const joi = require('@hapi/joi') 2 3/** 4 * string() 值必须是字符串 5 * alphanum() 值只能是包含 a-zA-Z0-9 的字符串 6 * min(length) 最小长度 7 * max(length) 最大长度 8 * required() 值是必填项,不能为 undefined 9 * pattern(正则表达式) 值必须符合正则表达式的规则 10 */ 11 12// 用户名的验证规则 13const username = joi.string().alphanum().min(1).max(10).required() 14// 密码的验证规则 15const password = joi 16 .string() 17 .pattern(/^[\S]{6,12}$/) 18 .required() 19 20// 注册和登录表单的验证规则对象 21exports.reg_login_schema = { 22 // 表示需要对 req.body 中的数据进行验证 23 body: { 24 username, 25 password, 26 }, 27} 28
- 修改
/router/user.js中的代码如下:
1const express = require('express') 2const router = express.Router() 3 4// 导入用户路由处理函数模块 5const userHandler = require('../router_handler/user') 6 7// 1. 导入验证表单数据的中间件 8const expressJoi = require('@escook/express-joi') 9// 2. 导入需要的验证规则对象 10const { reg_login_schema } = require('../schema/user') 11 12// 注册新用户 13// 3. 在注册新用户的路由中,声明局部中间件,对当前请求中携带的数据进行验证 14// 3.1 数据验证通过后,会把这次请求流转给后面的路由处理函数 15// 3.2 数据验证失败后,终止后续代码的执行,并抛出一个全局的 Error 错误,进入全局错误级别中间件中进行处理 16router.post('/reguser', expressJoi(reg_login_schema), userHandler.regUser) 17// 登录 18router.post('/login', userHandler.login) 19 20module.exports = router 21
- 在
app.js的全局错误级别中间件中,捕获验证失败的错误,并把验证失败的结果响应给客户端:
1const joi = require('@hapi/joi') 2 3// 错误中间件 4app.use(function (err, req, res, next) { 5 // 数据验证失败 6 if (err instanceof joi.ValidationError) return res.cc(err) 7 // 未知错误 8 res.cc(err) 9}) 10
2.6 登录
2.6.0 实现步骤
- 检测表单数据是否合法
- 根据用户名查询用户的数据
- 判断用户输入的密码是否正确
- 生成 JWT 的 Token 字符串
2.6.1 检测登录表单的数据是否合法
- 将
/router/user.js中登录的路由代码修改如下:
1// 登录的路由 2router.post('/login', expressJoi(reg_login_schema), userHandler.login) 3
2.6.2 根据用户名查询用户的数据
- 接收表单数据:
1const userinfo = req.body 2
- 定义 SQL 语句:
1const sql = [`select * from ev_users where username=?`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.select.md) 2
- 执行 SQL 语句,查询用户的数据:
1db.query(sql, userinfo.username, function (err, results) { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 // 执行 SQL 语句成功,但是查询到数据条数不等于 1 5 if (results.length !== 1) return res.cc('登录失败!') 6 // TODO:判断用户输入的登录密码是否和数据库中的密码一致 7}) 8
2.6.3 判断用户输入的密码是否正确
核心实现思路:调用
bcrypt.compareSync(用户提交的密码, 数据库中的密码)方法比较密码是否一致
返回值是布尔值(true 一致、false 不一致)
具体的实现代码如下:
1// 拿着用户输入的密码,和数据库中存储的密码进行对比 2const compareResult = bcrypt.compareSync(userinfo.password, results[0].password) 3 4// 如果对比的结果等于 false, 则证明用户输入的密码错误 5if (!compareResult) { 6 return res.cc('登录失败!') 7} 8 9// TODO:登录成功,生成 Token 字符串 10
2.6.4 生成 JWT 的 Token 字符串
核心注意点:在生成 Token 字符串的时候,一定要剔除 密码 和 头像 的值
- 通过 ES6 的高级语法,快速剔除
密码和头像的值:
1// 剔除完毕之后,user 中只保留了用户的 id, username, nickname, email 这四个属性的值 2const user = { ...results[0], password: '', user_pic: '' } 3
- 运行如下的命令,安装生成 Token 字符串的包:
1npm i jsonwebtoken@8.5.1 2
- 在
/router_handler/user.js模块的头部区域,导入jsonwebtoken包:
1// 用这个包来生成 Token 字符串 2const jwt = require('jsonwebtoken') 3
- 创建
config.js文件,并向外共享 加密 和 还原 Token 的jwtSecretKey字符串:
1module.exports = { 2 jwtSecretKey: 'itheima No1. ^_^', 3} 4
- 将用户信息对象加密成 Token 字符串:
1// 导入配置文件 2const config = require('../config') 3 4// 生成 Token 字符串 5const tokenStr = jwt.sign(user, config.jwtSecretKey, { 6 expiresIn: '10h', // token 有效期为 10 个小时 7}) 8
- 将生成的 Token 字符串响应给客户端:
1res.send({ 2 status: 0, 3 message: '登录成功!', 4 // 为了方便客户端使用 Token,在服务器端直接拼接上 Bearer 的前缀 5 token: 'Bearer ' + tokenStr, 6}) 7
2.7 配置解析 Token 的中间件
- 运行如下的命令,安装解析 Token 的中间件:
1npm i express-jwt@5.3.3 2
- 在
app.js中注册路由之前,配置解析 Token 的中间件:
1// 导入配置文件 2const config = require('./config') 3 4// 解析 token 的中间件 5const expressJWT = require('express-jwt') 6 7// 使用 .unless({ path: [/^\/api\//] }) 指定哪些接口不需要进行 Token 的身份认证 8app.use(expressJWT({ secret: config.jwtSecretKey }).unless({ path: [/^\/api\//] })) 9
- 在
app.js中的错误级别中间件里面,捕获并处理 Token 认证失败后的错误:
1// 错误中间件 2app.use(function (err, req, res, next) { 3 // 省略其它代码... 4 5 // 捕获身份认证失败的错误 6 if (err.name === 'UnauthorizedError') return res.cc('身份认证失败!') 7 8 // 未知错误... 9}) 10
3. 个人中心
3.1 获取用户的基本信息
3.1.0 实现步骤
- 初始化 路由 模块
- 初始化 路由处理函数 模块
- 获取用户的基本信息
3.1.1 初始化路由模块
- 创建
/router/userinfo.js路由模块,并初始化如下的代码结构:
1// 导入 express 2const express = require('express') 3// 创建路由对象 4const router = express.Router() 5 6// 获取用户的基本信息 7router.get('/userinfo', (req, res) => { 8 res.send('ok') 9}) 10 11// 向外共享路由对象 12module.exports = router 13
- 在
app.js中导入并使用个人中心的路由模块:
1// 导入并使用用户信息路由模块 2const userinfoRouter = require('./router/userinfo') 3// 注意:以 /my 开头的接口,都是有权限的接口,需要进行 Token 身份认证 4app.use('/my', userinfoRouter) 5
3.1.2 初始化路由处理函数模块
- 创建
/router_handler/userinfo.js路由处理函数模块,并初始化如下的代码结构:
1// 获取用户基本信息的处理函数 2exports.getUserInfo = (req, res) => { 3 res.send('ok') 4} 5
- 修改
/router/userinfo.js中的代码如下:
1const express = require('express') 2const router = express.Router() 3 4// 导入用户信息的处理函数模块 5const userinfo_handler = require('../router_handler/userinfo') 6 7// 获取用户的基本信息 8router.get('/userinfo', userinfo_handler.getUserInfo) 9 10module.exports = router 11
3.1.3 获取用户的基本信息
- 在
/router_handler/userinfo.js头部导入数据库操作模块:
1// 导入数据库操作模块 2const db = require('../db/index') 3
- 定义 SQL 语句:
1// 根据用户的 id,查询用户的基本信息 2// 注意:为了防止用户的密码泄露,需要排除 password 字段 3const sql = [`select id, username, nickname, email, user_pic from ev_users where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md) 4
- 调用
db.query()执行 SQL 语句:
1// 注意:req 对象上的 user 属性,是 Token 解析成功,express-jwt 中间件帮我们挂载上去的 2db.query(sql, req.user.id, (err, results) => { 3 // 1. 执行 SQL 语句失败 4 if (err) return res.cc(err) 5 6 // 2. 执行 SQL 语句成功,但是查询到的数据条数不等于 1 7 if (results.length !== 1) return res.cc('获取用户信息失败!') 8 9 // 3. 将用户信息响应给客户端 10 res.send({ 11 status: 0, 12 message: '获取用户基本信息成功!', 13 data: results[0], 14 }) 15}) 16
3.2 更新用户的基本信息
3.2.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 实现更新用户基本信息的功能
3.2.1 定义路由和处理函数
- 在
/router/userinfo.js模块中,新增更新用户基本信息的路由:
1// 更新用户的基本信息 2router.post('/userinfo', userinfo_handler.updateUserInfo) 3
- 在
/router_handler/userinfo.js模块中,定义并向外共享更新用户基本信息的路由处理函数:
1// 更新用户基本信息的处理函数 2exports.updateUserInfo = (req, res) => { 3 res.send('ok') 4} 5
3.2.2 验证表单数据
- 在
/schema/user.js验证规则模块中,定义id,nickname,email的验证规则如下:
1// 定义 id, nickname, emial 的验证规则 2const id = joi.number().integer().min(1).required() 3const nickname = joi.string().required() 4const email = joi.string().email().required() 5
- 并使用
exports向外共享如下的验证规则对象:
1// 验证规则对象 - 更新用户基本信息 2exports.update_userinfo_schema = { 3 body: { 4 id, 5 nickname, 6 email, 7 }, 8} 9
- 在
/router/userinfo.js模块中,导入验证数据合法性的中间件:
1// 导入验证数据合法性的中间件 2const expressJoi = require('@escook/express-joi') 3
- 在
/router/userinfo.js模块中,导入需要的验证规则对象:
1// 导入需要的验证规则对象 2const { update_userinfo_schema } = require('../schema/user') 3
- 在
/router/userinfo.js模块中,修改更新用户的基本信息的路由如下:
1// 更新用户的基本信息 2router.post('/userinfo', expressJoi(update_userinfo_schema), userinfo_handler.updateUserInfo) 3
3.2.3 实现更新用户基本信息的功能
- 定义待执行的 SQL 语句:
1const sql = [`update ev_users set ? where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 2
- 调用
db.query()执行 SQL 语句并传参:
1db.query(sql, [req.body, req.body.id], (err, results) => { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // 执行 SQL 语句成功,但影响行数不为 1 6 if (results.affectedRows !== 1) return res.cc('修改用户基本信息失败!') 7 8 // 修改用户信息成功 9 return res.cc('修改用户基本信息成功!', 0) 10}) 11
3.3 重置密码
3.3.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 实现重置密码的功能
3.3.1 定义路由和处理函数
- 在
/router/userinfo.js模块中,新增重置密码的路由:
1// 重置密码的路由 2router.post('/updatepwd', userinfo_handler.updatePassword) 3
- 在
/router_handler/userinfo.js模块中,定义并向外共享重置密码的路由处理函数:
1// 重置密码的处理函数 2exports.updatePassword = (req, res) => { 3 res.send('ok') 4} 5
3.3.2 验证表单数据
核心验证思路:旧密码与新密码,必须符合密码的验证规则,并且新密码不能与旧密码一致!
- 在
/schema/user.js模块中,使用exports向外共享如下的验证规则对象:
1// 验证规则对象 - 重置密码 2exports.update_password_schema = { 3 body: { 4 // 使用 password 这个规则,验证 req.body.oldPwd 的值 5 oldPwd: password, 6 // 使用 joi.not(joi.ref('oldPwd')).concat(password) 规则,验证 req.body.newPwd 的值 7 // 解读: 8 // 1. joi.ref('oldPwd') 表示 newPwd 的值必须和 oldPwd 的值保持一致 9 // 2. joi.not(joi.ref('oldPwd')) 表示 newPwd 的值不能等于 oldPwd 的值 10 // 3. .concat() 用于合并 joi.not(joi.ref('oldPwd')) 和 password 这两条验证规则 11 newPwd: joi.not(joi.ref('oldPwd')).concat(password), 12 }, 13} 14
- 在
/router/userinfo.js模块中,导入需要的验证规则对象:
1// 导入需要的验证规则对象 2const { update_userinfo_schema, update_password_schema } = require('../schema/user') 3
- 并在
重置密码的路由中,使用update_password_schema规则验证表单的数据,示例代码如下:
1router.post('/updatepwd', expressJoi(update_password_schema), userinfo_handler.updatePassword) 2
3.3.3 实现重置密码的功能
- 根据
id查询用户是否存在:
1// 定义根据 id 查询用户数据的 SQL 语句 2const sql = [`select * from ev_users where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md) 3 4// 执行 SQL 语句查询用户是否存在 5db.query(sql, req.user.id, (err, results) => { 6 // 执行 SQL 语句失败 7 if (err) return res.cc(err) 8 9 // 检查指定 id 的用户是否存在 10 if (results.length !== 1) return res.cc('用户不存在!') 11 12 // TODO:判断提交的旧密码是否正确 13}) 14
- 判断提交的 旧密码 是否正确:
1// 在头部区域导入 bcryptjs 后, 2// 即可使用 bcrypt.compareSync(提交的密码,数据库中的密码) 方法验证密码是否正确 3// compareSync() 函数的返回值为布尔值,true 表示密码正确,false 表示密码错误 4const bcrypt = require('bcryptjs') 5 6// 判断提交的旧密码是否正确 7const compareResult = bcrypt.compareSync(req.body.oldPwd, results[0].password) 8if (!compareResult) return res.cc('原密码错误!') 9
- 对新密码进行
bcrypt加密之后,更新到数据库中:
1// 定义更新用户密码的 SQL 语句 2const sql = [`update ev_users set password=? where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 3 4// 对新密码进行 bcrypt 加密处理 5const newPwd = bcrypt.hashSync(req.body.newPwd, 10) 6 7// 执行 SQL 语句,根据 id 更新用户的密码 8db.query(sql, [newPwd, req.user.id], (err, results) => { 9 // SQL 语句执行失败 10 if (err) return res.cc(err) 11 12 // SQL 语句执行成功,但是影响行数不等于 1 13 if (results.affectedRows !== 1) return res.cc('更新密码失败!') 14 15 // 更新密码成功 16 res.cc('更新密码成功!', 0) 17}) 18
3.4 更新用户头像
3.4.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 实现更新用户头像的功能
3.4.1 定义路由和处理函数
- 在
/router/userinfo.js模块中,新增更新用户头像的路由:
1// 更新用户头像的路由 2router.post('/update/avatar', userinfo_handler.updateAvatar) 3
- 在
/router_handler/userinfo.js模块中,定义并向外共享更新用户头像的路由处理函数:
1// 更新用户头像的处理函数 2exports.updateAvatar = (req, res) => { 3 res.send('ok') 4} 5
3.4.2 验证表单数据
- 在
/schema/user.js验证规则模块中,定义avatar的验证规则如下:
1// dataUri() 指的是如下格式的字符串数据: 2// data:image/png;base64,VE9PTUFOWVNFQ1JFVFM= 3const avatar = joi.string().dataUri().required() 4
- 并使用
exports向外共享如下的验证规则对象:
1// 验证规则对象 - 更新头像 2exports.update_avatar_schema = { 3 body: { 4 avatar, 5 }, 6} 7
- 在
/router/userinfo.js模块中,导入需要的验证规则对象:
1const { update_avatar_schema } = require('../schema/user') 2
- 在
/router/userinfo.js模块中,修改更新用户头像的路由如下:
1router.post('/update/avatar', expressJoi(update_avatar_schema), userinfo_handler.updateAvatar) 2
3.4.3 实现更新用户头像的功能
- 定义更新用户头像的 SQL 语句:
1const sql = 'update ev_users set user_pic=? where id=?' 2
- 调用
db.query()执行 SQL 语句,更新对应用户的头像:
1db.query(sql, [req.body.avatar, req.user.id], (err, results) => { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // 执行 SQL 语句成功,但是影响行数不等于 1 6 if (results.affectedRows !== 1) return res.cc('更新头像失败!') 7 8 // 更新用户头像成功 9 return res.cc('更新头像成功!', 0) 10}) 11
4. 文章分类管理
4.1 新建 ev_article_cate 表
4.1.1 创建表结构

4.1.2 新增两条初始数据

4.2 获取文章分类列表
4.2.0 实现步骤
- 初始化路由模块
- 初始化路由处理函数模块
- 获取文章分类列表数据
4.2.1 初始化路由模块
- 创建
/router/artcate.js路由模块,并初始化如下的代码结构:
1// 导入 express 2const express = require('express') 3// 创建路由对象 4const router = express.Router() 5 6// 获取文章分类的列表数据 7router.get('/cates', (req, res) => { 8 res.send('ok') 9}) 10 11// 向外共享路由对象 12module.exports = router 13
- 在
app.js中导入并使用文章分类的路由模块:
1// 导入并使用文章分类路由模块 2const artCateRouter = require('./router/artcate') 3// 为文章分类的路由挂载统一的访问前缀 /my/article 4app.use('/my/article', artCateRouter) 5
4.2.2 初始化路由处理函数模块
- 创建
/router_handler/artcate.js路由处理函数模块,并初始化如下的代码结构:
1// 获取文章分类列表数据的处理函数 2exports.getArticleCates = (req, res) => { 3 res.send('ok') 4} 5
- 修改
/router/artcate.js中的代码如下:
1const express = require('express') 2const router = express.Router() 3 4// 导入文章分类的路由处理函数模块 5const artcate_handler = require('../router_handler/artcate') 6 7// 获取文章分类的列表数据 8router.get('/cates', artcate_handler.getArticleCates) 9 10module.exports = router 11
4.2.3 获取文章分类列表数据
- 在
/router_handler/artcate.js头部导入数据库操作模块:
1// 导入数据库操作模块 2const db = require('../db/index') 3
- 定义 SQL 语句:
1// 根据分类的状态,获取所有未被删除的分类列表数据 2// is_delete 为 0 表示没有被 标记为删除 的数据 3const sql = 'select * from ev_article_cate where is_delete=0 order by id asc' 4
- 调用
db.query()执行 SQL 语句:
1db.query(sql, (err, results) => { 2 // 1. 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // 2. 执行 SQL 语句成功 6 res.send({ 7 status: 0, 8 message: '获取文章分类列表成功!', 9 data: results, 10 }) 11}) 12
4.3 新增文章分类
4.3.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 查询
分类名称与分类别名是否被占用 - 实现新增文章分类的功能
4.3.1 定义路由和处理函数
- 在
/router/artcate.js模块中,添加新增文章分类的路由:
1// 新增文章分类的路由 2router.post('/addcates', artcate_handler.addArticleCates) 3
- 在
/router_handler/artcate.js模块中,定义并向外共享新增文章分类的路由处理函数:
1// 新增文章分类的处理函数 2exports.addArticleCates = (req, res) => { 3 res.send('ok') 4} 5
4.3.2 验证表单数据
- 创建
/schema/artcate.js文章分类数据验证模块,并定义如下的验证规则:
1// 导入定义验证规则的模块 2const joi = require('@hapi/joi') 3 4// 定义 分类名称 和 分类别名 的校验规则 5const name = joi.string().required() 6const alias = joi.string().alphanum().required() 7 8// 校验规则对象 - 添加分类 9exports.add_cate_schema = { 10 body: { 11 name, 12 alias, 13 }, 14} 15
- 在
/router/artcate.js模块中,使用add_cate_schema对数据进行验证:
1// 导入验证数据的中间件 2const expressJoi = require('@escook/express-joi') 3// 导入文章分类的验证模块 4const { add_cate_schema } = require('../schema/artcate') 5 6// 新增文章分类的路由 7router.post('/addcates', expressJoi(add_cate_schema), artcate_handler.addArticleCates) 8
4.3.3 查询分类名称与别名是否被占用
- 定义查重的 SQL 语句:
1// 定义查询 分类名称 与 分类别名 是否被占用的 SQL 语句 2const sql = [`select * from ev_article_cate where name=? or alias=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.alias.md) 3
- 调用
db.query()执行查重的操作:
1// 执行查重操作 2db.query(sql, [req.body.name, req.body.alias], (err, results) => { 3 // 执行 SQL 语句失败 4 if (err) return res.cc(err) 5 6 // 判断 分类名称 和 分类别名 是否被占用 7 if (results.length === 2) return res.cc('分类名称与别名被占用,请更换后重试!') 8 // 分别判断 分类名称 和 分类别名 是否被占用 9 if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用,请更换后重试!') 10 if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用,请更换后重试!') 11 12 // TODO:新增文章分类 13}) 14
4.3.4 实现新增文章分类的功能
- 定义新增文章分类的 SQL 语句:
1const sql = [`insert into ev_article_cate set ?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 2
- 调用
db.query()执行新增文章分类的 SQL 语句:
1db.query(sql, req.body, (err, results) => { 2 // SQL 语句执行失败 3 if (err) return res.cc(err) 4 5 // SQL 语句执行成功,但是影响行数不等于 1 6 if (results.affectedRows !== 1) return res.cc('新增文章分类失败!') 7 8 // 新增文章分类成功 9 res.cc('新增文章分类成功!', 0) 10}) 11
4.4 根据 Id 删除文章分类
4.4.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 实现删除文章分类的功能
4.4.1 定义路由和处理函数
- 在
/router/artcate.js模块中,添加删除文章分类的路由:
1// 删除文章分类的路由 2router.get('/deletecate/:id', artcate_handler.deleteCateById) 3
- 在
/router_handler/artcate.js模块中,定义并向外共享删除文章分类的路由处理函数:
1// 删除文章分类的处理函数 2exports.deleteCateById = (req, res) => { 3 res.send('ok') 4} 5
4.4.2 验证表单数据
- 在
/schema/artcate.js验证规则模块中,定义 id 的验证规则如下:
1// 定义 分类Id 的校验规则 2const id = joi.number().integer().min(1).required() 3
- 并使用
exports向外共享如下的验证规则对象:
1// 校验规则对象 - 删除分类 2exports.delete_cate_schema = { 3 params: { 4 id, 5 }, 6} 7
- 在
/router/artcate.js模块中,导入需要的验证规则对象,并在路由中使用:
1// 导入删除分类的验证规则对象 2const { delete_cate_schema } = require('../schema/artcate') 3 4// 删除文章分类的路由 5router.get('/deletecate/:id', expressJoi(delete_cate_schema), artcate_handler.deleteCateById) 6
4.4.3 实现删除文章分类的功能
- 定义删除文章分类的 SQL 语句:
1const sql = [`update ev_article_cate set is_delete=1 where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 2
- 调用
db.query()执行删除文章分类的 SQL 语句:
1db.query(sql, req.params.id, (err, results) => { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // SQL 语句执行成功,但是影响行数不等于 1 6 if (results.affectedRows !== 1) return res.cc('删除文章分类失败!') 7 8 // 删除文章分类成功 9 res.cc('删除文章分类成功!', 0) 10}) 11
4.5 根据 Id 获取文章分类数据
4.5.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 实现获取文章分类的功能
4.5.1 定义路由和处理函数
- 在
/router/artcate.js模块中,添加根据 Id 获取文章分类的路由:
1router.get('/cates/:id', artcate_handler.getArticleById) 2
- 在
/router_handler/artcate.js模块中,定义并向外共享根据 Id 获取文章分类的路由处理函数:
1// 根据 Id 获取文章分类的处理函数 2exports.getArticleById = (req, res) => { 3 res.send('ok') 4} 5
4.5.2 验证表单数据
- 在
/schema/artcate.js验证规则模块中,使用exports向外共享如下的验证规则对象:
1// 校验规则对象 - 根据 Id 获取分类 2exports.get_cate_schema = { 3 params: { 4 id, 5 }, 6} 7
- 在
/router/artcate.js模块中,导入需要的验证规则对象,并在路由中使用:
1// 导入根据 Id 获取分类的验证规则对象 2const { get_cate_schema } = require('../schema/artcate') 3 4// 根据 Id 获取文章分类的路由 5router.get('/cates/:id', expressJoi(get_cate_schema), artcate_handler.getArticleById) 6
4.5.3 实现获取文章分类的功能
- 定义根据 Id 获取文章分类的 SQL 语句:
1const sql = [`select * from ev_article_cate where id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md) 2
- 调用
db.query()执行 SQL 语句:
1db.query(sql, req.params.id, (err, results) => { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // SQL 语句执行成功,但是没有查询到任何数据 6 if (results.length !== 1) return res.cc('获取文章分类数据失败!') 7 8 // 把数据响应给客户端 9 res.send({ 10 status: 0, 11 message: '获取文章分类数据成功!', 12 data: results[0], 13 }) 14}) 15
4.6 根据 Id 更新文章分类数据
4.6.0 实现步骤
- 定义路由和处理函数
- 验证表单数据
- 查询
分类名称与分类别名是否被占用 - 实现更新文章分类的功能
4.6.1 定义路由和处理函数
- 在
/router/artcate.js模块中,添加更新文章分类的路由:
1// 更新文章分类的路由 2router.post('/updatecate', artcate_handler.updateCateById) 3
- 在
/router_handler/artcate.js模块中,定义并向外共享更新文章分类的路由处理函数:
1// 更新文章分类的处理函数 2exports.updateCateById = (req, res) => { 3 res.send('ok') 4} 5
4.6.2 验证表单数据
- 在
/schema/artcate.js验证规则模块中,使用exports向外共享如下的验证规则对象:
1// 校验规则对象 - 更新分类 2exports.update_cate_schema = { 3 body: { 4 Id: id, 5 name, 6 alias, 7 }, 8} 9
- 在
/router/artcate.js模块中,导入需要的验证规则对象,并在路由中使用:
1// 导入更新文章分类的验证规则对象 2const { update_cate_schema } = require('../schema/artcate') 3 4// 更新文章分类的路由 5router.post('/updatecate', expressJoi(update_cate_schema), artcate_handler.updateCateById) 6
4.5.4 查询分类名称与别名是否被占用
- 定义查重的 SQL 语句:
1// 定义查询 分类名称 与 分类别名 是否被占用的 SQL 语句 2const sql = [`select * from ev_article_cate where Id<>? and (name=? or alias=?)`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.alias.md) 3
- 调用
db.query()执行查重的操作:
1// 执行查重操作 2db.query(sql, [req.body.Id, req.body.name, req.body.alias], (err, results) => { 3 // 执行 SQL 语句失败 4 if (err) return res.cc(err) 5 6 // 判断 分类名称 和 分类别名 是否被占用 7 if (results.length === 2) return res.cc('分类名称与别名被占用,请更换后重试!') 8 if (results.length === 1 && results[0].name === req.body.name) return res.cc('分类名称被占用,请更换后重试!') 9 if (results.length === 1 && results[0].alias === req.body.alias) return res.cc('分类别名被占用,请更换后重试!') 10 11 // TODO:更新文章分类 12}) 13
4.5.5 实现更新文章分类的功能
- 定义更新文章分类的 SQL 语句:
1const sql = [`update ev_article_cate set ? where Id=?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 2
- 调用
db.query()执行 SQL 语句:
1db.query(sql, [req.body, req.body.Id], (err, results) => { 2 // 执行 SQL 语句失败 3 if (err) return res.cc(err) 4 5 // SQL 语句执行成功,但是影响行数不等于 1 6 if (results.affectedRows !== 1) return res.cc('更新文章分类失败!') 7 8 // 更新文章分类成功 9 res.cc('更新文章分类成功!') 10}) 11
5. 文章管理
5.1 新建 ev_articles 表

5.2 发布新文章
5.2.0 实现步骤
- 初始化路由模块
- 初始化路由处理函数模块
- 使用 multer 解析表单数据
- 验证表单数据
- 实现发布文章的功能
5.2.1 初始化路由模块
- 创建
/router/article.js路由模块,并初始化如下的代码结构:
1// 导入 express 2const express = require('express') 3// 创建路由对象 4const router = express.Router() 5 6// 发布新文章 7router.post('/add', (req, res) => { 8 res.send('ok') 9}) 10 11// 向外共享路由对象 12module.exports = router 13
- 在
app.js中导入并使用文章的路由模块:
1// 导入并使用文章路由模块 2const articleRouter = require('./router/article') 3// 为文章的路由挂载统一的访问前缀 /my/article 4app.use('/my/article', articleRouter) 5
5.2.2 初始化路由处理函数模块
- 创建
/router_handler/article.js路由处理函数模块,并初始化如下的代码结构:
1// 发布新文章的处理函数 2exports.addArticle = (req, res) => { 3 res.send('ok') 4} 5
- 修改
/router/artcate.js中的代码如下:
1const express = require('express') 2const router = express.Router() 3 4// 导入文章的路由处理函数模块 5const article_handler = require('../router_handler/article') 6 7// 发布新文章 8router.post('/add', article_handler.addArticle) 9 10module.exports = router 11
5.2.3 使用 multer 解析表单数据
注意:使用
express.urlencoded()中间件无法解析multipart/form-data格式的请求体数据。
当前项目,推荐使用 multer 来解析
multipart/form-data格式的表单数据。https://www.npmjs.com/package/multer
- 运行如下的终端命令,在项目中安装
multer:
1npm i multer@1.4.2 2
- 在
/router_handler/article.js模块中导入并配置multer:
1// 导入解析 formdata 格式表单数据的包 2const multer = require('multer') 3// 导入处理路径的核心模块 4const path = require('path') 5 6// 创建 multer 的实例对象,通过 dest 属性指定文件的存放路径 7const upload = multer({ dest: path.join(__dirname, '../uploads') }) 8
- 修改
发布新文章的路由如下:
1// 发布新文章的路由 2// upload.single() 是一个局部生效的中间件,用来解析 FormData 格式的表单数据 3// 将文件类型的数据,解析并挂载到 req.file 属性中 4// 将文本类型的数据,解析并挂载到 req.body 属性中 5router.post('/add', upload.single('cover_img'), article_handler.addArticle) 6
- 在
/router_handler/article.js模块中的addArticle处理函数中,将multer解析出来的数据进行打印:
1// 发布新文章的处理函数 2exports.addArticle = (req, res) => { 3 console.log(req.body) // 文本类型的数据 4 console.log('--------分割线----------') 5 console.log(req.file) // 文件类型的数据 6 7 res.send('ok') 8}) 9
5.2.4 验证表单数据
实现思路:通过 express-joi 自动验证 req.body 中的文本数据;通过 if 判断手动验证 req.file 中的文件数据;
- 创建
/schema/article.js验证规则模块,并初始化如下的代码结构:
1// 导入定义验证规则的模块 2const joi = require('@hapi/joi') 3 4// 定义 标题、分类Id、内容、发布状态 的验证规则 5const title = joi.string().required() 6const cate_id = joi.number().integer().min(1).required() 7const content = joi.string().required().allow('') 8const state = joi.string().valid('已发布', '草稿').required() 9 10// 验证规则对象 - 发布文章 11exports.add_article_schema = { 12 body: { 13 title, 14 cate_id, 15 content, 16 state, 17 }, 18} 19
- 在
/router/article.js模块中,导入需要的验证规则对象,并在路由中使用:
1// 导入验证数据的中间件 2const expressJoi = require('@escook/express-joi') 3// 导入文章的验证模块 4const { add_article_schema } = require('../schema/article') 5 6// 发布新文章的路由 7// 注意:在当前的路由中,先后使用了两个中间件: 8// 先使用 multer 解析表单数据 9// 再使用 expressJoi 对解析的表单数据进行验证 10router.post('/add', upload.single('cover_img'), expressJoi(add_article_schema), article_handler.addArticle) 11
- 在
/router_handler/article.js模块中的addArticle处理函数中,通过if判断客户端是否提交了封面图片:
1// 发布新文章的处理函数 2exports.addArticle = (req, res) => { 3 // 手动判断是否上传了文章封面 4 if (!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数!') 5 6 // TODO:表单数据合法,继续后面的处理流程... 7}) 8
5.2.5 实现发布文章的功能
- 整理要插入数据库的文章信息对象:
1// 导入处理路径的 path 核心模块 2const path = require('path') 3 4const articleInfo = { 5 // 标题、内容、状态、所属的分类Id 6 ...req.body, 7 // 文章封面在服务器端的存放路径 8 cover_img: path.join('/uploads', req.file.filename), 9 // 文章发布时间 10 pub_date: new Date(), 11 // 文章作者的Id 12 author_id: req.user.id, 13} 14
- 定义发布文章的 SQL 语句:
1const sql = [`insert into ev_articles set ?`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.set.md) 2
- 调用
db.query()执行发布文章的 SQL 语句:
1// 导入数据库操作模块 2const db = require('../db/index') 3 4// 执行 SQL 语句 5db.query(sql, articleInfo, (err, results) => { 6 // 执行 SQL 语句失败 7 if (err) return res.cc(err) 8 9 // 执行 SQL 语句成功,但是影响行数不等于 1 10 if (results.affectedRows !== 1) return res.cc('发布文章失败!') 11 12 // 发布文章成功 13 res.cc('发布文章成功', 0) 14}) 15
- 在
app.js中,使用express.static()中间件,将uploads目录中的图片托管为静态资源:
1// 托管静态资源文件 2app.use('/uploads', express.static('./uploads')) 3
