# node **Repository Path**: moringtoday/node ## Basic Information - **Project Name**: node - **Description**: 学习node - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-05-10 - **Last Updated**: 2024-06-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: Node, Nodejs, JavaScript ## README # nodeJs ## 初识nodeJs > Node.js@ is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js > > 是一个基于 Chrome V8引的JavaScript 运行环境 **js在浏览器中运行证明是前端开发,js放在node中运行就是后端开发** Node.js 的官网地址: [Node.js (nodejs.org)](https://nodejs.org/en) ### nodeJs中的js运行 ![node在js运行环境](pic/node在js运行环境.png) - 浏览器是JavaScript 的前端运行环境 - Node.js 是JavaScript 的后端运行环境 - Node.js 中无法调用 DOM 和 BOM等浏览器内置 API ### nodeJs可以做什么 > Nodejs 作为一个JavaScript 的运行环境,仅仅提供了基础的功能和 AP。然而,基于 Node.js 提供的这些基础能,很多强大的工具和框架如雨后春笋,层出不穷,所以学会了 Node.js,可以让前端程序员胜任更多的工作和岗位: - 基于Express 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用 - 基于Electron框架(https://electronjs.org/),可以构建跨平台的桌面应用 - 基于restify 框架(http://restify.com/),可以快速构建API 接口项目 - 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc... *Node,js 的学习路径: JavaScript 基础语法 + Nodejs 内置 API 模块 (fs、 path http等) + 第=方 API 模块 (express、 mysql等)* ### 下载nodeJs ![下载node](pic/下载node.png) 然后安装 #### 区分LTS和Current版本的不同 - LTS为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装LTS版本的Node.js - Current 为新特性尝鲜版,对热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本中可2能存在隐藏的Bug 或安全性漏洞因此不推荐在企业级项目中使用Current 版本的Nodejs #### 查看node版本 ``` node -v ``` #### nodeJ运行JS代码 ```shell node js文件 ``` ## fs模块 > fs 模块是 ode.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求. - fs.readFile0 方法,用来读取指定文件中的内容 - fs.writeFile0 方法,用来向指定的文件中写入内容 ### fs.readFile ```js fs.readFile(path,[,options],callback) ``` - 参数1:必选参数,字符串,表示文件的路径 - 参数2:可选参数,表示以什么编码格式来读取文件 - 参数3:必选参数,文件读取完成后,通过回调函数拿到读取的结果 > 示例代码 ```js const fs = require('fs' ) fs.readFile('/files/11.txt','utf8',function(edataStr){ console.log(err) console.log('-----') console.log(dataStr) }) ``` ```js // 导入模块 const fs = require('fs') // 2.调用 fs.readFile() 方法读取文件 // 参数1: 读取文件的存放路径 // 参数2: 读取文件时候采用的编码格式,一般默认指定 utf8 // 参数3: 回调函数,拿到读取失败和成功的结果err dataStr fs.readFile('./read.tex','utf-8',function(err,dataStr){ // 如果读取失败了 则err为null // 读取失败则err的值为 错误对象,dataStr的值为undefined console.log(dataStr) }) ``` #### 判断文件是否读取成功 ```js // 导入模块 const fs = require('fs') fs.readFile('./rea.tex', 'utf-8', function (err, dataStr) { if (err) { return console.log("文件读取失败" + err); } else { console.log(dataStr); } }) ``` ### fs.writeFile ```js fs.writeFile(feil,[,options],callback) ``` - 参数1:必选参数,需要指定一个文件路径的字符串,表示文件的存放路径 - 参数2:必选参数,表示要写入的内容 - 参数3:可选参数,表示以什么格式写入文件内容,默认值是utf8 - 参数4:必选参数,文件写入完成后的回调函数 > 示例代码 ```js const fs = require('fs') fs.writeFile('./files/2.txt', 'Hello Node.js!', function (err) { console.log(err) }) ``` ```js // 导入fs模块 const fs = require('fs') // 写入文件方法 // 2.调用 fs.writeFile() 方法,写入文件的内容 // 参数1: 表示文件的存放路径 // 参数2: 表示要写入的内容 // 参数3: 回调函数 fs.writeFile("./feil/read1.tex",'hello你好',function(err){ // 如果写入成功,则err为null // 如果文件写入失败,则err等于一个 错误对象 console.log(err) }) ``` #### 判断文件是否读取成功 ```js // 导入模块 const fs = require('fs') fs.writeFile("./feil/read1.tex",'hello你好',function(err){ if(err){ return console.log("文件写入失败" + err.message) } console.log("文件写入成功") }) ``` ### 整理考试成绩 核心实现步骤 - 导入需要的 fs文件系统模块 - 使用 fs.readFile()方法,读取素材目录下的 成绩.txt 文件 - 判断文件是否读取失败 - 文件读取成功后,处理成绩数据 - 将处理完成的成绩数据,调用 fs.writeFile()方法,写入到新文件成绩-ok.txt 中 ```js const fs = require('fs'); fs.readFile('./feil/成绩.tex','utf-8',function(err,dataStr){ if(err){ return console.log("文件读取失败" + err); } // 先把成绩的数据,安装空格进行分割 const arrOld = dataStr.split(" "); // 循环分割后的数组,对每一个数据进行字符串的替换操作 const arrNew = []; arrOld.forEach(item => { arrNew.push(item.replace('=',":")) }) // 新数组的每一个,进行合并,得到一个新的字符串 const newStr = arrNew.join('\r\n'); fs.writeFile('./feil/成绩-ok.tex',newStr,function(err){ if(err){ return console.log("文件写入失败" + err.message) } console.log("文件写入成功") }) }) ``` ### fs路径动态拼接的问题 > 在使用s 模块操作文件时,如果提供的操作路径是以../或./开头的相对路径时,很容易出现路径动态拼接错误的问题, **原因:代码在运行的时候,会以执行 node 命令时所处的目录,动态拼接出被操作文件的完整路径** 1. 可以提供一个完整的文件路径,移植性非常差,不利于后期的维护 2. 使用__dirname,表示当前文件的所处目录 ```js const fs = require('fs'); // 表示当前所处的目录 console.log(__dirname) fs.readFile(__dirname + "/feil/成绩.tex",'utf-8',function(err,dataStr){ if(err){ return console.log("文件读取失败" + err.message) } console.log('文件读取成功') console.log(dataStr) }) ``` 3. 使用path模块解决 ## path模块 > path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。 例如: - path.join0 方法,用来将多个路径片段拼接成一个完整的路径字符串 - path.basename0 方法,用来从路径字符串中,将文件名解析出来 如果要在JavaScript代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它 ```js const path = require('path'); ``` ### path.join() > 使用 path.join()方法,可以把多个路径片段拼接为完整的路径字符串,语法格式如下: ```js path.join([...paths]) ``` 参数解读: - ...paths路径片段的序列 - 返回值: > 示例代码 ```js const pathStr = path.join('/a',' /b/c','../','/d','/e') // ../会将前面的一层路径抵消掉 console.log(pathStr) // 输出 a\bid\e const pathStr2 = path.join(__dirname,'./files/1 .txt') console.log(pathStr2) // 输出 当前文件所处目录 \files\1.txt ``` ```js const path = require('path'); const pathStr = path.join('/e','/d/e/c','../','/e','./','e'); console.log(pathStr) // \e\d\e\e\e ``` **今后涉及到路径的拼接的操作,都要使用path.join()方法进行处理,不要直接使用 + 进行字符串拼接** ### path.basename() > 使用 path.basename方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名 ```js path.basename(path[,ext]) ``` - path必选参数,表示一个路径的字符串 - ext可选参数,表示文件扩展名 - 返回:表示路径中的最后一部分 > 示例代码 ```js const fpath ='/a/b/c/index.htm' // 文件的存放路径 var fullName = path.basename(fpath) console.log(fullName) // 输出 index.html var nameWithoutExt = path.basename(fpath,'.html' ) console.log(nameWithoutExt) // 输出 index ``` ```js const path = require('path'); const fpath = '/a/b/c/index.html'; const fullNname = path.basename(fpath); console.log(fullNname) // index.html const fullNnameEnd = path.basename(fpath,'.html'); console.log(fullNnameEnd); // index ``` ### path.extname() > 使用 path.extname方法,可以获取路径中的扩展名部分,语法格式如下 ```js path.extname(path) ``` - path必选参数,表示一个路径的字符串 - 返回:返回得到的扩展名字符串 > 示例代码 ```js const fpath = '/a/b/c/index.html' //. 路径字符串 const fext = path.extname(fpath) console.log(fext) // 输出 .html ``` ```js const path = require('path'); const fpath = 'a/a/b/ac/index.js' const fext = path.extname(fpath) console.log(fext) // .js ``` ### path路径案例 ![时钟案例](pic/时钟.png) ```tex 将素材目录下的index.html页面拆分成三个文件,分别是: index.css indexjs index.html 并且将拆分出来的3个文件,存放到 clock 目录中。 ``` #### 案例的实现步骤 - 创建两个正则表达式,分别用来匹配',''); fs.writeFile(path.join(__dirname,'./clock/index.css'),newCss,function(err){ if(err) return console.log("写入css样式失败" + err.message) console.log('写入样式成功') }) } // 处理script的方法 function resolveScript(htmlStr){ // 使用正则提取需要的内容 const r1 = regScript.exec(htmlStr); // 将提取的内容进行replace替换操作 const newScript = r1[0].replace('',''); fs.writeFile(path.join(__dirname,'./clock/index.js'),newScript,function(err){ if(err) return console.log("写入script样式失败" + err.message) console.log('写入js成功') }) } // 处理html的方法 function resolveHtml(htmlStr){ // 将字符串调用replace方法,把内嵌的style金额script替换link ,script const newHtml = htmlStr.replace(regStyle,'').replace(regScript,''); // 写入文件 fs.writeFile(path.join(__dirname,'./clock/index.html'),newHtml,function(err){ if(err) return console.log("写入html失败" + err.message) console.log('写入html成功') }) } ``` **1. fs.writeFile只能创建文件,不能创建目录,2. 重复使用fs.writeFile写入同一个文件的时候,后面的内容会覆盖前面的内容** ## http模块 > http 模块是 Node.is 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer0 方法,就能方便的把一台普通的电脑,变成一台Web 服务器,从而对外提供Web 资源服务。 ### 理解http模块的作用 > 服务器和普通电脑的区别在于,服务器上安装了 web 服务器软件,例如: S、Apache 等。通过安装这些服务器软件就能把一台普通的电脑变成一台 web 服务器 在 Nodejs 中,我们不需要使用 S、Apache 等这些第三方 web 服务器软件。因为我们可以基于 ode.js 提供的http 模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供 web 服务。 ### 服务器相关概念 #### IP地址 > IP 地址就是互联网上每台计算机的唯一地址,因此 P 地址具有唯一性。如果把“个人电脑”比作“一台电话”,那么“IP地址”就相当于“电话号码”,只有在知道对方IP 地址的前提下,才能与对应的电脑之间进行数据通信 IP 地址的格式:通常用“点分十进制”表示成(a.b.c.d) 的形式,其中a,b,c,d 都是 0~255 之间的十进制整数。例如:用点分十进表示的IP地址(192.168.1.1) ```shell ping www.baidu.com ``` 39.156.66.18 #### 域名和域名服务器(DNS) > 尽管IP 地址能够唯一地标记网络上的计算机,但IP地址是一长串数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,即所谓的域名 (Domain Name) 地址 IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS,Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,域名服务器就是提供 IP 地址和域名之间的转换服务的服务器 DNS就是转换域名为IP地址的 www.baidu.com #### 端口号 > 计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖送到你的手命 ![端口号](pic/端口号.png) ### 创建基本的web服务器 > 创建 web 服务器的基本步骤 1. 导入http 模块 2. 创建 web 服务器实例 3. 为服务器实例绑定 request 事件,监听客户端的请求 4. 启动服务器 ```js // 1. 导入http 模块 const http = require('http'); // 2. 创建 web 服务器实例 const server = http.createServer() // 3. 为服务器实例绑定 request 事件,监听客户端的请求 server.on('request',function(req,res){ console.log("someone visit my web") }) // 4. 启动服务器 server.listen(80,function(){ console.log("server running at http://127.0.0.1") }) ``` ```shell node 文件名 ``` #### req请求对象 > 只要服务器接收到了客户端的请求,就会调用通过server.on()为服务器绑定的request事件处理函数如果想在事件处理函数中,访问与客户端相关的数据或属性,可以使用如下的方式: ```js const http = require('http') const server = http.createServer() server.on("request",function(req,res){ // req.url是客户端请求的URL地址 const url = req.url; // req.method是客户端请求的method类型 const method = req.method; const str = `Your request url is ${url}, and request method is ${method}`; console.log(str) // Your request url is /, and request method is GET // 在http://127.0.0.1/index.html url就是 /index.html }) server.listen(80,()=>{ console.log("server running at http://127.0.0.1") }) ``` #### res响应对象 > 在服务器的 request 事件处理函数中,如果想访问与服务器相关的数据或属性,可以使用如下的方式 ```js const http = require('http') const server = http.createServer() server.on("request",(req,res)=>{ const url = req.url; const method = req.method; const str = `Your request url is ${url}, and request method is ${method}`; // 调用res.end()方法,向客户端响应一些内容,并结束这次请求的处理过程 res.end(str) }) server.listen(80,()=>{ console.log("server running at http://127.0.0.1") }) ``` #### 解决中文乱码问题 > 当调用 res.end0 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式 ```js const http = require('http'); const server = http.createServer(); server.on("request",(req,res)=>{ // 定义的字符串 const {url,method} = req; const str = `请求的url地址是${url},请求的类型是${method}` // res.end()将内容响应给客户端 // res.setHeader //为了防止中文乱码的问题,需要设置响应头 Content-Type 的值为 text/html; charset=utf-8 res.setHeader("Content-Type","text/html;charset=utf-8") res.end(str) }) server.listen(80,()=>{ console.log("server running at http://127.0.0.1") }) ``` #### 根据不同的url响应不同的html内容 - 获取请求的 url 地址 - 设置默认的响应内容为404 Not found - 判断用户请求的是否为/或/index.html首页 - 判断用户请求的是否为 /about.html 关于页面 - 设置 Content-Type 响应头,防止中文乱码 - 使用res.end()把内容响应给客户端 ```js const http = require('http'); const server = http.createServer() server.on('request',(req,res)=>{ const {url,method} = req; let content = '

