目录
exports 和 module.exports 的使用误区
CORS 响应头部 - Access-Control-Allow-Origin
CORS 响应头部 - Access-Control-Allow-Headers
CORS 响应头部 - Access-Control-Allow-Methods
为什么 JavaScript 可以在浏览器中被执行?
不同的浏览器使用不同的 JavaScript 解析引擎:
Chrome 浏览器 => V8 解析引擎性能最好
为什么 JavaScript 可以操作 DOM 和 BOM?
每个浏览器都内置了 DOM、BOM 这样的 API函数,因此,浏览器中的 JavaScript 才可以调用它们。
浏览器中的 JavaScript 运行环境
运行环境是指代码正常运行所需的必要环境
总结:
① V8 引擎负责解析和执行 JavaScript 代码。
② 内置 API 是由运行环境(浏览器)提供的特殊接口,只能在所属的运行环境中被调用。
Node.js 简介
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 的官网地址: Node.js
Node.js 中的 JavaScript 运行环境
① 浏览器是 JavaScript 的前端运行环境。
② Node.js 是 JavaScript 的后端运行环境
③ Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。
Node.js 可以做什么
- 基于 Express 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用
- 基于 Electron 框架(https://electronjs.org/),可以构建跨平台的桌面应用
- 基于 restify 框架(http://restify.com/),可以快速构建 API 接口项目
- 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc...
Node.js 的学习路径:
JavaScript 基础语法 + Node.js 内置 API 模块(fs、path、http等)+ 第三方 API 模块(express、mysql 等)
下载并安装 Node.js
Node.js 的官网地址: Node.js
- 区分 LTS 版本和 Current 版本的不同
① LTS 为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装 LTS 版本的 Node.js。
② Current 为新特性尝鲜版,对热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本中可能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用 Current 版本的 Node.js。
查看已安装的 Node.js 的版本号
打开终端,在终端输入命令 node –v 后,按下回车键,即可查看已安装的 Node.js 的版本号。
Windows 系统快速打开终端的方式:
使用快捷键(Windows徽标键 + R)打开运行面板,输入 cmd 后直接回车,即可打开终端。
在 Node.js 环境中执行 JavaScript 代码
打开 cmd 终端
① 打开终端 win + R , 输入 cmd
② 进入指定的文件夹 cd 文件夹路径
③ 输入 node 要执行js文件名
切换盘符: 回到最顶端位子, C: 或 D:
打开 PowerShell 终端
到指定文件夹右击,点击 在终端打开 (没有出现就按住shift右击)
然后就可以直接输入 node 要执行js文件名
了解终端常用的快捷键
使用 ↑ 键,可以快速定位到上一次执行的命令
使用 tab 键,能够快速补全路径
使用 esc 键,能够快速清空当次已输入的命令
使用 命令 cls ,可以清空终端
fs 文件系统模块
fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求。
如果要在 JavaScript 代码中,使用 fs 模块来操作文件,则需要使用如下的方式先导入它:
const fs = require('fs')
fs.readFile() 方法,用来读取指定文件中的内容
fs.writeFile() 方法,用来向指定的文件中写入内容
readFile() 和 writeFile() 方法 是 异步 的, 可以使用 嵌套 的方法 来 规定执行顺序
读取指定文件中的内容
fs.readFile() 的语法格式
fs.readFile(path[, options], callback)
参数解读:
参数1 path : 必选参数,字符串,表示文件的路径。
参数2 options:可选参数,表示以什么编码格式来读取文件。
参数3 callback:必选参数,文件读取完成后,通过回调函数拿到读取的结果。
fs.readFile() 的示例代码
以 utf8 的编码格式,读取指定文件的内容,并打印 err 和 dataStr 的值:
const fs = require('fs')
fs.readFile('./files1/1.txt', 'utf8', function (err, dataStr) {
console.log(err)
console.log(dataStr)
})
判断文件是否读取成功
向指定的文件中写入内容
fs.writeFile() 的语法格式
使用 fs.writeFile() 方法,可以向指定的文件中写入内容,也可以创建文件并写入内容,但是不能创建文件夹
语法格式如下:
fs.writeFile(file, data[, options], callback)
参数解读:
参数1:必选参数,需要指定一个文件路径的字符串,表示文件的存放路径。
参数2:必选参数,表示要写入的内容。
参数3:可选参数,表示以什么格式写入文件内容,默认值是 utf-8。
参数4:必选参数,文件写入完成后的回调函数。
fs.writeFile() 的示例代码
const fs = require('fs')
fs.writeFile('file11/2.txt', 'hello Node.js', function (err) {
console.log(err)
})
判断文件是否写入成功
fs 模块 - 路径动态拼接的问题
在使用 fs 模块操作文件时,如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时,很容易出现路径动态拼接错误的问题。
原因:代码在运行的时候,会以执行 node 命令时所处的目录,动态拼接出被操作文件的完整路径。
解决方案:在使用 fs 模块操作文件时,直接提供完整的路径,不要提供 ./ 或 ../ 开头的相对路径,从而防止路径动态拼接的问题。
解决步骤:vscode,右击点击复制路径,粘贴,将其中的 \ 改为 \\
问题:可操作性以及维护性差
使用 __dirname 解决动态拼接的问题
__dirname 表示 当前文件所在的文件夹的目录
__filename 表示当前文件的具体位置
path 路径模块
path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。
如果要在 JavaScript 代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它:
const path = require('path')
例如:
path.join() 方法,用来将多个路径片段拼接成一个完整的路径字符串
path.basename() 方法,用来从路径字符串中,将文件名解析出来
path.join() 路径拼接
使用 path.join() 方法,可以把多个路径片段拼接为完整的路径字符串:
const path = require('path')
const fs = require('fs')
// ../ 表示去掉前面的一个
const pathStr = path.join('/a', '/b/c', '../', './d', 'e')
console.log(pathStr) // \a\b\d\e
const pathStr2 = path.join(__dirname, '/files/1.txt')
console.log(pathStr2) // 当前文件所在目录\files\1.txt
注意:今后凡是涉及到路径拼接的操作,都要使用 path.join() 方法进行处理。不要直接使用 + 进行字符串的拼接。
path.basename() 获取文件中的文件名
path.basename(path[, ext])
参数解读:
path 字符串, 必选参数, 表示一个路径的字符串
ext 字符串,可选参数,表示文件扩展名
const path = require('path')
// 定义文件的存放路径
const fpath = '/a/b/c/index.html'
const fullName = path.basename(fpath)
console.log(fullName) // index.html
const nameWithoutExt = path.basename(fpath, '.html')
console.log(nameWithoutExt) // index
path.extname() 获取路径中的文件扩展名
path.extname(path)
参数解读:
path 字符串,必选参数,表示一个路径
返回: 得到 扩展名字符串
综合案例:时钟案例
需求: 将 index.html 页面(此页面html、css、js放在了一起)拆分成三个文件,分别是 index.html 、index.css 、index.js , 并将拆分出来的3个文件,存放到 clock 目录中
const fs = require('fs')
const path = require('path')
const { domainToUnicode } = require('url')
// 定义正则表达式
// 匹配 <style>...</style>
const regStyle = /<style>[\s\S]*<\/style>/ // 这儿要在 /style 前面加个 \
// 匹配 <script>...</script>
const regScript = /<script>[\s\S]*<\/script>/
// 调用 fs.readFile() 读取文件内容
fs.readFile(path.join(__dirname, './index.html'), 'utf8', (err, dataStr) => {
if (err) return console.log('读取HTML文件失败')
// 读取成功后,调用对应的方法,拆解出 html,css,js
resolveCss(dataStr)
resolveHTML(dataStr)
resolveJS(dataStr)
})
// 定义 处理 css 方法
function resolveCss(htmlStr) {
// 使用正则 exec() 来截取 css样式部分
const r1 = regStyle.exec(htmlStr)
const strCss = r1[0].replace('<style>', '').replace('</style>', '')
// 将提取出来的css样式,写入 指定文件夹
fs.writeFile(path.join(__dirname, './clock/index.css'), strCss, (err) => {
if (err) return console.log('写入css样式失败' + err.code)
console.log('写入css样式成功')
})
}
// 定义 处理 JS 方法
function resolveJS(htmlStr) {
// 使用正则 exec() 来截取 JS样式部分
const r1 = regScript.exec(htmlStr)
const strJS = r1[0].replace('<script>', '').replace('</script>', '')
// 将提取出来的JS样式,写入 指定文件夹
fs.writeFile(path.join(__dirname, './clock/index.js'), strJS, (err) => {
if (err) return console.log('写入JS样式失败' + err.code)
console.log('写入JS样式成功')
})
}
// 定义 处理 JS 方法
function resolveHTML(htmlStr) {
// 使用 replace() 来截取 HTML样式部分
const strHTML = htmlStr
.replace(regStyle, '<link rel="stylesheet" href="./index.css">')
.replace(regScript, '<script src="./index.js"></script>')
// 将提取出来的HTML样式,写入 指定文件夹
fs.writeFile(path.join(__dirname, './clock/index.html'), strHTML, (err) => {
if (err) return console.log('写入HTML样式失败' + err.code)
console.log('写入HTML样式成功')
})
}
案例的俩个注意点:
- fs.writeFile() 方法只能用来创建文件,不能用来创建路径
- 重复调用 fs.writeFile() 写入同一个文件,新写入的内容会覆盖之前的旧内容
- 正则表达式中, 出现 / 可以 用 \/ 来解决 // 的冲突
HTTP 模块
在网络节点中,负责消费资源的电脑,叫做客户端;负责对外提供网络资源的电脑,叫做服务器。
http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的http.createServer() 方法 ,就能方便的把一台普通的电脑,变成一台 Web 服务器,从而对外提供 Web 资源服务。
如果要希望使用 http 模块创建 Web 服务器,则需要先导入它:
const http = require('http')
进一步理解 http 模块的作用
服务器和普通电脑的区别在于,服务器上安装了 web 服务器软件,例如:IIS、Apache 等。通过安装这些服务器软件,就能把一台普通的电脑变成一台 web 服务器。
在 Node.js 中,我们不需要使用 IIS、Apache 等这些第三方 web 服务器软件。因为我们可以基于 Node.js 提供的http 模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供 web 服务。
服务器相关的概念
IP 地址
IP 地址就是互联网上每台计算机的唯一地址,因此 IP 地址具有唯一性。
IP 地址的格式:通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d 都是 0~255 之间的十进制整数。例如:用点分十进表示的 IP地址(192.168.1.1)
注意:
① 互联网中每台 Web 服务器,都有自己的 IP 地址,例如:大家可以在 Windows 的终端中运行 ping www.baidu.com 命令,即可查看到百度服务器的 IP 地址。
② 在开发期间,自己的电脑既是一台服务器,也是一个客户端,为了方便测试,可以在自己的浏览器中输入 127.0.0.1 这个IP 地址,就能把自己的电脑当做一台服务器进行访问了。
域名和域名服务器
尽管 IP 地址能够唯一地标记网络上的计算机,但IP地址是一长串数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,即所谓的域名(Domain Name)地址。
IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS,Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,域名服务器就是提供 IP 地址和域名之间的转换服务的服务器。
注意:
① 单纯使用 IP 地址,互联网中的电脑也能够正常工作。但是有了域名的加持,能让互联网的世界变得更加方便。
② 在开发测试期间, 127.0.0.1 对应的域名是 localhost,它们都代表我们自己的这台电脑,在使用效果上没有任何区别
端口号
在一台电脑中,可以运行成百上千个 web 服务。每个 web 服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的 web 服务进行处理
注意:
① 每个端口号不能同时被多个 web 服务占用。
② 在实际应用中,URL 中的 80 端口可以被省略。
创建最基本的 web 服务器
- 导入 http 模块
- 创建 web 服务器实例
- 为服务器实例绑定 request 事件,监听客户端的请求
- 启动服务器
// 1. 导入 http 模块
const http = require('http')
// 2. 创建 web 服务器实例
const server = http.createServer()
// 3. 为服务器实例绑定 request 事件
server.on('request', (req, res) => {
// 只要有客户端请求我们自己的服务器,就会触发 request 事件, 从而调用这个事件处理函数
console.log('Someone visit our web server.')
})
// 4. 启动服务器
server.listen(8080, () => {
console.log('http server running at http://127.0.0.1:8080')
})
ctrl + c 可以停掉终端服务器
req 请求对象
只要服务器接收到了客户端的请求,就会调用通过 server.on() 为服务器绑定的 request 事件处理函数。
如果想在事件处理函数中,访问与客户端相关的数据或属性,可以使用如下的方式:
server.on('request', (req, res) => {
// req 是 请求对象,它包含了与客户端相关的数据和属性,例如:
// req.url 是 客户端请求的 URL地址
// req.method 是 客户端的 method 请求类型
console.log(req.url, req.method)
})
res 响应对象
在服务器的 request 事件处理函数中,如果想访问与服务器相关的数据或属性,可以使用如下的方式:
server.on('request', (req, res) => {
// req 是 请求对象,它包含了与客户端相关的数据和属性,例如:
// req.url 是 客户端请求的 URL地址
// req.method 是 客户端的 method 请求类型
console.log(req.url, req.method)
const str = `Your request url is ${req.url}, and request method is ${req.method}`
// res.end() 方法的作用:
// 向客户端发送指定的内容,并结束这次请求处理过程
res.end(str)
})
解决中文乱码问题
当调用 res.end() 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
server.on('request', (req, res) => {
const str = `你请求的 URL 地址是 ${req.url}, 请求的 method 是 ${req.method}`
// 为了防止中文显示乱码的问题
// 需要设置响应头 Content-Type 的值为 text/html; charset=utf-8
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(str)
})
根据不同的 url 响应不同的 html 内容
核心实现步骤
① 获取请求的 url 地址
② 设置默认的响应内容为 404 Not found
③ 判断用户请求的是否为 / 或 /index.html 首页
④ 判断用户请求的是否为 /about.html 关于页面
⑤ 设置 Content-Type 响应头,防止中文乱码
⑥ 使用 res.end() 把内容响应给客户端
动态响应内容
server.on('request', (req, res) => {
const url = req.url // 1. 获取请求的 url 地址
let content = '<h1>404 Not found!</h1>' // 2. 设置默认的内容为 404 Not found
if (url === '/' || url === '/index.html') {
content = '<h1>首页</h1>' // 3. 用户请求的是首页
} else if (url === '/about.html') {
content = '<h1>关于页面</h1>' // 4. 用户请求的关于页面
}
// 5. 设置 content-type 响应头,防止中文乱码
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(content) // 6. 把内容发送给客户端
})
案例 - 实现 clock 时钟的 web 服务器
// 1. 导入需要的模块
const http = require('http')
const fs = require('fs')
const path = require('path')
// 2.1 创立基本的 web 服务器
const server = http.createServer()
// 2.2 监听 web 服务器的 request 事件
server.on('request', (req, res) => {
// 3.1 获取到客户端请求的 URL 地址
const url = req.url
// 3.2 把请求的 URL 地址,映射为本地文件的存放路径
let fpath = ''
// 5. 优化,帮用户节省麻烦
if (url === '/') {
fpath = path.join(__dirname, './clock/index.html')
} else {
fpath = path.join(__dirname, './clock', url)
}
// 4.1 根据映射过来的文件路径读取文件的内容
fs.readFile(fpath, 'utf8', (err, dataStr) => {
// 4.2 读取文件失败后,向客户端响应固定的 错误信息
if (err) return res.end('404 Not fount.')
// 4.3 读取文件成功后,将 读取成功的内容 响应给客户端
// 这儿不用考虑中文乱码的问题
res.end(dataStr)
})
})
// 2.3 启动服务器
server.listen(80, () => {
console.log('http server running at http://127.0.0.1')
})
模块化
模块化的基本概念
模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。
编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块。
把代码进行模块化拆分的好处:
- 提高了代码的复用性
- 提高了代码的可维护性
- 可以实现按需加载
模块化规范
模块化规范就是对代码进行模块化的拆分与组合时,需要遵守的那些规则。
Node.js 中的模块化
Node.js 中模块的分类
Node.js 中根据模块来源的不同,将模块分为了 3 大类
- 内置模块(内置模块是由 Node.js 官方提供的,例如 fs、path、http 等)
- 自定义模块(用户创建的每个 .js 文件,都是自定义模块)
- 第三方模块(由第三方开发出来的模块,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需要先下载)
加载模块
使用 require() 方法,可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。
// 加载内置的 fs 模块
const fs = require('fs')
// 加载用户自定义模块
const custom = require('./custom.js')
// 加载第三方模块(具体使用下面讲)
const moment = require('moment')
注意:① 使用 require() 方法加载其它模块时,会执行被加载模块中的代码
② 使用 require() 加载用户自定义模块,可以省略 .js 的 后缀名
const sb2 = require('./sb2')
console.log(sb2)
Node.js 中的模块作用域
和函数作用域类似,在自定义模块中定义的变量、方法等成员,只能在当前模块内被访问,这种模块级别的访问限制,叫做模块作用域
这也是为什么上述 变量的返回值 为 { } , 这是由于 模块作用域 , 无法访问到 其他模块中的私有成员
好处: 防止了全局变量污染的问题
向外共享模块作用域中的成员
module 对象
在每个 .js 自定义模块中都有一个 module 对象,它里面存储了和当前模块有关的信息,打印如下:
module.exports 对象
在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用。
外界用 require() 方法导入自定义模块时,得到的就是 module.exports 所指向的对象。
使用 require() 方法导入模块时,导入的结果,永远以 module.exports 指向的对象为准。
exports 对象
由于 module.exports 单词写起来比较复杂,为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports 和 module.exports 指向同一个对象。最终共享的结果,还是以 module.exports 指向的对象为准。
exports 和 module.exports 的使用误区
时刻谨记,require() 模块时,得到的永远是 module.exports 指向的对象:
注意:为了防止混乱,建议大家不要在同一个模块中同时使用 exports 和 module.exports
Node.js 中的模块化规范
Node.js 遵循了 CommonJS 模块化规范,CommonJS 规定了模块的特性和各模块之间如何相互依赖。
CommonJS 规定:
① 每个模块内部,module 变量代表当前模块。
② module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。
③ 加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。
包
Node.js 中的第三方模块又叫做包。
不同于 Node.js 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。
包是基于内置模块封装出来的,提供了更高级、更方便的 API,极大的提高了开发效率。
从哪里下载包
从 https://www.npmjs.com/ 网站上搜索自己所需要的包
从 https://registry.npmjs.org/ 服务器上下载自己需要的包
如何下载包
npm, Inc. 公司提供了一个包管理工具,我们可以使用这个包管理工具
从 https://registry.npmjs.org/ 服务器把需要的包下载到本地使用
这个包管理工具的名字叫做 Node Package Manager(简称 npm 包管理工具),这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。
大家可以在终端中执行 npm -v 命令,来查看自己电脑上所安装的 npm 包管理工具的版本号:
npm 初体验
格式化时间的高级做法
使用 命令 npm i moment 来安装包
然后通过以下代码就可
// 1. 导入 moment 包
const moment = require('moment')
// 2. 参考 moment 官方 API文档, 调用对应的方法,对事件进行格式化
// 2.1 调用 moment() 方法, 得到当前的时间
// 2.2 针对当前的时间,调用 format() 方法, 按照指定的格式化进行时间的格式化
const dt = moment().format('YYY-MM-DD HH:mm:ss')
console.log(dt)
在项目中安装包的命令
如果想在项目中安装指定名称的包,需要运行如下的命令:
npm install 包的完整名称
上述的装包命令,可以简写成如下格式:
npm i 包的完整名称
初次装包后多了哪些文件
初次装包完成后,在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件。
其中:
node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时,就是从这个目录中查找并加载包。
package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息,例如包的名字、版本号、下载地址等。
注意:程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码,npm 包管理工具会自动维护它们。
安装指定版本的包
默认情况下,使用 npm install 命令安装包的时候,会自动安装最新版本的包。如果需要安装指定版本的包,可以在包名之后,通过 @ 符号指定具体的版本,例如:
npm i moment@2.22.2
包的语义化版本规范
包的版本号是以“点分十进制”形式进行定义的,总共有三位数字,例如 2.24.0
其中每一位数字所代表的的含义如下:
第1位数字:大版本
第2位数字:功能版本
第3位数字:Bug修复版本
版本号提升的规则:只要前面的版本号增长了,则后面的版本号归零。
包管理配置文件 package.json
npm 规定,在项目根目录中,必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。
例如:
- 项目的名称、版本号、描述等
- 项目中都用到了哪些包
- 哪些包只在开发期间会用到
- 那些包在开发和部署时都需要用到
多人协作的问题
比如: 整个项目的体积是 30.4M,第三方包的体积是 28.8M,项目源代码的体积 1.6M
遇到的问题:第三方包的体积过大,不方便团队成员之间共享项目源代码
解决方案: 共享时剔除node_modules
不共享到 Github , 别人怎么知道我用了哪些包呢
在项目根目录中,创建一个叫做 package.json 的配置文件,即可用来记录项目中安装了哪些包。从而方便剔除 node_modules 目录之后,在团队成员之间共享项目的源代码。
注意:今后在项目开发中,一定要把 node_modules 文件夹,添加到 .gitignore 忽略文件中。
快速创建 package.json
npm 包管理工具提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建 package.json 这个包管理
作用: 在执行命令所处的目录中,快速新建 package.json 文件
npm init -y
注意:
① 上述命令只能在英文的目录下成功运行!所以,项目文件夹的名称一定要使用英文命名,不要使用中文,不能出现空格。
② 运行 npm install 命令安装包的时候,npm 包管理工具会自动把包的名称和版本号,记录到 package.json 中。
dependencies 节点
package.json 文件中,有一个 dependencies 节点,专门用来记录您使用 npm install
命令安装了哪些包和它的版本号。
一次性安装所有的包
当我们拿到一个剔除了 node_modules 的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。否则会报类似于下面的错误:
可以运行 npm install 命令(或 npm i)一次性安装所有的依赖包:
执行此命令,npm 包管理工具会先读取 package.json 中的 dependencies 节点
读取到记录的所以依赖包名称和版本号后, npm 包管理工具会把这些包一次性下到项目中去
卸载包
可以运行 npm uninstall 具体包名 命令,来卸载指定的包:
npm uninstall moment
注意:npm uninstall 命令执行成功后,会把卸载的包,自动从 package.json 的 dependencies 中移除掉。
devDependencies 节点
如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到 devDependencies 节点中。
与之对应的,如果某些包在开发和项目上线之后都需要用到,则建议把这些包记录到 dependencies 节点中。
您可以使用如下的命令,将包记录到 devDependencies 节点中:
安装指定的包,并记录到 devDependencies 节点中
npm i 包名 -D
上面是简写,等价于下面写法 , --save-dev 可以写在包名前也可以写在后面 , 哪些是存哪里的,可以去 npm 搜索 它提示怎么安装
npm install 包名 --save-dev
解决下包速度慢的问题
为什么下包速度慢
在使用 npm 下包的时候,默认从国外的 https://registry.npmjs.org/ 服务器进行下载,此时,网络数据的传输需要经过漫长的海底光缆,因此下包速度会很慢。
淘宝 NPM 镜像服务器
淘宝在国内搭建了一个服务器,专门把国外官方服务器上的包同步到国内的服务器,然后在国内提供下包的服务。从而极大的提高了下包的速度。
切换 npm 的下包镜像源
下包的镜像源,指的就是下包的服务器地址。
# 查看当前的下包镜像源
npm config get registry
# 将下包的镜像源切换到淘宝镜像源
npm config set registry=https://registry.npmmirror.com/
# 检查镜像源是否下载成功
npm config get registry
nrm
为了更方便的切换下包的镜像源,我们可以安装 nrm 这个小工具,利用 nrm 提供的终端命令,可以快速查看和切换下包的镜像源。
# 通过 npm 包管理器, 将 nrm 安装为全局可用的工具
npm i nrm -g
# 查看所有可用的镜像源
nrm ls
# 将下包的镜像源切换为 taobao 镜像
nrm use taobao
包的分类
项目包
那些被安装到项目的 node_modules 目录中的包,都是项目包。
项目包又分为两类,分别是:
- 开发依赖包(被记录到 devDependencies 节点中的包,只在开发期间会用到)
- 核心依赖包(被记录到 dependencies 节点中的包,在开发期间和项目上线之后都会用到)
npm i 包名 -D 安装开发依赖包
npm i 包名 安装核心依赖包
全局包
在执行 npm install 包名 -g 命令时,则会把包安装为全局包。
全局包会被安装到 C:\Users\用户目录\AppData\Roaming\npm\node_modules 目录下。
npm i 包名 -g 全局安装指定的包
npm uninstall 包名 -g 卸载全局安装的包
注意:
① 只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令。
② 判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可
i5ting_toc
i5ting_toc 是一个可以把 md 文档转为 html 页面的小工具,使用步骤如下:
# i5ting_toc 安装为全局包
npm install -g i5ting_toc
# 调用 i5ting_toc , 实现 md 转 html 的 功能 , -o 代表 用默认浏览器打开
i5ting_toc -f 要转换的md文件路径 -o
规范的包结构
一个规范的包,它的组成结构,必须符合以下 3 点要求
① 包必须以单独的目录而存在
② 包的顶级目录下要必须包含 package.json 这个包管理配置文件
③ package.json 中必须包含 name,version,main 这三个属性,分别代表包的名字、版本号、包的入口。
注意:以上 3 点要求是一个规范的包结构必须遵守的格式,关于更多的约束,可以参考如下网址:
https://yarnpkg.com/zh-Hans/docs/package-json
开发属于自己的包
需要实现的功能
- 格式化日期
- 转义 HTML 中的特殊字符
- 还原 HTML 中的特殊字符
初始化包的基本结构
① 新建 huanglu-tools 文件夹,作为包的根目录
② 在 huanglu-tools 文件夹中,新建如下三个文件:
- package.json (包管理配置文件)
- index.js (包的入口文件)
- README.md (包的说明文档)
初始化 package.json
关于更多 license 许可协议相关的内容,可参考 https://www.jianshu.com/p/86251523e898
在 index.js 中定义格式化时间的方法
/* 定义格式化时间的函数 */
function dateFormat(dataStr) {
const dt = new Date(dataStr)
const y = padZero(dt.getFullYear())
const m = padZero(dt.getMonth() + 1)
const d = padZero(dt.getDate())
const hh = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
// 日期补零函数
function padZero(n) {
return n > 9 ? n : '0' + n
}
// 向外暴露需要的成员
module.exports = {
dateFormat
}
package.json 中 main属性 的作用
const huanghh = require('./huang-tools')
可以看出,当我们没有给 require 传入具体路径而是 传入 文件夹 , 如果没有给出指定的文件,就会去看 文件夹中有没有 package.json , 从而指向 package.json 中 main属性 的 值
在 index.js 中定义转义 HTML 的方法
/* 定义 转义 HTML 字符的函数 */
function htmlEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
在 index.js 中定义还原 HTML 的方法
/* 定义 还原 HTML 字符的函数 */
function htmlUnEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
将不同的功能进行模块化拆分
- 将格式化时间的功能,拆分到 src -> dateFormat.js 中
- 将处理 HTML 字符串的功能,拆分到 src -> htmlEscape.js 中
- 在 index.js 中,导入两个模块,得到需要向外共享的方法
- 在 index.js 中,使用 module.exports 把对应的方法共享出去
// 向外暴露需要的成员
module.exports = {
...date,
...escape
}
// 通过展开运算符
编写包的说明文档
包根目录中的 README.md 文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown 的格式写出来,方便用户参考。
README 文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。
我们所创建的这个包的 README.md 文档中,会包含以下 6 项内容:安装方式、导入方式、格式化时间、转义 HTML 中的特殊字符、还原 HTML 中的特殊字符、开源协议
发布包
注册 npm 账号
- 访问 https://www.npmjs.com/ 网站,点击 sign up 按钮,进入注册用户界面
- 填写账号相关的信息:Full Name、Public Email、Username、Password(这三个要记住,以后要用)
- 点击 Create an Account 按钮,注册账号
- 登录邮箱,点击验证链接,进行账号的验证
登录 npm 账号
npm 账号注册完成后,可以在终端中执行 npm login 命令,依次输入用户名、密码、邮箱后,即可登录成功
注意:在运行 npm login 命令之前,必须先把下包的服务器地址切换为 npm 的官方服务器。否则会导致发布包失败!
把包发布到 npm 上
将终端切换到包的根目录之后,运行 npm publish 命令,即可将包发布到 npm 上(注意:包名不能雷同)
删除已发布的包
运行 npm unpublish 包名 --force 命令,即可从 npm 删除已发布的包。
注意:
- npm unpublish 命令只能删除 72 小时以内发布的包
- npm unpublish 删除的包,在 24 小时内不允许重复发布
- 发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包!
模块的加载机制
优先从缓存中加载
模块在第一次加载后会被缓存。 这也意味着多次调用 require() 不会导致模块的代码被执行多次。
注意:不论是内置模块、用户自定义模块、还是第三方模块,它们都会优先从缓存中加载,从而提高模块的加载效率。
内置模块的加载机制
内置模块是由 Node.js 官方提供的模块,内置模块的加载优先级最高。
自定义模块的加载机制
使用 require() 加载自定义模块时,必须指定以 ./ 或 ../ 开头的路径标识符。在加载自定义模块时,如果没有指定 ./ 或 ../ 这样的路径标识符,则 node 会把它当作内置模块或第三方模块进行加载。
同时,在使用 require() 导入自定义模块时,如果省略了文件的扩展名,则 Node.js 会按顺序分别尝试加载以下的文件:
- 按照确切的文件名进行加载
- 补全 .js 扩展名进行加载
- 补全 .json 扩展名进行加载
- 补全 .node 扩展名进行加载
- 加载失败,终端报错
第三方模块的加载机制
如果传递给 require() 的模块标识符不是一个内置模块,也没有以 ‘./’ 或 ‘../’ 开头,则 Node.js 会从当前模块的父目录开始,尝试从 /node_modules 文件夹中加载第三方模块。
如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到文件系统的根目录
例如,假设在 'C:\Users\itheima\project\foo.js' 文件里调用了 require('tools'),则 Node.js 会按以下顺序查找:
- C:\Users\itheima\project\node_modules\tools
- C:\Users\itheima\node_modules\tools
- C:\Users\node_modules\tools
- C:\node_modules\tools
- 报错
目录作为模块
当把目录作为模块标识符,传递给 require() 进行加载的时候,有三种加载方式:
① 在被加载的目录下查找一个叫做 package.json 的文件,并寻找 main 属性,作为 require() 加载的入口
② 如果目录里没有 package.json 文件,或者 main 入口不存在或无法解析,则 Node.js 将会试图加载目录下的 index.js 文件。
③ 如果以上两步都失败了,则 Node.js 会在终端打印错误消息,报告模块的缺失:Error: Cannot find module 'xxx'
Express
官方给出的概念:Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架
作用: 快速的创建 Web 网站的服务器或 API 接口的服务器
Express 的本质:就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法。
Express 的中文官网: http://www.expressjs.com.cn/
Express 能做什么
对于前端程序员来说,最常见的两种服务器,分别是:
- Web 网站服务器:专门对外提供 Web 网页资源的服务器。
- API 接口服务器:专门对外提供 API 接口的服务器。
Express 的基本使用
Express 安装
在项目所处的目录中,运行如下的终端命令,即可将 express 安装到项目中使用:
npm i express@4.17.1
创建基本的 Web 服务器
// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()
// 3. 调用 app.listen(端口号, 启动成功后的回调函数) , 启动服务器
app.listen(80, () => {
console.log('express server running at http://127.0.0.1');
})
监听 GET 和 POST 请求
通过 app.get() 和 app.post() 方法,可以监听客户端的 GET 、 POST 请求,具体的语法格式如下:
把内容响应给客户端 res.send()
通过 res.send() 方法,可以把处理好的内容,发送给客户端:
// 4. 监听客户端的 GET 和 POST 请求, 并向客户端响应具体的内容
// 参数一:客户端请求的 URL 地址
/* 参数二: 请求对应的处理函数
req: 请求对象(包含了与请求相关的属性与方法)
res: 响应对象(包含了与响应相关的属性和方法) */
app.get('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
res.send({ name: 'zs', age: 19, gender: '男' })
})
app.post('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
res.send('请求成功')
})
获取 URL 中携带的查询参数 req.query
通过 req.query 对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数:
app.get('/',(req,res) => {
// req.query 默认是一个空对象
// 客户端用 ?name=zs&age=20 这种查询字符串形式,发送到服务器的参数
// 可以通过 req.query 对象访问到 req.query.name req.query.age
console.log(req.query)
})
注意点:
- req.query 默认是一个空对象 { }
- 客户端用 ?name=zs&age=20 这种查询字符串形式,发送到服务器的参数
- 可以通过 req.query 对象访问到 req.query.name req.query.age
获取 URL 中的动态参数 req.params
通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数:
// URL 地址中, 可以通过 :参数名 的形式, 匹配动态参数值
app.get('/user/:id/:username', (req, res) => {
// req.params 默认是一个空对象
// 里面存放着通过 : 动态匹配到的参数值
console.log(req.params)
res.send(req.params)
})
托管静态资源
express.static()
express 提供了一个非常好用的函数,叫做 express.static(),通过它,我们可以非常方便地创建一个静态资源服务器
例如,通过如下代码就可以将 public 目录下的图片(放在根目录)、CSS 文件、JavaScript 文件对外开放访问了
app.use(express.static('public'))
http://127.0.0.1/index.html
访问静态资源文件时,express.static() 函数会根据目录的添加顺序查找所需的文件。
注意:Express 在指定的静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在 URL 中。(就是说http://127.0.0.1 == public目录)
托管多个静态资源目录
如果要托管多个静态资源目录,请多次调用 express.static() 函数:
app.use(express.static('public'))
app.use(express.static('files'))
访问静态资源文件时,express.static() 函数会根据目录的添加顺序查找所需的文件。
挂载路径前缀
如果希望在托管的静态资源访问路径之前,挂载路径前缀,则可以使用如下的方式:
app.use('/public', express.static('public'))
Express 路由
在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数
格式如下:
app.METHOD(PATH, HANDLER)
例子如下:
app.get('/', function (req, res) {
res.send('Hello World')
})
路由的匹配过程
每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。
在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理。
路由的使用
最简单的用法
在 Express 中使用路由最简单的方式,就是把路由挂载到 app 上,示例代码如下:
const express = require('express')
// 创建 Web 服务器, 命名为 app
const app = express()
// 挂载路由
app.get('/', (req, res) => { res.send('Hellw World') })
app.post('/', (req, res) => { res.send('Post Request') })
// 启动 Web 服务器
app.listen(80, () => { console.log('serveer running at http://127.0.0.1') })
模块化路由
为了方便对路由进行模块化的管理,Express 不建议将路由直接挂载到 app 上,而是推荐将路由抽离为单独的模块。
步骤:
- 创建路由模块对应的 .js 文件
- 调用 express.Router() 函数创建路由对象
- 向路由对象上挂载具体的路由
- 使用 module.exports 向外共享路由对象
- 使用 app.use() 函数注册路由模块
创建路由模块
// 1. 导入 express
const express = require('express')
// 2. 创建路由对象
const router = express.Router()
// 3. 挂载路由
router.get('/', (req, res) => { res.send('Hellw World') })
router.post('/', (req, res) => { res.send('Post Request') })
// 4. 向外导出路由对象
module.exports = router
注册路由模块
// 导入 自己的 路由模块
const userRouter = require('./router.js')
// 2. 使用 app.use() 注册路由模块
app.use(userRouter)
为路由模块添加前缀
类似于托管静态资源时,为静态资源统一挂载访问前缀一样
// 导入 自己的 路由模块
const userRouter = require('./router.js')
// 2. 使用 app.use() 注册路由模块
app.use('/api', userRouter)
Express 中间件
中间件(Middleware ),特指业务流程的中间处理环节。
Express 中间件的概念
Express 中间件的调用流程
当一个请求到达 Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理。(上个中间件的输出是下个中间件的输入)
Express 中间件的格式
Express 的中间件,本质上就是一个 function 处理函数,Express 中间件的格式如下:
app.get('/', function(req, res, next) {
next()
})
注意:中间件函数的形参列表中,必须包含 next 参数。而路由处理函数中只包含 req 和 res。
next 函数的作用
next 函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由
Express 中间件的初体验
定义局部中间件函数
const mw = function(req,res,next) {
console.log('局部中间件')
next()
}
// 创建路由
app.get('/', mw,(req, res) => {
console.log('用了局部中间件')
})
app.get('/user', (req, res) => {
console.log('调用了 "/user" 路由')
})
定义多个局部中间件
可以在路由中,通过如下两种等价的方式,使用多个局部中间件
app.get('/', mw1, mw2, (req, res) => { res.send('Home page') })
app.get('/', [mw1, mw2], (req, res) => { res.send('Home page') })
定义全局中间件函数
通过调用 app.use(中间件函数),即可注册一个全局生效的中间件,示例代码如下:
// 定义一个最简单的中间件函数
const mw = function (req, res, next) {
console.log('这是最简单的中间件函数')
// 通过 next() 把流转关系,转交给下一个中间件或路由
next()
}
// 将 mw 注册为全局生效的中间件
app.use(mw)
// 定义俩个路由
app.get('/', (req, res) => {
console.log('调用了 "/" 路由')
res.send('Home page')
})
定义全局中间件的简化形式
// 定义一个最简单的中间件函数
app.use((req, res, next) => {
console.log('这是最简单的中间件函数')
next()
})
中间件的作用
多个中间件之间,共享同一份 req 和 res 。 基于这样的特性,我们可以在上游的中间件中,统一为 req 或res 对象添加自定义的属性和方法,供下游的中间件或路由进行使用
app.use((req, res, next) => {
// 获取到请求到达服务器的时间
const time = Date.now()
// 为 req对象,挂载自定义属性,从而把时间共享给后面的所有路由
// 这儿要是不用 中间件,那每个路由都要自己去获取时间
req.startTime = time
next()
})
定义多个全局中间件
可以使用 app.use() 连续定义多个全局中间件,客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行调用
了解中间件的5个使用注意事项
- 一定要在路由之前注册中间件
- 客户端发送过来的请求,可以连续调用多个中间件进行处理
- 执行完中间件的业务代码之后,不要忘记调用 next() 函数
- 为了防止代码逻辑混乱,调用 next() 函数后不要再写额外的代码
- 连续调用多个中间件时,多个中间件之间,共享 req 和 res 对象
中间件的分类
- 应用级别的中间件
- 路由级别的中间件
- 错误级别的中间件
- Express 内置的中间件
- 第三方的中间件
应用级别的中间件
通过 app.use() 或 app.METHOD() 函数,绑定到 app 实例上的中间件,叫做应用级别的中间件
app.get('/', mw1, mw2, (req, res) => { res.send('Home page') })
路由级别的中间件
绑定到 express.Router() 实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过,应用级别中间件是绑定到 app 实例上,路由级别中间件绑定到 router 实例上
错误级别的中间件
错误级别的中间件 function 处理函数,必须有 4 个形参,形参顺序从前到后,分别是 (err, req, res, next)。
app.get('/', function (req, res) { // 1. 路由
// 1.1 抛出一个自定义的错误
throw new Error('服务器内部发生了错误!')
res.send('Home Page.')
})
app.use(function (err, req, res, next) { // 2. 错误级别中间件
// 2.1 在服务器打印错误信息
console.log('发生了错误:' + err.message)
// 2.2 向客户端响应错误相关的内容
res.send('Error!' + err.message)
})
注意: 错误级别的中间件,必须注册在所有路由之后!
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+ 版本中可用)
// 配置解析 application/json 格式数据的内置中间件
app.use(express.json())
// 配置解析 application/x-www-form-urlencoded 格式数据的内置中间件
app.use(express.urlencoded({ extended: false }))
演示Express内置的中间件使用
express.json
express.urlencoded
// 通过 express.json() 这个中间件, 解析表单中的 JSON 格式的数据
app.use(express.json())
// 通过 express.urlencoded() 这个中间件, 解析表单中的 url_encoded 格式的数据
app.use(express.urlencoded({ extended: false }))
app.post('/user', function (req, res) {
// 在服务器,可以使用 req.body 属性, 来接收客户端发送过来的请求体数据
console.log(req.body) // JSON对象
// 如果没有配置解析表单 任意 格式的数据的中间件,则 req.body 默认等于 undefined
res.send('ok')
})
app.post('/book', function (req, res) {
// 在服务器,可以使用 req.body 来获取 JSON 格式的表单数据和 url-encoded 格式的数据
console.log(req.body) // JSON对象
// 没有 配置 解析表单 url-encoded 格式的数据的中间件, 则 默认为 {}
res.send('ok')
})
第三方的中间件
非 Express 官方内置的中间件,而是由第三方开发出来的 Express 中间件,叫做第三方中间件。
使用 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 事件时,获取到数据只是完整数据的一部分,需要手动对接收到的数据进行拼接。
// 1. 定义变量,用来存储客户端发送过来的请求体数据
let str = ''
// 2. 监听 req 对象的 data 事件(客户端发送过来的请求体数据)
req.on('data', (chunk)=>{
// 3. 拼接请求体数据,隐式转换为字符串
str += chunk
})
② 监听 req 的 end 事件
当客户端最终把所有数据发送到服务器之后,会自动触发 req 的 end 事件。
因此,我们可以在 req 的 end 事件中,拿到并处理完整的请求体数据。
③ 使用 querystring 模块解析请求体数据
Node.js 内置了一个 querystring 模块,专门用来处理查询字符串。通过这个模块提供的 parse() 函数,可以轻松把查询字符串,解析成对象的格式。
注意: querystring已被弃用
解决方法: 命令 npm i querystringify 下载 querystringify插件
导入插件 const qs = require('querystringify')
详细可见: https://www.jianshu.com/p/dd83279c5ebe
④ 将解析出来的数据对象挂载为 req.body
为了方便在后续的业务处理流程中,能够直接访问当前中间件解析出来的请求体对象,我们将解析出来的数据,挂载为 req 的自定义属性,命名为 req.body。
总的代码:
const express = require('express')
const app = express()
// 导入处理 querystring 的 Node.js 内置模块
const qs = require('querystringify')
// 这是 解析表单数据的中间件
app.use((req, res, next) => {
// 1. 定义变量,用来存储客户端发送过来的请求体数据
let str = ''
// 2. 监听 req 对象的 data 事件(客户端发送过来的请求体数据)
req.on('data', (chunk) => {
// 3. 拼接请求体数据,隐式转换为字符串
str += chunk
})
// 监听 req 对象 的 end 事件(请求体发送完毕后自动触发)
req.on('end', () => {
// console.log(str) // 这个是查询字符串的格式
// 调用 qs.parse() 方法,把查询字符串解析为对象
const body = qs.parse(str)
req.body = body // 将解析出来的请求体对象,挂载为 req.body 属性
next() // 最后一定要调用 next() 函数
})
})
app.post('/user', (req, res) => {
res.send(req.body)
})
app.listen(80, function () {
console.log('http://127.0.0.1')
})
将自定义中间件封装为模块
为了优化代码的结构,我们可以把自定义的中间件函数,封装为独立的模块
const qs = require('querystringify')
const bodyParser = (req, res, next) => {省略...}
// 向外导出解析请求体数据的中间件函数
module.exports = bodyParser
// 1. 导入自定义的中间件模块
const myBodyParser = require('./bodyParser')
// 2. 注册自定义的中间件模块
app.use(myBodyParser)
使用 Express 写接口
步骤:
- 创建基本的服务器
- 创建 API 路由模块
- 编写 GET 接口
- 编写 POST 接口
- CORS 跨域资源共享
服务器代码:
const express = require('express')
const app = express()
// 一定要在接口之前 注册 这个中间件, 用来解决 接口跨域的问题
const cors = require('cors')
app.use(cors())
// 想要拿到 URL-encoded 数据, 需要先配置 解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))
const router = require('./apiRouter')
app.use('/api', router)
app.listen(80, function () {
console.log('http://127.0.0.1')
})
路由代码:
const express = require('express')
const router = express.Router()
// 在这里挂在对应的路由
router.get('/get', (req, res) => {
// 通过 res.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
})
})
module.exports = router
使用 cors 中间件解决跨域问题
cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件,可以很方便地解决跨域问题
步骤:
① 运行 npm install cors 安装中间件
② 使用 const cors = require('cors') 导入中间件
③ 在路由之前调用 app.use(cors()) 配置中间件
CORS 跨域资源共享
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列传输的 HTTP 头组成,这些HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了 web 服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。
CORS 的注意事项
- CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。
- CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服务端接口(例如:IE10+、Chrome4+、FireFox3.5+)。
CORS 响应头部 - Access-Control-Allow-Origin
响应头部中可以携带一个 Access-Control-Allow-Origin 字段,其语法如下:
Access-Control-Allow-Origin: <origin> | *
其中,origin 参数的值指定了允许访问该资源的外域 URL。
例如,下面的字段值将只允许来自 http://huang.cn 的请求:
res.setHeader('Access-Control-Allow-Origin', 'http://huang.cn')
如果指定了 Access-Control-Allow-Origin 字段的值为通配符 *,表示允许来自任何域的请求
res.setHeader('Access-Control-Allow-Origin', '*')
CORS 响应头部 - Access-Control-Allow-Headers
默认情况下,CORS 仅支持客户端向服务器发送如下的 9 个请求头:
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)
如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-Allow-Headers 对额外的请求头进行声明,否则这次请求会失败!
// 允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
// 多个请求头之间使用 英文的逗号 进行分割
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header')
CORS 响应头部 - Access-Control-Allow-Methods
默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求。
如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。
// 只允许 POST 、 GET 、DELETE 、 HEAD 请求方法
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')
// 允许所有请求方式
res.setHeader('Access-Control-Allow-Methods', '*')
简单请求
同时满足以下两大条件的请求,就属于简单请求:
① 请求方式:GET、POST、HEAD 三者之一
② HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
简单请求的特点:客户端与服务器之间只会发生一次请求。
预检请求
只要符合以下任何一个条件的请求,都需要进行预检请求:
① 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
② 请求头中包含自定义头部字段
③ 向服务器发送了 application/json 格式的数据
在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。
预检请求的特点:OPTION 预检请求成功之后,才会发起真正的请求。
JSONP 接口
回顾 JSONP 的概念与特点
概念:浏览器端通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP。
特点:JSONP 仅支持 GET 请求,不支持 POST、PUT、DELETE 等请求。
创建 JSONP 接口的注意事项
如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置 CORS 中间件之前声明 JSONP 的接口。否则JSONP 接口会被处理成开启了 CORS 的接口。
在网页中使用 jQuery 发起 JSONP 请求
$('#jsonp').on('click', function () {
$.ajax({
method: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
success: function (res) {
console.log(res)
}
})
})
实现 JSONP 接口的步骤
app.get('/api/jsonp', (req, res) => {
// 1. 获取客户端发送过来的回调函数的名字
const funcName = req.query.callback
// 2. 得到要通过 JSONP 形式发送给客户端的数据
const data = { name: 'zs', age: 22 }
// 3. 拼接出一个函数调用的字符串
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4. 把拼接的字符串,响应给客户端的 <script> 标签进行解析执行
res.send(scriptStr)
})
数据库
数据库的基本概念
数据库(database)是用来组织、存储和管理数据的仓库。
为了方便管理互联网世界中的数据,就有了数据库管理系统的概念(简称:数据库)。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。
常见的数据库及分类
- MySQL 数据库(Community + Enterprise)
- Oracle 数据库(收费)
- SQL Server 数据库(收费)
- Mongodb 数据库(Community + Enterprise)
其中,MySQL、Oracle、SQL Server 属于传统型数据库(又叫做:关系型数据库 或 SQL 数据库)
而 Mongodb 属于新型数据库(又叫做:非关系型数据库 或 NoSQL 数据库),它在一定程度上弥补了传统型数据库的缺陷。(倆者结合使用更佳)
传统型数据库的数据组织结构
在传统型数据库中,数据的组织结构分为数据库(database)、数据表(table)、数据行(row)、字段(field)这 4 大部分组成。(类似于 Excel 的 工作簿 、工作表 、 每一行数据 、 列)
实际开发中库、表、行、字段的关系
① 在实际项目开发中,一般情况下,每个项目都对应独立的数据库。
② 不同的数据,要存储到数据库的不同表中,例如:用户数据存储到 users 表中,图书数据存储到 books 表中
③ 每个表中具体存储哪些信息,由字段来决定,例如:我们可以为 users 表设计 id、username、password 这 3 个字段
④ 表中的行,代表每一条具体的数据。
MySQL
安装并配置 MySQL
打开 MySQL 官方网站(http://www.mysql.com)
根据文档去一步一步照做
MySQL的基本使用
打开软件 MySQL Workbench 8.0 CE
连接数据库
了解主界面的组成部分
创建数据库
接下来出现的弹窗不用管,直接 下一步下一步就行
接下来出现的弹窗不用管,直接 下一步下一步就行
关闭设计好的数据表后,如果还想打开重新进行更改设计,可按上图操作
DataType 数据类型:
① int 整数
② varchar(len) 字符串
③ tinyint(1) 布尔值
④ text 文本,可以支持很多字符
字段的特殊标识:
① PK(Primary Key)主键、唯一标识
② NN(Not Null)值不允许为空
③ UQ(Unique)值唯一
④ AI(Auto Increment)值自动增长
手动向表中写入数据
使用 SQL 管理数据库
什么是 SQL
SQL(英文全称:Structured Query Language)是结构化查询语言,专门用来访问和处理数据库的编程语言。能够让我们以编程的形式,操作数据库里面的数据。
三个关键点:
- SQL 是一门数据库编程语言
- 使用 SQL 语言编写出来的代码,叫做 SQL 语句
- SQL 语言只能在关系型数据库中使用(例如 MySQL、Oracle、SQL Server)。非关系型数据库(例如 Mongodb)不支持 SQL 语言
SQL 能做什么
- 从数据库中查询数据
- 向数据库中插入新的数据
- 更新数据库中的数据
- 从数据库删除数据
- 可以创建新数据库
- 可在数据库中创建新表
- 可在数据库中创建存储过程、视图
- etc...
SQL 的 SELECT 语句 (查)
SELECT 语句用于从表中查询数据。执行的结果被存储在一个结果表中(称为结果集)。
语法格式如下:
-- 通过 * 把 users 表中所有的数据查询出来
select * from 表名称
-- 从 users 表中把 username 和 password 对应的数据查询出来alter
-- 多个 列 用 ,(逗号) 隔开
select username,password from users
注意:SQL 语句中的关键字对大小写不敏感。SELECT 等效于 select,FROM 等效于 from。
SQL 的 INSERT INTO 语句 (增行)
INSERT INTO 语句用于向数据表中插入新的数据行
-- 语法解读: 向指定的表中,插入如下几列数据,列的值通过 values —— 指定
-- 注意: 列和值要一一对应,多个列和多个值之间,使用英文逗号分隔
INSERT INTO 表单名 (列1名,列2名,...) VALUES (值1,值2,...)
-- 向 users 表中,插入一条 username 为 tony stark,password 为 098123 的用户数据
insert into users (username,password) values ('tony stark','098123')
SQL 的 UPDATE 语句 (更新某一行的某列)
UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值
-- 更新 某一列
-- 将 id 为 3 的用户密码 更新为 888888
update users set password=888888 where id=3
-- 更新多个列
-- 更新 id为2 的用户,把用户密码更新为 admin23 ,同时,把用户的状态更新为 1
update users set username='admin123',status=1 where id=2
SQL 的 DELETE 语句 (删除行)
-- 从指定的表中, 根据 WHERE 条件,删除对应的数据行
DELETE FROM 表名称 WHERE 列名称 = 值
-- 删除 users 表中, id 为 4 的用户
delete from users where id = 4
SQL 的 WHERE 子句
WHERE 子句用于限定选择的标准。在 SELECT、UPDATE、DELETE 语句中,皆可使用WHERE 子句来限定选择的标准
-- 查询语句中的 WHERE 条件
SELECT 列名称 FROM 表名称 WHERE 列 运算符 值
-- 更新语句中的 WHERE 条件
UPDATE 表名称 SET 列=新值 WHERE 列 运算符 值
-- 删除语句中的 WHERE 条件
DELETE FROM 表名称 WHERE 列 运算符 值
可在 WHERE 子句中使用的运算符
操作符 | 描述 |
---|---|
= | 等于 |
<> 或 != | 不等于 |
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
BETWEEN | 在某个范围内 |
LIKE | 搜索某种模式 |
-- 演示 where子句 的使用alter
select * from users where id > 1
select * from users where username != 'admin123'
SQL 的 AND 和 OR 运算符
AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来。
AND 表示必须同时满足多个条件,相当于 JavaScript 中的 && 运算符
OR 表示只要满足任意一个条件即可,相当于 JavaScript 中的 || 运算符
-- 使用 AND 来 显示所有状态为0且id小于3的用户
select * from users where status = 0 and id < 3
-- 使用 OR 来显示所有状态为1或username为zs 的用户alter
select * from users where status = 1 or username = 'zs'
SQL 的 ORDER BY 子句
ORDER BY 语句用于根据指定的列对结果集进行排序。
ORDER BY 语句默认按照升序对记录进行排序。
如果您希望按照降序对记录进行排序,可以使用 DESC 关键字。
-- 如下俩条等价, ASC 代表 升序 , 默认也是 升序排序
select * from users order by status
select * from users order by status asc
-- DESC 代表 降序排序
select * from users order by id desc
ORDER BY 子句 – 多重排序
-- 多重排序 ( 谁在前先考虑谁)
select * from users order by status asc, username desc
SQL 的 COUNT(*) 函数
SELECT COUNT(*) FROM 表名单
-- 查询 users 表中status为0的总数据条数
select count(*) from users where status=0
使用 AS 为列设置别名
-- 将列名称从 count(*) 改为 total
select count(*) as total from users where status = 0
-- 不仅可以给 count(*) 改名 , 还可以给普通的列改名alter
select username as uname, password as pwd from users
注意: 改的名只是当前有效
在项目中操作 MySQL
在项目中操作数据库的步骤
① 安装操作 MySQL 数据库的第三方模块(mysql)
② 通过 mysql 模块连接到 MySQL 数据库
③ 通过 mysql 模块执行 SQL 语句
安装 mysql 模块
mysql 模块是托管于 npm 上的第三方模块。它提供了在 Node.js 项目中连接和操作 MySQL 数据库的能力。
终端命令 npm i mysql
配置 mysql 模块
在使用 mysql 模块操作 MySQL 数据库之前,必须先对 mysql 模块进行必要的配置,主要的配置步骤如下:
// 1. 导入 mysql 模块
const mysql = require('mysql')
// 2. 建立与 MySQL 数据库的连接关系
const db = mysql.createPool({
host:'127.0.0.1', // 数据库的 IP 地址
user:'root', // 登录数据库的账号
password:'admin123', // 登录数据库的密码
database:'my_db_01' // 指定要操作哪个数据库
})
测试 mysql 模块能否正常工作
使用 db.query() 函数
db.query('SELECT 1', (err,result) => { // 这儿的 SELECT 1 没有任何意义
// err 成功的时候 为 null
if (err) return console.log(err.message)
// 只要打印出 [ RowDataPacket { '1': 1 } ] 的结果,就证明数据库链接正常
console.log(result)
})
注意: 查询语句尽量不要在 vscode中直接书写 , 最好先通过 workbench 验证确保无误后在运行命令
使用 mysql 模块操作 MySQL 数据库
查询数据
// 查询 users 中 所有的数据
db.query('select * from users', (err,result) => {
// err 成功的时候 为 null
if (err) return console.log(err.message)
// 注意执行的 select 语句, 返回的是 对象数组
console.log(result)
})
注意: select 语句 返回的是 对象数组
插入数据
// 向 users 表中,新增一条数据
// 其中 username 的值为 Spider-Man, password 的值为 pcc123
const user = {username: 'Spider-Man', password:'pcc123'}
// 定义待执行的 SQL 语句 这儿的 ? 用来 占位的
const sqlStr = 'insert into users (username, password) value (?, ?)'
// 执行 SQL 语句
db.query(sqlStr, [user.username, user.password],(err,result)=>{
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('插入数据成功') // 成功
})
insert 语句 返回的是 对象 ,对象中有个属性 affectedRows , 等于 1 时 代表成功
说明 id 的 唯一性
这边往外面插入一个数据后也没有占有原先被删除的id=4的 值, 而是 id=5, 这是因为 id 的唯一性
插入数据的便捷方式
向表中新增数据时,如果数据对象的每个属性和数据表的字段一一对应,则可以通过如下方式快速插入数据
// 演示 插入数据 的快捷方式
// 此为 要插入到 users 表中的数据对象
const user = { username: 'Spider-Man2', password: 'pcc123' }
// 定义待执行的 SQL 语句 , 其中英文的 ? 表示占位符
const sqlStr = 'insert into users set ?'
// 执行 SQL 语句 , 直接将 数据对象 当作 占位符 的值
db.query(sqlStr, user, (err, result) => {
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('插入数据成功') // 成功
})
更新数据
// 要更新的数据对象
const user = { id: 6, 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, result) => {
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('更新数据成功') // 成功
})
update 语句 返回的是 对象 ,对象中有个属性 affectedRows , 等于 1 时 代表成功
更新数据的便捷方式
更新表数据时,如果数据对象的每个属性和数据表的字段一一对应,则可以通过如下方式快速更新表数据:
const user = { id: 6, username: 'aaaa', password: '0000' }
// 要执行的 SQL 语句
const sqlStr = 'update users set ? where id=?'
// 调用 db.query函数 执行 SQL 语句
db.query(sqlStr, [user, user.id], (err, result) => {
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('更新数据成功') // 成功
})
删除数据
在删除数据时,推荐根据 id 这样的唯一标识,来删除对应的数据。
// 删除 id 为 5 的用户
const sqlStr = 'delete from users where id=?'
// 执行 SQL 语句
db.query(sqlStr, 5, (err, result) => {
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('删除数据成功') // 成功
})
注意: 如果 SQL 语句中有多个占位符,则必须使用数组为每个占位符指定具体的值
如果 SQL 语句中只有一个占位符,则可以省略数组
delete 语句 返回的是 对象 ,对象中有个属性 affectedRows , 等于 1 时 代表成功
标记删除(更新状态值)(逻辑删除)
使用 DELETE 语句,会把真正的把数据从表中删除掉。为了保险起见,推荐使用标记删除的形式,来模拟删除的动作。
所谓的标记删除,就是在表中设置类似于 status 这样的状态字段,来标记当前这条数据是否被删除。
当用户执行了删除的动作时,我们并没有执行 DELETE 语句把数据删除掉,而是执行了 UPDATE 语句,将这条数据对应的 status 字段标记为删除即可。
// 要执行的 SQL 语句
const sqlStr = 'update users set status=? where id=?'
// 调用 db.query函数 执行 SQL 语句
db.query(sqlStr, [1, 6], (err, result) => {
if (err) return console.log(err.message) // 失败
if (result.affectedRows === 1) console.log('更新数据成功') // 成功
})
前后端的身份认证
Web 开发模式
目前主流的 Web 开发模式有两种,分别是
① 基于服务端渲染的传统 Web 开发模式
② 基于前后端分离的新型 Web 开发模式
服务端渲染的 Web 开发模式
服务端渲染的概念:服务器发送给客户端的 HTML 页面,是在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用 Ajax 这样的技术额外请求页面的数据
服务端渲染的优缺点:
优点:
① 前端耗时少。因为服务器端负责动态生成 HTML 内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
② 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容,所以爬虫更容易爬取获得信息,更有利于 SEO。
缺点:
① 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
② 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。
前后端分离的 Web 开发模式
前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛应用。即后端不提供完整的 HTML 页面内容,而是提供一些 API 接口,使得前端可以获取到 json 数据;然后前端通过 Ajax 调用后端提供的 API 接口,拿到 json 数据之后再在前端进行 HTML 页面的拼接,最终展示在浏览器上。
前后端分离的优缺点
优点:
① 开发体验好。前端专注于 UI 页面的开发,后端专注于api 的开发,且前端有更多的选择性。
② 用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
③ 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。
缺点:不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方案:利用 Vue、React 等前端框架的 SSR (server side render)技术能够很好的解决 SEO 问题!)
如何选择 Web 开发模式
- 企业级网站 , 推荐 服务端渲染
- 类似后台管理页面 , 推荐 前后端分离
为了同时兼顾了首页的渲染速度和前后端分离的开发效率,一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,而其他的页面采用前后端分离开发模式。
身份认证
身份认证(Authentication)是指通过一定的手段,完成对用户身份的确认。
比如: 密码、二维码之类的
不同开发模式下的身份认证
① 服务端渲染推荐使用 Session 认证机制
② 前后端分离推荐使用 JWT 认证机制 (主流 token 形式 , 用于用户鉴权)
Session 认证机制
HTTP 协议的无状态性
HTTP 协议的无状态性,指的是客户端的每次 HTTP 请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次 HTTP 请求的状态。
如何突破 HTTP 无状态的限制
对于超市来说,为了方便收银员在进行结算时给 VIP 用户打折,超市可以为每个 VIP 用户发放会员卡。
现实生活中的会员卡身份认证方式,在 Web 开发中的专业术语叫做 Cookie
什么是 Cookie
Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称(Name)、一个值(Value)和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。
不同域名下的 Cookie 各自独立,每当客户端发起请求时,会自动把当前域名下所有未过期的 Cookie 一同发送到服务器。
Cookie 在身份认证中的作用
客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的 Cookie,客户端会自动将 Cookie 保存在浏览器中。
随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的 Cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份。
Cookie 不具有安全性
由于 Cookie 是存储在浏览器中的,而且浏览器也提供了读写 Cookie 的 API,因此 Cookie 很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过 Cookie 的形式发送给浏览器。
注意:千万不要使用 Cookie 存储重要且隐私的数据!比如用户的身份信息、密码等。
提高身份认证的安全性
为了防止客户伪造会员卡,收银员在拿到客户出示的会员卡之后,可以在收银机上进行刷卡认证。只有收银机确认存在的会员卡,才能被正常使用。
这种“会员卡 + 刷卡认证”的设计理念,就是 Session 认证机制的精髓。
Session 的工作原理
在 Express 中使用 Session 认证
配置 express-session 中间件
安装包 npm i express-session
// 导入 session 中间件
const session = require('express-session')
// 配置 session 中间件
app.use(
session({
secret:'keyboard cat', // secret 属性的值可以为任意字符串
resave: false, // 固定写法
saveUninitialized: true // 固定写法
})
)
向 session 中存数据
// 登录的 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 // 将自定义的用户的信息, 存储到 Session 中
req.session.islogin = true // 将用户的登录状态,存储到 Session 中
res.send({ status: 0, msg: '登录成功' })
})
清空 session
调用 req.session.destroy() 函数,即可清空服务器保存的 session 信息。
注意: 调用此函数,只会清空当前用户的 session信息
// 退出登录的接口
app.post('/api/logout', (req, res) => {
// TODO_04:清空 Session 信息
req.session.destroy()
res.send({
status:0,
msg:'退出登录成功'
})
})
了解 Session 认证的局限性
Session 认证机制需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域 Session 认证。
注意: 当前端请求后端接口不存在跨域问题的时候,推荐使用 Session 身份认证机制。
反之用 JWT 认证机制
JWT 认证机制
什么是 JWT
JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案。
JWT 的工作原理
Header.Payload.Signature
总结:用户的信息通过 Token 字符串的形式,保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用户的身份
JWT 的组成部分
JWT 通常由三部分组成,分别是 Header(头部)、Payload(有效荷载)、Signature(签名)。
三者之间使用英文的“.”分隔,格式如下:
Header.Payload.Signature
JWT 的三个部分各自代表的含义
JWT 的三个组成部分,从前到后分别是 Header、Payload、Signature。
- Payload 部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。
- Header 和 Signature 是安全性相关的部分,只是为了保证 Token 的安全性。
JWT 的使用方式
客户端收到服务器返回的 JWT 之后,通常会将它储存在 localStorage 或 sessionStorage 中
此后,客户端每次与服务器通信,都要带上这个 JWT 的字符串,从而进行身份认证。推荐的做法是把 JWT 放在 HTTP请求头的 Authorization 字段中
Authorization: Bearer <token>
在 Express 中使用 JWT
安装 JWT 相关的包
运行命令: npm install jsonwebtoken express-jwt
安装多个包可以用空格隔开
注意:
jsonwebtoken 用于生成 JWT 字符串
express-jwt 用于将 JWT 字符串解析还原成 JSON 对象
导入 JWT 相关的包
// TODO_01:安装并导入 JWT 相关的两个包,分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const { expressjwt: expressJWT } = require('express-jwt')
定义 secret 密钥
为了保证 JWT 字符串的安全性,防止 JWT 字符串在网络传输过程中被别人破解,我们需要专门定义一个用于加密和解密的 secret 密钥
① 当生成 JWT 字符串的时候,需要使用 secret 密钥对用户的信息进行加密,最终得到加密好的 JWT 字符串
② 当把 JWT 字符串解析还原成 JSON 对象的时候,需要使用 secret 密钥进行解密
// 定义 secret 密钥,建议将密钥命名为 secretKey
// 密钥的本质就是字符串, 随便写, 越复杂越好
const secretKey = 'huang ^_^ xiaoxiao'
在登录成功后生成 JWT 字符串
调用 jsonwebtoken 包提供的 sign() 方法,将用户的信息加密成 JWT 字符串,响应给客户端:
// 登录接口
app.post('/api/login', function (req, res) {
// 省略登录失败的代码
// 登录成功
// TODO_03:在登录成功之后,调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
// jwt.sign() 有三个参数, 分别代表 用户的信息对象 、 加密的密钥 、 配置对象,可以配置当前 token 的有效期
// 不要把密码等重要信息加到用户的信息对象中
const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
res.send({
status: 200,
message: '登录成功!',
token: tokenStr // 要发送给客户端的 token 字符串
})
})
将 JWT 字符串还原为 JSON 对象
客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的 Authorization 字段,将 Token 字符串发送到服务器进行身份认证。
此时,服务器可以通过 express-jwt 这个中间件,自动将客户端发送过来的 Token 解析还原成 JSON 对象:
// TODO_04:注册将 JWT 字符串解析还原成 JSON 对象的中间件
// 使用 app.use() 来注册中间件
// expressJWT({ secret: secretKey }) 就是用来 解析 Token 的中间件
// .unless({ path: [/^\/api\//] }) 用来指定哪些接口不需要访问权限
app.use(
expressJWT({
secret: secretKey,
algorithms: ['HS256'],
}).unless({ path: [/^\/api\//] }))
使用 req.auth 获取用户信息
当 express-jwt 这个中间件配置成功之后,即可在那些有权限的接口中,使用 req.auth 对象(老版本用 req.user),来访问从 JWT 字符串中解析出来的用户信息了
// 02 API 接口
app.get('/admin/getinfo', function (req, res) {
// TODO_05:使用 req.auth 获取用户信息,并使用 data 属性将用户信息发送给客户端
// 5 版本 使用的 是 req.user
console.log(req.auth )
res.send({
status: 200,
message: '获取用户信息成功!',
data: req.auth // 要发送给客户端的用户信息
})
})
捕获解析 JWT 失败后产生的错误
当使用 express-jwt 解析 Token 字符串时,如果客户端发送过来的 Token 字符串过期或不合法,会产生一个解析失败的错误,影响项目的正常运行。我们可以通过 Express 的错误中间件,捕获这个错误并进行相关的处理
// 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: '未知错误' })
})
JWT 总代码
// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
// TODO_01:安装并导入 JWT 相关的两个包,分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const { expressjwt: 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 = 'huang ^_^ xiaoxiao'
// TODO_04:注册将 JWT 字符串解析还原成 JSON 对象的中间件
// 使用 app.use() 来注册中间件
// expressJWT({ secret: secretKey }) 就是用来 解析 Token 的中间件
// .unless({ path: [/^\/api\//] }) 用来指定哪些接口不需要访问权限
app.use(
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 属性发送给客户端
// jwt.sign() 有三个参数, 分别代表 用户的信息对象 、 加密的密钥 、 配置对象,可以配置当前 token 的有效期
const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
res.send({
status: 200,
message: '登录成功!',
token: tokenStr // 要发送给客户端的 token 字符串
})
})
// 02 API 接口
app.get('/admin/getinfo', function (req, res) {
// TODO_05:使用 req.user 获取用户信息,并使用 data 属性将用户信息发送给客户端
console.log(req.auth)
res.send({
status: 200,
message: '获取用户信息成功!',
data: req.auth // 要发送给客户端的用户信息
})
})
// 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')
})
大事件项目知识点
对密码进行加密处理
在当前项目中,使用 bcryptjs
对用户密码进行加密,优点:
- 加密之后的密码,无法被逆向破解
- 同一明文密码多次加密,得到的加密结果各不相同,保证了安全性
步骤:
① 运行如下命令,安装指定版本的 bcryptjs
npm i bcryptjs@2.4.3
② 在 /router_handler/user.js
中,导入 bcryptjs
const bcrypt = require('bcryptjs')
③ 在注册用户的处理函数中,确认用户名可用之后,调用 bcrypt.hashSync(明文密码, 随机盐的长度)
方法,对用户的密码进行加密处理
// 对用户的密码 , 进行 bcrype 加密, 返回值是加密之后的密码字符串
userinfo.password = bcrypt.hashSync(userinfo.password, 10)
验证正则, 定义规范
使用 joi 和 @escook/express-joi 第三方包
使用 multer包 解析 multipart/form-data 格式的表单数据
ES6 的 模块化规范
ES6 模块化规范是浏览器与服务端通用的模块化开发规范。他的出现极大的降低了前端开发者的模块化学习成本,开发者不用额外学习 AMD、CMD 或 CommonJS 等模块化规划
ES6 模块化规范中定义:
- 每个JS文件都是一个独立的模块
- 导入其他模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
在 node.js 中体验 ES6模块化
node.js 中默认仅支持 CommonJS 模块化规范,若想 基于 node.js 体验学习 ES6 的模块化语法, 可以按照 如下俩个步骤进行配置:
① 确保安装了 v14.15.1 或 更高版本的 node.js
② 在 package.json 的根节点中添加 "type": "module" 节点
ES6 模块的基本语法
默认导出
默认导出的语法: export default 默认导出的成员
let n1 = 10 // 定义模块私有成员 n1
let n2 = 20 // 定义模块私有成员 n2 (外界访问不到 n2 ,因为它没有被共享出去)
function show() {} // 定义模块私有方法 show
export default { // 使用 export default 默认导出语法,向外共享 n1 和 show 俩个成员
n1,
show
}
默认导入
默认导入的语法: import 接收名称 from '模块标识符'
// 从 01.js 模块中导入 export default 向外共享的成员
// 并使用 m1 成员进行 接收
import m1 from './01.默认导出.js'
console.log(m1)
// 打印结果: { n1: 10, show: [Function: show] }
注意: 后缀名不能没有 .js
默认导出的注意事项
每个模块中,只允许使用唯一的一次 export default , 否者会报错
默认导入的注意事项
默认导入时的接收名称可以任意名称,只要是合法的成员名称即可
命名规则
1、由字母、数字、下划线和$符号组成,不能以数字开头
2、不能是关键字和保留字
3、严格区分大小写
按需导出
按需导出的语法: export 按需导出的成员
// 向外按需导出变量 s1
export let s1 = 'aaa'
// 向外按需导出变量 s2
export let s2 = 'bbb'
// 向外按需导出方法 say
export function say() { }
按需导入
按需导入的语法: import { s1 } form '模块标识符'
// 导入 模块成员 多个成员用英文 逗号 隔开
import { s1, s2, say } from './03.按需导出.js'
console.log(s1) // aaa
console.log(s2) // bbb
console.log(say) // [Function: say]
按需导出和按需导入的注意事项
① 每个模块中可以使用多次按需导出
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时,可以使用 as关键字 进行重命名
import { s1, s2 as str2, say } from './03.按需导出.js'
④ 按需导入(导出)可以和默认导入(导出)一起使用
// 按需导出可以和默认导出一起使用
export function say() { }
export default {
a: 2
}
// 也可以一起导出 , 默认导入不需要 {} , 和 按需导入用英文逗号隔开就可以了
import dad, { s1, s2 as str2, say } from './03.按需导出.js'
console.log(dad) // { a: 2 }
直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码,示例代码如下:
// 当前文件是 05_m3.js
// 在当前模块中执行一个 for循环操作
for (let i = 0; i < 3; i++) {
console.log(i)
}
// -------------- 分割线 ----------------
// 直接导入并执行 05_m3.js 中的代码,不需要得到模块向外共享的成员
import './05_m3.js'