404 NOT found

'; if(url === "/" || url === "/index.html"){ content = "

首页

"; }else if(url === "/about.html"){ content = '

关于

' } res.setHeader('Content-Type','text/html;charset=utf-8'); res.end(content); }) server.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ### 案例:实现clock时钟的web服务器 > 把文件的实际保存路径,作为每个资源的请求的url地址 ![http时钟案例](pic/时钟http.png) > 实现步骤 - 导入需要的模块 - 创建基本的web服务器 - 将资源的请求url地址映射为文件的存放路径 - 读取文件内容并响应给客户端 - 优化资源的请求路径 ```js const http = require('http'); const fs = require('fs') const path = require('path') const server = http.createServer() server.on('request',(req,res)=>{ const url = req.url; // 获取url地址 // /clock/index.html /clock/index.css /clock/index.js // 把请求的url地址映射为具体文件的存放路径 const fpath = path.join(__dirname,url); // const htmlStr = path.join(__dirname,'../../clock/index.html') // const cssStr = path.join(__dirname,'../../clock/index.css') // const jsStr = path.join(__dirname,'../../clock/index.js') // if(url === "/index.html" || url === "/"){ // res.setHeader('ContentType',"text/html;charset=utf-8"); // res.end(htmlStr,cssStr,jsStr) // }else{ // res.end("

404

") // } // 读取文件的内容 fs.readFile(fpath,'utf-8',(err,dataStr)=>{ // 读取失败 if(err) return res.end('404 not found') res.end(dataStr) }) }) server.listen(80,()=>{ console.log("server running at http://127.0.0.1") }) ``` 优化 ```js const http = require('http'); const fs = require('fs') const path = require('path') const server = http.createServer() server.on('request',(req,res)=>{ const url = req.url; let fpath =''; if(url === '/'){ fpath = path.join(__dirname,"/clock/index.html") }else{ fpath = path.join(__dirname,'/clock',url) } // 读取文件的内容 fs.readFile(fpath,'utf-8',(err,dataStr)=>{ // 读取失败 if(err) return res.end('404 not found') res.end(dataStr) }) }) server.listen(80,()=>{ console.log("server running at http://127.0.0.1") }) ``` ## 模块化 > 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。 编程中的模块化 > 编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块. 把代码进行模块化拆分的好处: - 提高了代码的复用性 - 提高了代码的可维护性 - 可以实现按需加载 ### 模块化规范 模块化规范就是对代码进行模块化的拆分与组合时,需要遵守的那些规则。 例如: 1. 使用什么样的语法格式来引用模块 2. 在模块中使用什么样的语法格式向外暴露成员 ### nodeJs分类 根据模块的来源,可以分为3大类: - 内置模块(内置模块是由 Node.js 官方提供的,例如 fs,path,http 等) - 自定义模块(用户创建的每个 .js 文件,都是自定义模块) - 第三方模块(由第三方开发出来的模块,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需要先下载 ### 加载模块 > 使用强大的 require0 方法,可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。例如: ```js // 1.加载内置的 fs 模块 const fs = require( 'fs ' ) // 2.加载用户的自定义模块 const custom = require( ' ./custom.js' ) // 3,加载第三方模块(关于第三方模块的下载和使用,会在后面的课程中进行专门的讲解) const moment = require( 'moment ') ``` **注意:**使用require()方法加载其他模块的时候,会执行加载模块中的代码 > in.js ```js console.log("加载了模块") ``` > 模块化.js ```js // 注意: 在使用 require 加载用户自定义模块期间 // 可以省略 .js 的后缀名 const m1 = require("./in.js") console.log(m1) ``` ### nodeJs模块作用域 > 和函数作用域类似,在自定义模块中定义的变量、方法等成员,只能在当前模块内被访问,这种模块级别的访问限制,叫做模块作用域。 *模块作用域好处:* - 防止全局污染,无法被外界访问 ### module对象 > 在每个js自定义模块中都有一个module 对象,它里面存储了和当前模块有关的信息 ```js console.log(module) /* Module { id: '.', path: 'C:\\Users\\Administrator\\Desktop\\python全 栈\\BaiduSyncdisk\\node\\code\\feil\\模块化', exports: {}, filename: 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node\\code\\feil\\模块化\\02module.js', loaded: false, children: [], paths: [ 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node\\code\\feil\\模块化\\node_modules', 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node\\code\\feil\\node_modules', 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node\\code\\node_modules', 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node\\node_modules', 'C:\\Users\\Administrator\\Desktop\\python全栈\\BaiduSyncdisk\\node_modules', 'C:\\Users\\Administrator\\Desktop\\python全栈\\node_modules', 'C:\\Users\\Administrator\\Desktop\\node_modules', 'C:\\Users\\Administrator\\node_modules', 'C:\\Users\\node_modules', 'C:\\node_modules' ] } */ ``` #### module.exports对象 > 在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用 ```js var userName = "颤三"; var user = "管理员"; // 向module.exports对象上挂在了一个username属性 module.exports.userName = "张三"; // 向module.exports对象上挂载了 salHello方法 module.exports.sayHello = function(){ console.log(userName) } module.exports.user = user; ``` *使用 require0 方法导入模块时,导入的结果,永远以 module.exports 指向的对象为准* ```js //1. 向module.exports 属性上挂载了.username1 module.exports.username = "张三"; // 2.module.exports 对象上挂载方法 module.exports.sayHellomodule.exports.sayHello = function(){ console.log("Hello!") } // 3.让 module.exports 指向一个全新的对象 module.exports = { nickname:"小黑", sayhi () { console.log('Hi! ') } } ``` ### exports对象 > 由于 module.exports 单词写起来比较复杂,为了简化向外共享成员的代码,Node 提供了exports 对象。默认情况exports 和 module.exports 指向同一个对象。最终共享的结果,还是以 module.exports 指向的对象为准 ```js console.log(exports === module.exports) // true ``` require()模块,得到的永远是module.exports指向的对象;建议不要在同一个模块中同时使用exports和module.exports ### nodeJs中的模块规范 > Node.is 遵循了 CommonJS 模块化规范,CommonJS 规定了模块的特性和各模块之间如何相互依赖 1. 每个模块内部,module变量代表当前模块。 2. module 变量是一个对象,它的 exports 属性(即 module.exports) 是对外的接口。 3. 加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块. ## 包 > nodeJs中的第三方模块又叫做包,不同于 Node.js 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用 ### 为什么需要包 > 由于 Node.js 的内置模块仅提供了一些底层的 API,导致在基于内置模块进行项目开发的时,效率很低包是基于内置模块封装出来的,提供了更高级、更方便的 API,极大的提高了开发效率。包和内置模块之间的关系,类似于Jquery和浏览器内置API之间的关系 ### 下载包 https://www.npmjs.com/ https://registry.npmjs.org/ ```shell node -v ``` 下载包 ```shell npm install 包完整的名字 ``` ```shell npm i 包完整的名字 ``` 简单的使用包 ```js // 导入包 const moment = require('moment'); const dt = moment().format("YYYY-MM-DD HH:mm:ss") console.log(dt) ``` ### 安装了包之后多的文件作用 初次装包完成后,在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件 其中: node_modules 文件夹用来存放所有已安装到项目中的包。require()导入第三方包时,就是从这个目录中香找并加载包,package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息,例包的名字、版本号、下载地址等 > 默认情况下,使用npm install 命令安装包的时候会自动安装最新版本的包。如果需要安装指定版本的包,可以在包名之后,通过 @ 符号指定具体的版本,例如: ```shell npm i moment@2.22.2 ``` #### 包的语义化版本规范 包的版本号是以“点分十进制”形式进行定义的,总共有三位数字,例如 2.24.0其中每一位数字所代表的的含义如下: 1. 第1位数字:大版本 2. 第2位数字:功能版本 3. 第3位数字:Bug修复版本 版本号提升的规则:只要前面的版本号增长了,则后面的版本号归零 ### 包管理配置文件 > npm 规定,在项目根目录中,必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。例如: - 项目的名称版本号、描述等 - 项目中都用到了哪些包 - 哪些包只在开发期间会用到 - 那些包在开发和部署时都需要用到 ![包管理](pic/包管理.png) ![创建packjson](pic/创建packjson.png) ![dependencies节点](pic/dependencies节点.png) ```shell npm i ``` 可以一次性下载所有包 ```shell npm uninstall 包名称 ``` 卸载包 ![dev节点](pic/dev节点.png) *解决npm下载慢的问题* 使用淘宝镜像 ```shell # 查看当前下包镜像地址 npm config get registry # 将下包的地址换为淘宝地址 npm config set registry=https://registry.npm.taobao.org/ ``` ![nrm](pic/nrm.png) ### 包的分类 1. 项目包 > 那些被安装到项目的 node modules 目录中的包,都是项目包 项目包又分为两类,分别是: - 开发赖包(被记录到devDependencies 节点中的包,只在开发期间会用到) - 核心依赖包(被记录到 dependencies 节点中的包,在开发期间和项目上线之后都会用到) ```shell # 开发依赖包(会被记录到被记录到devDependencies) npm i 包名 -D # 核心依赖包(会被记录到被记录到dependencies) npm i ``` 2. 全局包 > 在执行 npm install 命令时,如果提供了 -g 参数,则会把包安装为全局包全局包会被安装到 C:\Users\用户目录\AppDataRoaming\npm\node modules 目录下 ```shell # 全局安装指定的包 npm i 包名 -g # 卸载全局包 npm uninstall 包名 -g ``` - 只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令判断 - 某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可 #### i5ting_toc 可以将md文档转为html的工具 ```shell # 将 i5ting_toc 安装为全局包 npm install -g i5ting_toc # 用 i5ting_toc,轻松实现 md 转 html 的功能 i5ting_toc -f 要转换的md文件路径 -o ``` ### npm与包 > 包的规范 一个规范的包,它的组成结构,必须符合以下3 点要求: - 包必须以单独的目录而存在 - 包的顶级目录下要必须包含 package.json 这个包管理配置文件 - package.json 中必须包含 name,version,main 这三个属性,分别代表包的名字、版本号、包的入口 ### 开发一个自己的包 > 初始化包的基本结构 1. 新建im-tools文件夹,作为包的根目录 2. 在im-tools 文件夹中,新建如下三个文件 - package.json(包管理配置文件) - index.js(包的入口文件) - README.md(包的说明文档) > package.json ```json { "name": "im-tools", // 包的名字 "version": "1.0.0", // 包的版本 "main": "index.js", // 包的入口文件 "description": "提供了格式化时间,HTMLEscape的功能", // 包的简单描述 "keywords": ["im-tools","dataFormat"], // 包的简单关键字 "license": "ISC" // 开源许可协议 } ``` > index.js ```js function dataFormat(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; } // 转义html字符的函数 function htmlEscape(htmlStr) { return htmlStr.replace(/<|>|"&/g, (match) => { switch (match) { case '<': return '<' case '>': return '>' case '"': return '"'; case '&': return '&' } }) } // 定义还原html字符串的函数 function htmlUnEscape(str) { return htmlStr.replace(/<|>|"|&/g, (match) => { switch (match) { case '<': return '<' case '>': return '>' case '"': return '"'; case '&': return '&' } }) } // 向外暴露 module.exports = { dataFormat, htmlEscape, htmlUnEscape } ``` > data.js ```js const imTools = require('../im-tools'); const dtStr = imTools.dataFormat(new Date()) const htmlStr = '

这是h1标签

' const str = imTools.htmlEscape(htmlStr) console.log(str) console.log(dtStr) ``` #### 模块化的拆分 将不同的功能进行模块化的拆分 - 将格式化时间的功能,拆分到 src -> dateFormat.js中, - 将处理 HTML 字符串的功能,拆分到 src ->htmlEscape.js 中 - 在index.js 中,导入两个模块,得到需要向外共享的方法 - 在index.js 中,使用 module.exports 把对应的方法共享出去 ### 发布包 - 访问 https://www.npmjs.com/ 网站,点击 sign up 按钮,进入注册用户界面 - 填写账号相关的信息: Full Name、Public Email、Username、Password - 点击 Create an Account 按钮,注册账号 - 登录邮箱,点击验证连接,进行账号的验证 ## express > Express是基于nodeJs平台,快速、开发、极其简单的web开发框架,通俗的理解: Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的Express的本质:就是一个npm 上的第三方包,提供了快速创建Web 服务器的便捷方法 Express 的中文官网: http://www.expressjs.com.cn/ ### Express 能做什么 对于前端程序员来说,最常见的两种服务器,分别是: - Web 网站服务器: 专门对外提供 Web 网页资源的服务器 - API 接口服务器:专门对外提供 API 接口的服务器使用 Express,我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器 > 安装express ```shell npm i express@4.17.1 ``` > 基本使用 ```js // 导入express const express = require('express') // 创建web服务 const app = express() // 启动服务 app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ### 监听get请求 > app.get(),可以监听客户端的get请求, ```js // 参数1: 客户端请的 URL 地址 //参数2: 请求对应的处理函数 // req: 请求对象 (包含了与请求相关的属性与方法) // res: 响应对象 (包含了与响应相关的属性与方法) app.get('请求URL',function(req,res){ /*处理函数*/ }) ``` ### 监听post请求 > app.post(),可以监听客户端的post请求, ```js // 参数1: 客户端请求的 URL 地址 // 参数2: 请求对应的处理函数 // req: 请求对象 (包含了与请求相关的属性与方法) // res: 响应对象 (包含了与响应相关的属性与方法) app.post("请求URL",function(req,res){ /*处理函数*/ }) ``` ### 内容响应给客户端 > 通过res.send()方法,可以把处理好的内容,发送给客户端 ```js app.get('/user',(req, res) => { // 向户端发送 JSON 对象 res.send({ name: 'zs', age: 20, gender:'男' }) }) app.post('/user', (req, res) => { // 向客户端发送文本内容 res.send("请求成功") }) ``` ### 获取URL中携带的查询参数 > 通过req.query()对象,可以访问到客户端通过查询字符串的形式,发送到服务器参数 ```js app.get('/',(req,res) => { // req.query 默认是一个空对象 // 客户端使用 ?name=zs&age=20 这种查询字符串形式,发送到服务器的参数 // 可以通过 req.query 对象访问到,例如:// req.query .namereq. query .age console.log(req.query) }) ``` ### 获取url中的动态参数 > 通过 req.params 对象,可以访问到 URL中,通过:匹配到的动态参数 ```js // URL 地址中,可以通过 :参数名 的形式,匹配动态参数值 // 这里的id是动态的参数 : 是固定的写法,那个动态就在 : 后面写 app.get( '/user/:id', (req, res) => { // req.params 默认是一个空对象 //里面存放着通过 : 动态匹配到的参数值 console. log(req.params ) }) ``` ### 托管静态资源 ![托管静态资源](pic/托管静态资源.png) ### 托管多个静态资源目录 - 如果托管多个静态资源目录,就多次调用express.static()函数 - 访问静态资源文件时,express.static()函数会根据目录的添加顺序查找所需的文件 ### 挂载路径前缀 ![挂载前缀](pic/挂载前缀.png) ```js const express = require('express'); const app = express() // 调用express.static()对外提供静态文件 // 访问路径 :http://127.0.0.1/ // app.use(express.static('./clock')) // 访问路径 :http://127.0.0.1/clock/ app.use('/clock',express.static('./clock')) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ## nodemon ### 为什么使用 > 在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要频繁的手动 close 掉,然后再重新启动,非常繁琐。 现在,我们可以使用nodemon(https://www.npmjs.package/nodemon)这个工具,它能够监听项目文件的变动,当代码被修改后,会自动帮我们重启项目,极大方便了开发和调试 ### 安装nodemon ```shell npm install nodemon -g ``` ### 使用nodemon 当基于 Nodejs 编写了一个网站应用的时候,传统的方式,是运行 node app.js 命令,来启动项目。这样做的坏处是:代码被修改之后,需要手动重启项目。 现在,我们可以将node 命令替换为 nodemon 命令,使用 nodemon app.js 来启动项目。这样做的好处是:代码被修改之后,会被nodemon 监听到,从而实现自动重启项目的效果。 ```shell nodemon app.js ``` ### express路由 > 在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下: ```js aPP.METHOD(PATH,HANDLER) ``` ```js // 匹配 GET 请求,且请求 URL 为 app.get('/', function (req, res) { res.send('Hello World!') }) //匹配 POST 请求,且请求 URL 为 app.post('/', function (req, res) { res.send(' Got a POST request') }) ``` #### 路由的匹配过程 > 每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理 ![路由匹配过程](pic/路由匹配过程.png) **注意点** 1. 按照定义的先后顺序进行匹配 2. 请求类型和请求的URL同时匹配成功才会调用对应的处理函数 ### 简单使用 ```js const express = require('express'); const app = express(); // 挂载路由 app.get('/',(req,res)=>{ res.send("你好") }) app.post('/',(req,res)=>{ res.send('hello') }) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` #### 模块化路由 > 为了方便对路由进行模块化的管理,Express 不建议将路由直接挂载到 app 上,而是推荐将路由抽离为单独的模块 - 创建路由模块对应的.js文件 - 调用express.Routed()函数创建路由对象 - 向路由对象上挂载具体的路由 - 用 module.exports 向外共享路由对象 - 使用app.use()函数注册路由模块 > 创建路由模块 ```js // 路由模块 // 1. 导入express,模块 const express = require('express'); // 2. 创建路由对象 const route = express.Router() // 3. 挂载具体的路由 route.get('/user/list',(req,res)=>{ res.send('user_list') }) route.post('/user/add',(req,res)=>{ res.send('user_add') }) // 4. 向外暴露 module.exports = route ``` > 注册路由模块 ```js const express = require('express'); const app = express() // 1. 导入路由模块 const userRoute = require('./05-1路由模块'); // 2. 注册 // app.use() 用来注册全局中间件 app.use(userRoute) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` #### 给路由模块添加前缀 > 类似于托管静态资源时,为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式也非常简单: ```js const express = require('express'); const app = express() // 1. 导入路由模块 const userRoute = require('./05-1路由模块'); // 2. 注册 // app.use() 用来注册全局中间件 // 挂载前缀 app.use('/api',userRoute) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ### express中间件 #### express中间件的调用流程 > 当一个请求到达 Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理 ![express中间件的调用流程](pic/express中间件的调用流程.png) #### 中间件的格式 ![中间件的格式](pic/中间件格式.png) #### next()函数的作用 > next 函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由 ![next()函数的作用](pic/next()函数的作用.png) #### 定义最简单的中间件函数 ```js const express = require('express'); const app = express(); // 定义一个中间件函数 const nf = function(req,res,next){ console.log("一个中间件") // 转交给下一个中间件或者路由 next() } app.listen(80,()=>{ console.log("http://127.0.0.1"); }) ``` #### 全局生效的中间件 > 客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件.通过调用 app.use(中间件函数),即可定义一个全局生效的中间件 ```js const express = require('express'); const app = express(); // 定义一个中间件函数 const nf = function(req,res,next){ console.log("一个中间件") // 转交给下一个中间件或者路由 next() } // 将nf注册为全局生效中间件 app.use(nf) app.get('/',(req,res)=>{ res.send("Home Page") }) app.listen(80,()=>{ console.log("http://127.0.0.1"); }) ``` *简写形式* ```js const express = require('express'); const app = express(); app.use((req,res,next)=>{ console.log('helllllo') next() }) app.get('/',(req,res)=>{ res.send("Home Page") }) app.listen(80,()=>{ console.log("http://127.0.0.1"); }) ``` #### 中间件的作用 > 多个中间件之间,共享同一份 req 和 res。基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用。 ```js const express = require('express'); const app = express(); app.use((req,res,next)=>{ const time = Date.now() // 给req挂载一个自定义属性,从而把时间暴露出去 req.startTime = time; next() }) app.get('/',(req,res)=>{ console.log(req.startTime) res.send("Home Page") }) app.listen(80,()=>{ console.log("http://127.0.0.1"); }) ``` #### 定义多个全局中间件 > 可以使用 app.use() 连续定义多个全局中间件。客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行调用,示例代码如下: ```js const express = require('express'); const app = express() // 定义第一个全局中间价 app.use((req,res,next)=>{ console.log("第一个全局中间价") next() }) // 定义第二个全局中间件 app.use((req,res,next)=>{ console.log("第二个全局中间价") next() }) // 定义一个路由 app.get('/',(req,res)=>{ res.send('hello') }) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` #### 局部中间件 > 不使用 app.use()定义的中间件,叫做局部生效的中间件 ```js const express = require('express'); const app = express() // 1. 局部生效的中间件,定义中间件函数 const v1 = (req,res,next)=>{ console.log('局部中间件') next() } // 2. 创建路由 app.get('/',v1,(req,res)=>{ res.send('helloPage') }) app.get('/home',(req,res)=>{ res.send('homePage') }) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` #### 定义多个局部中间件 > 可以在路由中,通过如下两种等价的方式,使用多个局部中间件 ```js // 等价 app .get('/', mw1, mw2, (req, res) => { res.send( 'Home page.') }) app .get('/',[mw1, mw2], (req, res) => { res.send( 'Home page.') }) ``` #### 中间件的5个注意事项 - 一定要在路由之前注册中间件 - 客户端发送过来的请求,可以连续调用多个中间件进行处理 - 执行完中间件的业务代码之后,不要忘记调用 next() 函数 - 为了防止代码逻辑混乱,调用 next()函数后不要再写额外的代码 - 连续调用多个中间件时,多个中间件之间,共享 req 和res 对象 #### 中间件的分类 为了方便大家理解和记忆中间件的使用,Express 官方把常见的中间件用法,分成了 5 大类,分别是 - 应用级别的中间件 通过 app.use0 或 app.get()或 app.post(),绑定到 app 实例上的中间件,叫做应用级别的中间件,代码示例如下: ![应用级中间件](pic/应用级中间件.png) - 路由级别的中间件 绑定到 express.Router()实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过,应用级别中间件是绑定到 app 实例上,路由级别中间件绑定到 router 实例上,代码示例如下: ![路由级中间件](pic/路由级中间件.png) - 错误级别的中间件 错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。格式: 错误级别中间件的 function 处理函数中,必须有 4 个形参,形参顺序从前到后,分别是(ert,req, res, next)。 ![错误级别的中间件](pic/错误级别的中间件.png) - Express内置的中间件 ![Express内置的中间件](pic/Express内置的中间件.png) ![Express内置的中间件-1](pic/Express内置的中间件-1.png) - 第三方的中间件 ![第三方的中间件](pic/第三方的中间件.png) #### 自定义中间件 > 自己手动模拟一个类似于 express.urlencoded 这样的中间件,来解析 POST 提交到服务器的表单数据 1. 定义中间件 2. 监听req的data事件 > 如果数据量比较大,无法一次性发送完毕,则客户端会把数据切割后,分批发送到服务器。所以 data 事件可能会触发多次,每一次触发 data 事件时,获取到数据只是完整数据的一部分,需要手动对接收到的数据进行拼接。 3. 监听req的end事件 > 因此,我们可以在reg的end 事件中,拿到并处理完整的请求体数据 4. 使用querstring模块解析请求体数据 5. 将解析出来的数据对象挂载为 req.body 的自定义属性,命名为 req.body,供下游使用。上游的中间件和下游的中间件及路由之间,共享同一份 req 和 res。因此,我们可以将解析出来的数据,挂载为 req 6. 将自定义中间件封装为模块 ```js const express = require('express'); const app = express(); // 导入node内置的querystr模块 const qs = require('querystring') // 这是解析表单数据的中间件 app.use((req, res, next) => { // 定义中间价的具体业务 // 定义一个str字符串变量,专门用来存储客户端发送过来的请求体数据 let str = ''; // 监听req的data事件 req.on('data', (chunk) => { str += chunk; }) // 监听req的end事件 req.on('end', () => { // 在str中存储的是完整的请求体数据 console.log(str) // 将字符串格式的请求体数据,解析成对象格式 const body = qs.parse(str); console.log(body) req.body = body next() }) }) app.post('/user',(req,res)=>{ res.send(req.body) }) app.listen(80, () => { console.log("http://127.0.0.1"); }) ``` > 封装 ```js const express = require('express'); const app = express(); // 导入自己封装的中间件模块 const customBodyParser = require('./12-1.custom-body-parser') // 将自定义的中间件函数,注册为全局可用的中间件 app.use(customBodyParser) app.post('/user',(req,res)=>{ res.send(req.body) }) app.listen(80, () => { console.log("http://127.0.0.1"); }) ``` ```js // 导入node内置的querystr模块 const qs = require('querystring') const bodyParser = (req, res, next) => { // 定义中间价的具体业务 // 定义一个str字符串变量,专门用来存储客户端发送过来的请求体数据 let str = ''; // 监听req的data事件 req.on('data', (chunk) => { str += chunk; }) // 监听req的end事件 req.on('end', () => { // 在str中存储的是完整的请求体数据 console.log(str) // 将字符串格式的请求体数据,解析成对象格式 const body = qs.parse(str); console.log(body) req.body = body next() }) } module.exports = bodyParser ``` #### 创建基本的服务器 ```js const express = require('express'); const app = express(); // 配置解析表单数据的中间件 app.use(express.urlencoded({extended:false})) // 导入路由模块 const apiRouter = require('./14.创建api路由'); // 把路由模块,注册到app上 app.use('/api',apiRouter) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ```js const express = require('express'); // 创建API路由模块 const router = express.Router(); /* 这里是挂载相关的路由 */ // 挂载的get接口 router.get('/get',(req,res)=>{ // 通过req.query来获取客户端查询的字符串,发送到服务器的数据 const query = req.query; // 发送请求 res.send({ status:0, // 0代表处理成功,1代表处理失败 msg:'请求成功', // 状态的描述 data:query // 响应给客户端的内容 }) }) // 挂载的post接口 router.post('/post',(req,res)=>{ // 通过req.body获取请求体中包含的 url-encoded 格式的数据 const body = req.body; // 发送请求 res.send({ status:0, // 0代表处理成功,1代表处理失败 msg:'请求成功', // 状态的描述 data:body // 响应给客户端的内容 }) }) module.exports = router; ``` ### 接口的跨越问题 > 解决接口跨域问题的方案主要有两种: 1. CORS(主流的解决方案,推荐使用) 2. JSONP(有缺陷的解决方案:只支持GET请求 ### cors解决跨域 > cors 是 Express 的一个第三方中间件。通过安装和配置cors 中间件,可以很方便地解决跨域问题使用步骤分为如下3步: - 运行 npm install cors 安装中间件 - 使用 const cors = require(cors) 导入中间件 - 在路由之前调用 app.use(cors()) 配置中间件 ```js const express = require('express'); const app = express(); // 配置解析表单数据的中间件 app.use(express.urlencoded({extended:false})) // 定要在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题 const cors = require(cors); app.use(cors()) // 导入路由模块 const apiRouter = require('./14.创建api路由'); // 把路由模块,注册到app上 app.use('/api',apiRouter) app.listen(80,()=>{ console.log("http://127.0.0.1") }) ``` ## CORS > CORS(Cross-Origin Resource Sharing,跨域资源共享)由一系列 HTTP 响应头组成,这些 HTTP 响应头决定浏览器是否阻止前端JS 代码跨域获取资源 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头就可以解除浏览器端的跨域访问限制。 **注意:** 1. CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口 2. CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服务端接口 (例如: IE10+、Chrome4+、FireFox3.5+)。 ### CORS 响应头部 - Access-Control-Allow-Origin > 响应头部中可以携带一个 Access-Control-Allow-Origin 字段 ```js Access-Control-Allow-Origin: | * ``` 其中,origin 参数的值指定了允许访问该资源的外域 URL 例如,下面的字段值将只允许来自 http://itcast.cn 的请求 ```js res.setHeader('Access-Control-Allow-Origin',"http://itcast.cn') ``` 如果指定了 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 对额外的请求头进行声明,否则这次请求会失败! ```js // 允许客户端额外向服务器发送 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 方法。 ```js // 只允许 POST、GET、DELETE、HEAD 请求方法 res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD') //允许所有的 HTTP 请求方法 res.setHeader('Access-Control-Allow-Methods','*') ``` ### CORS跨域资源分类 > 客户端在请求 CORS 接口时,根据请求方式和请求头的不同,可以将 CORS 的请求分为两大类,分别是: 1. 简单请求 > 同时满足以下两大条件的请求,就属于简单请求: - 请求方式: GET、POST、HEAD 三者之一; - HTTP 头部信息不超过以下几种字段: 无自定义头部字段、Accept、Accept-Language、Content-Language、DPR.Downlink、Save-Data、Viewport-Width、Width .Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain); 2. 预检请求 > 只要符合以下任何一个条件的请求,都需要进行预检请求: - 请求方式为 GET、POST、HEAD 之外的请求 Method 类型 - 请求头中包含自定义头部字段 - 向服务器发送了 application/json 格式的数据 在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据次的OPTION请求称为“预检请求” ### 简单请求和预检请求的区别 简单请求的特点: 客户端与服务器之间只会发生一次请求 预检请求的特点: 客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求。 ## JSONP接口 > 概念:浏览器端通过 ``` ## 数据库与身份验证 > 数据库 (database)是用来组织、存储和管理数据的仓库 当今世界是一个充满着数据的互联网世界,充斥着大量的数据。数据的来源有很多,比如出行记录、消费记录浏览的网页、发送的消息等等。除了文本类型的数据,图像、音乐、声音都是数据。 为了方便管理互联网世界中的数据,就有了数据库管理系统的概念(简称:数据库)。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。 ### 常见的数据库及其分类 - MySQL数据库 (目前使用最广泛、流行度最高的开源免费数据库;Community + Enterprise) - Oracle 数据库(收费) - SQL Server 数据库(收费) - Mongodb 数据库(Community + Enterprise) 其中,MySQL、Oracle、SQL Server 属于传统型数据库 (又叫做: 关系型数据库或 SQL 数据库),这三者的设计理念相同,用法比较类似。 而 Mongodb 属于新型数据库(又叫做: 非关系型数据库 或 NOSQL 数库),它在一定程度上弥补了传统型数据库的缺陷。 ### 传统型数据库的数据组织结构 在传统型数据库中,数据的组织结构分为数据库(database)、数据表(table)、数据行(row)、字段(field)这 4 大部分组成 ### 实际开发中库、表、行、字段的关系 - 在实际项目开发中,一般情况下,每个项目都对应独立的数据库 - 不同的数据,要存储到数据库的不同表中,例如: 用户数据存储到 users 表中,图书数据存储到 books表中 - 每个表中具体存储哪些信息,由字段来决定,例如: 我们可以为 users 表设计 id、username、password这3个字段。、 - 表中的行,代表每一条具体的数据。 ## 安装mysql 对于开发人员来说,只需要安装 MySQL Server 和 MySQL Workbench 这两个软件,就能满足开发的需要了 - MySQL Server: 专门用来提供数据存储和服务的软件 - MySQL Workbench: 可视化的 MySQL 管理工具,通过它,可以方便的操作存储在 MySQL Server 中的数据. **问题:** > 安装MySQL可能遇到的问题及解决方案 端口被占用: 进入命令提示符 ```shell netstat -ano|findstr 3306 ``` 查看哪个程序占用了3306端口,在任务管理器中结束该任务 参考安装教程 - Windows系统安装MySql []: 安装教程-Windows系统安装MySql ## mysqlworbeach基本使用 ### 连接数据库 ![连接数据库](pic/连接数据库.png) ### 了解界面的组成部分 ![了解界面的组成部分](pic/了解界面的组成部分.png) ![切换分区](pic/切换分区.png) ### 创建数据库 不能包含中文和空格 ![创建数据库](pic/创建数据库.png) ### 创建数据表 ![创建数据表](pic/创建数据表.png) ![设置字段](pic/设置字段.png) ![字段类型](pic/字段类型.png) ### 向表中写入数据 ![向表中写入数据](pic/向表中写入数据.png) ## 使用SQL管理数据库 > SQL(英文全称: Structured Query Language) 是结构化查询语言,专门用来访问和处理数据库的编程语言。能够让我们以编程的形式,操作数据库里面的数据。 三个点 1. SQL 是一门数据库编程语言 2. 使用SQL 语言编写出来的代码,叫做 SQL 语句 3. SQL语言只能在关系型数据库中使用 (例如 MySQL、Oracle、SQL Server)。非关系型数据库(例如 Mongodb)不支持 SQL语言 *能做什么?* - 从数据库中查询数据 - 向数据库中插入新的数据 - 更新数据库中的数据 - 从数据库删除数 - 可以创建新数据库 - 可在数据库中创建新表 - 可在数据库中创建存储过程、视图 - etc.. 重点掌握如何使用SQL从数据表中: > 查询数据 (select) 、删除数据 (delete)插入数据、(insert into)更新数据 (update)、 额外需要掌握的4种SQL 语法 > where 条件、and 和 or 运算符、order by 排序、count()函数 **select** ![select语法](pic/select语法.png) 注意: SQL语句中的关键字对大小写不敏感。SELECT 等效于 select,FRQM 等效于 from ```sql -- 通过*把users表中的所有数据都查询出来 select * from users -- 如需获取名为"username"和"pasword"的列的内容(从名为 users 的数据库表),请使用下面的 SELECT 语句: select username,password from users ``` **INSERT INTO** ![insert](pic/insert.png) ```sql -- 向 users 表中,插入新数据,username 的值为 tony stark,password 的值为 000098123 insert into users (username, password) values ('tony stark','000098123') ``` **update** > 更新某一行中的一列 ```sql -- 把 users 表中id 为3的用户密码,更新为 888888。示例如下: update users set password = '888888' where id=3 ``` > 更新某一行中的若干列 ```sql -- 把 users 表中id 为2的用户密码和用户状态,分别更新为 admin123 和1。示例如下: update users set password = 'admin111',status = 1 where id = 2 ``` **delete** ![delete](pic/delete.png) ```sql -- 从 users 表中,删除 id 为4的用户,示例如下: delete from users where id = 4 ``` **where** ![where语句](pic/where语句.png) 可以在where语句中使用运算符 ![where使用运算符](pic/where使用运算符.png) ![where使用运算符-1](pic/where使用运算符-1.png) ```sql select * from users where id = 1 select * from user where id >2 select * from users where username<>'ls' select * from users where username!='ls' ``` **and 和 or** AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来 AND 表示必须同时满足多个条件,相当于 JavaScript 中的 && 运算符,例如 if (a !== 10 && a!== 20) OR 表示只要满足任意一个条件即可,相当于 JavaScript 中的||运算符,例如 if(a !== 10 || a!== 20) ```sql select * from users where status=0 and id<3 select * from users where status=1 or username='zs' ``` **order by** > ORDERBY语句用于根据指定的列对结果集进行排序;ORDERBY语句默认按照升序对记录进行排序;如果您希望按照降序对记录进行排序,可以使用 DESC关键字 ```sql -- 注意:以下两条 SOL 语句是等价时 -- 因为 ORDER BY 默认进行升序排序: --其中, ASC 关键字代表升序排序 --其中, DESC 关键字代表降序排序 SELECT * FROM users ORDER BY status; SELECT * FROM users ORDER BY status ASC; SELECT * FROM users ORDER BY id DESC; ``` > 多重排序 对 users 表中的数据,先按照 status 进行降序排序,再按照 username 字母的顺序,进行升序的排序 ```sql select * from user order by status desc,username asc ``` **count * ** > COUNT(*)函数用于返回查询结果的总数据条数,语法格式: ```sql SELECT COUNT(*)FROM 表名称 ``` ```sql -- 统计users状态为0的用户 select count(*) from users where status = 0 ``` > AS关键字 如果希望给查询出来的列名称设置别名,可以使用AS关键字 ```sql -- 给列起别名 select count(*) as total from users where status = 0 select username as name,password as upwd from users ``` ## 在项目中操作mysql - 安装操作MySQL数据库的第三方模块 (mysql) - 通过 mysql模块连接到 MySQL 数据库 - 通过 mysql模块执行 SQL 语句 ![操作mysql](pic/操作mysql.png) ### 安装mysql模块 > mysql 模块是托管于 npm上的第三方模块。它提供了在 Nodejs 项目中连接和操作 MySQL 数据库的能力.想要在项目中使用它,需要先运行如下命令,将mysql安装为项目的依赖包: ```shell # 初始化项目 npm init -y # 安装mysql npm i mysql ``` ### 配置mysql模块 > 在使用mysql模块操作MySQL数据库之前,必须先对 mysgl模块进行必要的配置,主要的配置步骤如下: ```js // 导入mysql const mysql = require('mysql') // 建立与mysql的联系 const db = mysql.createPool({ host:'127.0.0.1', // 数据库的 IP地址 user:'root', // 数据库的用户名 password:'admin123', // 数据库的密码 database:'my_db_01' // 指定要操作的那个数据库 }) ``` #### 测试 > 调用 db.query0函数,指定要执行的 SQL语句,通过回调函数拿到执行的结果 ```js // 导入mysql const mysql = require('mysql') // 建立与mysql的联系 const db = mysql.createPool({ host:'127.0.0.1', // 数据库的 IP地址 user:'root', // 数据库的用户名 password:'admin123', // 数据库的密码 database:'my_db_01' // 指定要操作的那个数据库 }) // 测试 db.query('select 1',(err,results)=>{ // mysql模块工作错了 if(err) return console.log(err.message); // 能够成功执行sql语句 console.log(results); }) ``` #### 查询数据 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const sqlStr = 'select * from users' db.query(sqlStr,(err, results) => { // 询数据失败 if(err) return console.log(err.message) console.log(results) }) ``` #### 插入数据 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const user = {username:"Spider-Man",password:"pcc123"} const sqlStr = 'insert into users (username,password) values(?,?)'; db.query(sqlStr,[user.username,user.password],(err,results)=>{ if(err) return console.log(err.message) // results.affectedRows等于1代表语句执行成功 if(results.affectedRows === 1){ console.log("插入数据成功了") } }) ``` 简写方式 > 向表中新增数据时,如果数据对象的每个属性和数据表的字段一一对应 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const user = {username:"Spider-Man1",password:"pcc123456"} const sqlStr = 'insert into users set ?' db.query(sqlStr,user,(err,results)=>{ if(err) return console.log(err.message) if(results.affectedRows === 1){ console.log("插入数据成功了") } }) ``` #### 更新数据 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const user = {id:2,username:"aaa",password:'root1234567'} const sqlStr = 'update users set username=?,password=? where id=?' db.query(sqlStr,[user.username,user.password,user.id],(err,results)=>{ if(err) return console.log(err.message) if(results.affectedRows === 1){ console.log("更新成功") } }) ``` 简写操作 > 更新表数据时,如果数据对象的每个属性和数据表的字段一一对应,则可以通过如下方式快速更新表数据 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const user = {id:3,username:"abc",password:'root167'} const sqlStr = 'update users set ? where id=?' db.query(sqlStr,[user,user.id],(err,results)=>{ if(err) return console.log(err.message) if(results.affectedRows === 1){ console.log("更新成功") } }) ``` #### 删除数据 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const sqlStr = 'delete from users where id=?' db.query(sqlStr,2,(err,results)=>{ if(err) return console.log(err.message) if(results.affectedRows === 1){ console.log("删除成功") } }) ``` #### 标记删除 > 使用 DELETE 语句,会把真正的把数据从表中删除掉。为了保险起见,推荐使用标记删除的形式,来模拟删除的动作。 所谓的标记删除,就是在表中设置类似于 status 这样的状态字段,来标记当前这条数据是否被删除.当用户执行了删除的动作时,我们并没有执行 DELETE 语句把数据删除掉,而是执行了UPDATE 语句,将这条数据对应的status字段标记为删除即可 ```js const mysql = require('mysql') const db = mysql.createPool({ host: '127.0.0.1', // 数据库的 IP 地址 user: 'root', // 登录数据库的账号 password: 'admin123', // 登录数据库的密码 database: 'my_db_01', // 指定要操作哪个数据库 }) const sqlStr = 'update users set status=? where id=?' db.query(sqlStr,[1,3],(err,results)=>{ if(err) return console.log(err.message) if(results.affectedRows === 1){ console.log("标记删除成功") } }) ``` ## web开发模式 目前主流的 Web 开发模式有两种,分别是: - 基于服务端染的传统 Web 开发模式 > 服务端渲染的概念:服务器发送给客户端的 HTML 页面,是在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用Ajax这样的技术额外请求页面的数据。代码示例如下: ![服务端渲染](pic/服务端渲染.png) 优点: - 前端耗时少。因为服务器端负责动态生成 HTML内容,浏览器只需要直接染页面即可。尤其是移动端,更省电 - 有利于SEO。因为服务器端响应的是完整的 HTML页面内容,所以爬虫更容易爬取获得信息,更有利于 SEO。 缺点: - 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力. - 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。 - 基于前后端分离的新型 Web 开发横式 > 前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛应用。简而言之,前后端分离的 Web 开发模式就是后端只负责提供 API 接口,前端使用 Ajax 调用接口的开发模式。 优点: - 开发体验好。前端专注于UI页面的开发,后端专注于api的开发,且前端有更多的选择性 - 用户体验好。Ajax技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新 - 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。 缺点: - 不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。解决方案:利用 Vue、React 等前端框架的 SSR (server side render) 技术能够好的解决 SEO 问题! ### 如何选择web开发模式 - 比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的 SEO,则这时我们就需要使用服务器端渲染 - 而类似后台管理项目,交互性比较强,不需要考虑SEO,那么就可以使用前后端分离的开发模式。 首屏服务器端渲染+其他页面前后端分离的开发模式另外,具体使用何种开发模式并不是绝对的,为了同时兼顾了首页的渲染速度和前后端分离的开发效率,一些网站采用了 ## 身份认证 > 身份认证 (Authentication) 又称“身份验证”“鉴权”,是指通过一定的手段,完成对用户身份的确认 - 日常生活中的身份认证随处可见,例如:高铁的验票乘车,手机的密码或指纹解锁,支付宝或微信的支付密码等 - 在 Web 开发中,也涉及到用户身份的认证,例如: 各大网站的手机验证码登录、邮箱密码登录、二维码登录等. ### 为什么需要身份认证 > 身份认证的目的,是为了确认当前所声称为某种身份的用户,确实是所声称的用户。例如,你去找快递员取快递,你要怎么证明这份快递是你的。 ### 不同开发者模式下的身份验证 对于服务端渲染和前后端分离这两种开发模式来说,分别有着不同的身份认证方案 - 服务端染推荐使用 Session 认证机制 - 前后端分离推荐使用JWT 认证机制 ## session原理 ### HTTP的无状态性 > 了解 HTTP 协议的无状态性是进一步学习 Session 认证机制的必要前提HTTP 协议的无状态性,指的是客户端的每次 HTTP 请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次 HTTP 请求的状态 ![http无状态性](pic/http无状态性.png) ### 如何突破http的无状态性 ![突破http的无状态性](pic/突破http无状态性.png) ### cookie > Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称(Name) 、一个值(Value) 和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。 不同域名下的 Cookie 各自独立,每当客户端发起请求时,会自动把当前域名下所有未过期的 Cookie 一同发送到服务器. 特点: - 自动发送 - 域名独立 - 过期时限 - 4KB限制 ### cookie的作用 > 客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的 Cookie,客户端会自动将 Cookie 保存在浏览器中。 随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的 Cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份。 ![cookie的作用](pic/cookie的作用.png) ### cookie不具有安全性 > 由于 Cookie 是存储在浏览器中的,而且浏览器也提供了读写 Cookie 的 AP1,因此 Cookie 很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过Cookie 的形式发送给浏览器 ![cookie不安全性](pic/cookie不安全性.png) 注意:千万不要使用 Cookie 存储重要且隐私的数据!比如用户的身份信息、密码等 ### 提高身份认证的安全性 > 为了防止客户伪造会员卡,收银员在拿到客户出示的会员卡之后,可以在收银机上进行刷卡认证。只有收银机确认存在的会员卡,才能被正常使用 ![提高身份认证的安全性](pic/提高身份认证的安全性.png) 这种“会员卡 +刷卡认证”的设计理念,就是 Session 认证机制的精髓 ### session的工作原理 ![session的工作原理](pic/session的工作原理.png) ### session中的中间件使用 1. 安装express-session中间件 > 在 Express 项目中,只需要安装 express-session 中间件,即可在项目中使用 Session 认证: ```shell npm install express-session ``` 2. 配置express-session 中间件 > express-session 中间件安装成功后,需要通过 app.use() 来注册 session 中间件,示例代码如下 ```js // 1.导入 session 中间件 var session = require( 'express-session') // 2.配置 Session 中间件 app.use(session({ secret:'keyboard cat',// secret 属性的值可以为任意字符串 resave: false,// 固定写法 saveUninitialized: true // 固定写法 })) ``` 3. 向express中存数据 > 当express-session 中间件配置成功后,即可通过 req,session 来访问和使用sesion 对象,从而存储用户的关键信息: ```js const express = require('express'); const app = express(); // 1.导入 session 中间件 const session = require('express-session') // 2.配置 Session 中间件 app.use(session({ secret: 'keyboard cat',// secret 属性的值可以为任意字符串 resave: false,// 固定写法 saveUninitialized: true // 固定写法 })) // 登录的 API 接口 app.post('/api/login', (req, res)=>{ // 判断用户提交的登录信息是否正确 if (req.body.username !== 'admin' || req.body.password !== '000000') { return res.send({ status: 1, msg: '登录失败' }) } // TODO_02: 请将登录成功后的用户信息,保存到 Session // 注意: 只有成功配置了 express-session 这个中间件之后,才能够通过 req 点出来 session 这个属性 req.session.user = req.body; // 用户信息 req.session.islogin = true; // 用户的登录状态 res.send({ status: 0, msg: '登录成功' }) }) app.listen(80, () => { console.log('127.0.0.1') }) ``` 4. 从session中取数据 > 可以直接从 req.session 对象上获取之前存储的数据,示例代码如下 ```js const express = require('express'); const app = express(); // 1.导入 session 中间件 const session = require('express-session') // 2.配置 Session 中间件 app.use(session({ secret: 'keyboard cat',// secret 属性的值可以为任意字符串 resave: false,// 固定写法 saveUninitialized: true // 固定写法 })) // 登录的 API 接口 app.post('/api/login', (req, res)=>{ // 判断用户提交的登录信息是否正确 if (req.body.username !== 'admin' || req.body.password !== '000000') { return res.send({ status: 1, msg: '登录失败' }) } // TODO_02: 请将登录成功后的用户信息,保存到 Session // 注意: 只有成功配置了 express-session 这个中间件之后,才能够通过 req 点出来 session 这个属性 req.session.user = req.body; // 用户信息 req.session.islogin = true; // 用户的登录状态 res.send({ status: 0, msg: '登录成功' }) }) app.get('/api/username',(req,res)=>{ if(!req.session.islogin){ return res.send({status:1,msg:"fail"}) } res.send({ status:0, msg:'success', username:req.session.user.username }) }) app.listen(80, () => { console.log('127.0.0.1') }) ``` 5. 清空session > 调用 req.session.destroy()函数,即可清空服务器保存的 session 信息 ```js const express = require('express'); const app = express(); // 1.导入 session 中间件 const session = require('express-session') // 2.配置 Session 中间件 app.use( session({ secret: 'keyboard cat',// secret 属性的值可以为任意字符串 resave: false,// 固定写法 saveUninitialized: true // 固定写法 })) // 托管静态页面 app.use(express.static('./pages')) // 解析 POST 提交过来的表单数据 app.use(express.urlencoded({ extended: false })) // 登录的 API 接口 app.post('/api/login', (req, res)=>{ // 判断用户提交的登录信息是否正确 if (req.body.username !== 'admin' || req.body.password !== '000000') { return res.send({ status: 1, msg: '登录失败' }) } // TODO_02: 请将登录成功后的用户信息,保存到 Session // 注意: 只有成功配置了 express-session 这个中间件之后,才能够通过 req 点出来 session 这个属性 req.session.user = req.body; // 用户信息 req.session.islogin = true; // 用户的登录状态 res.send({ status: 0, msg: '登录成功' }) }) app.get('/api/username',(req,res)=>{ if(!req.session.islogin){ return res.send({status:1,msg:"fail"}) } res.send({ status:0, msg:'success', username:req.session.user.username }) }) app.post('/api/logout',(req,res)=>{ req.session.destroy(); res.send({ status:0, msg:"退出登录成功", }) }) app.listen(80, () => { console.log('http://127.0.0.1:80') }) ``` ## JWT验证机制 ### 了解session的认证局限性 > Session 认证机制需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域 Sssion 认证。 ### 什么是JWT > JWT(英文全称:JSON Web Token) 是目前最流行的跨域认证解决方案 ### JWT的工作原理 ![JWT的工作原理](pic/JWT的工作原理.png) > 总结:用户的信息通过 Token 字符串的形式,保存在客户端测览器中。服务器通过还原 Token 字符串的形式来认证用户的身份。 ### JWY的组成部分 > Signature (签名)JWT 通常由三部分组成,分别是 Header (头部)、Payload (有效荷载)、三者之间使用英文的“”分隔,格式如下: ``` Header.Payload.Signature ``` 实例: ``` 3N3b3Jkrioiliwibmlia25YUBpdGNhc30uY24iLCJ1c2VVX.3BpYvI6IiIsImlhdCI6MTU30DAZNiY4MiwNrtMG0411KdZ33S9KBL3XeuBxul.yJhbbhuioilZXhwIioxNTc4MDCYN ``` JWT的三个组成部分,从前到后分别是 Header、Payload、Signature 其中: - Payload 部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串 - Header 和 Signature 是安全性相关的部分,只是为了保证 Token 的安全性 ![JWT机制](pic/JWT机制.png) ### JWT的使用方式 > 客户端收到服务器返回的JWT 之后,通常会将它储存在 localStorage 或 sessionStorage 中 此后,客户端每次与服务器通信,都要带上这个JWT 的符串,从而进行身份认证。推荐的做法是把JWT 放在 HTTP请求头的 Authorization 字段中,格式如下: ``` Authorization: Bearer ``` ### 在express中使用JWT #### 安装JTW相关的包 ```shell npm install jsonwebtoken express-jwt ``` - jsonwebtoken用户生成JWT字符串、 - express-jwt用户将JTW字符串解析还原成JSON对象 #### 导入JTW相关的包 ```js // 1.导入用于生成 JWT 字符串的包 const jwt = require( 'jsonwebtoken' ) // 2.导入用于将客户端发送过来的 JWT 字符串,解析还原成 JSON 对象的包 const expressJWT = require('express-jwt') ``` #### 定义secret密钥 > 为了保证JWT 字符串的安全性,防止WT 字符串在网络传输过程中被别人破解,我们需要专门定义一个用于加密和解密的 secret 密钥: - 当生成JWT 字符串的时候, 需要使用secret密钥对用户的信息进行加密,最终得到加密好的JWT字符串 - 当把JWT字符串解析还原成JSON对象的时候,需要使用secret 密进行解密 ```js // 定义 secret 密钥,建议将密钥命名为 secretKey const secretKey = 'zhoghou No1 ^-^' ``` #### 在登录成功后生成JWT字符串 > 调用jsonwebtoken 包提供的 sign0 方法,将用户的信息加密成JWT 字符串,响应给客户端 ```js // 参数1:用户的信息对象 // 参数2:加密的秘钥 // 参数3:配置对象,可以配置当前 token 的有效期 // 记住:千万不要把密码加密到 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对象 ```js // TODO_04:注册将 JWTad字符串解析还原成 JSON 对象的中间件 // 注意:只要配置成功了 express-jwt 这个中间件,就可以把解析出来的用户信息,挂载到 req.user 属性上 app.use(expressJWT({ secret: secretKey, }).unless({ path: [/^\/apo\//] })) ``` #### 使用req.user获取用户信息 > 当express-jwt 这个中间件配置成功之后,即可在那些有权限的接口中,使用req.user 对象,来访问从JWT 字符串中解析出来的用户信息了,示例代码如下: ```js // 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = express() // TODO_01:安装并导入 JWT 相关的两个包,分别是 jsonwebtoken 和 express-jwt const jwt = require('jsonwebtoken') const expressJWT = require('express-jwt') // 允许跨域资源共享 const cors = require('cors') app.use(cors()) // 解析 post 表单数据的中间件 const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) // TODO_02:定义 secret 密钥,建议将密钥命名为 secretKey const secretKey = 'itheima No1 ^_^' // TODO_04:注册将 JWT 字符串解析还原成 JSON 对象的中间件 // 注意:只要配置成功了 express-jwt 这个中间件,就可以把解析出来的用户信息,挂载到 req.user 属性上 app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] })) // 登录接口 app.post('/api/login', function (req, res) { // 将 req.body 请求体中的数据,转存为 userinfo 常量 const userinfo = req.body // 登录失败 if (userinfo.username !== 'admin' || userinfo.password !== '000000') { return res.send({ status: 400, message: '登录失败!', }) } // 登录成功 // TODO_03:在登录成功之后,调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端 // 参数1:用户的信息对象 // 参数2:加密的秘钥 // 参数3:配置对象,可以配置当前 token 的有效期 // 记住:千万不要把密码加密到 token 字符中 const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' }) res.send({ status: 200, message: '登录成功!', token: tokenStr, // 要发送给客户端的 token 字符串 }) }) // 这是一个有权限的 API 接口 app.get('/admin/getinfo', function (req, res) { // TODO_05:使用 req.user 获取用户信息,并使用 data 属性将用户信息发送给客户端 console.log(req.user) res.send({ status: 200, message: '获取用户信息成功!', data: req.user, // 要发送给客户端的用户信息 }) }) // TODO_06:使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误 app.use((err, req, res, next) => { // 这次错误是由 token 解析失败导致的 if (err.name === 'UnauthorizedError') { return res.send({ status: 401, message: '无效的token', }) } res.send({ status: 500, message: '未知的错误', }) }) // 调用 app.listen 方法,指定端口号并启动web服务器 app.listen(8888, function () { console.log('Express server running at http://127.0.0.1:8888') }) ``` #### 捕获解析JWT失败后产生的错误 > 当使用expressjwt 解析Token 字符串时,如果客户端发送过来的 Token 字符串过期或不合法,会产生一个解析失败的错误,影响项目的正常运行。我们可以通过 Express 的错误中间件,捕获这个错误并进行相关的处理,示例代码如下: