赞
踩
目录
1.2.1、Node.js 中的 JavaScript 运行环境
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
注意:
① 浏览器是 JavaScript 的前端运行环境。
② Node.js 是 JavaScript 的后端运行环境。
③ Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。
Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。然而,基于 Node.js 提供的这些基础能,很多强大的工具和框架如雨后春笋,层出不穷:
① 基于 Express 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用
② 基于 Electron 框架(https://electronjs.org/),可以构建跨平台的桌面应用
③ 基于 restify 框架(http://restify.com/),可以快速构建 API 接口项目
④ 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…
浏览器中的 JavaScript 学习路径:
JavaScript 基础语法 + 浏览器内置 API(DOM + BOM) + 第三方库(jQuery、art-template 等)
Node.js 的学习路径:
JavaScript 基础语法 + Node.js 内置 API 模块(fs、path、http等)+ 第三方 API 模块(express、mysql 等)
下载方式:官网下载页进行下载
.msi和.zip格式区别:
.msi是Windows installer开发出来的程序安装文件,它可以让你安装,修改,卸载你所安装的程序。说白了.msi就是Windows installer的数据包,把所有和安装文件相关的内容封装在一个包里。此外:它还包含有关安装过程自己的信息。例如:安装序列、目标文件夹路径、安装选项和控制安装过程的属性。
.zip是一个压缩包,解压之后即可,不需要安装
①下载完成后,双击安装包,开始安装,使用默认配置安装一直点next
即可,安装路径默认在C:\Program Files
下,也可以自定义修改
②安装路径默认在C:\Program Files下面,也能够自定义修改,而后点击next(我这里设置我的安装目录为E:\xf\node\
根据自己的需要进行更改。)
③下图根据本身的需要进行,我选择了默认Node.js runtime,而后Next
Node.js runtime :表示运行环境
npm package manager:表示npm包管理器
online documentation shortcuts :在线文档快捷方式
Add to PATH:添加到环境变量
④以下图框中所示,我没有选中,而是直接next
⑤点击Install,进行安装
⑥点击finish,完成安装
⑦安装完成后,.msi格式的安装包已经将node启动程序添加到系统环境变量path中,咱们能够查看系统变量进行验证:在【个人电脑】右键→【属性】→【高级系统设置】
⑧点击【高级】→【环境变量】
⑨在系统变量中查看【path】,点击【编辑】
⑩会发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中
① 既然已经将node程序添加到全局系统变量中,把咱们能够直接在CMD窗口中任意位置执行node,打开CMD窗口,执行命令node -v
查看node版本
【注意:此时是打开CMD窗口,并非在C:\Program Files\nodejs目录下执行node.exe】
② 最新版的node在安装时同时也安装了npm,执行npm -v
查看npm版本
③ 默认状况下,咱们在执行npm install -g XXXX时,下载了一个全局包,这个包的默认存放路径C:\Users\Administrator\AppData\Roaming\npm\node_modules下,能够经过CMD指令npm root -g
查看
⑤ 一部分经常使用的命令,以下:
npm -v:查看npm安装的版本。
npm init:会引导你建立一个package.json文件,包括名称、版本、作者等信息。
npm list:查看当前目录下已安装的node包。
npm ls:查看当前目录下已安装的node包。
npm install moduleNames:安装Node模块到本地目录node_modules下。
npm install < name > -g:将包安装到全局环境中。
npm install < name > --save:安装的同时,将信息写入package.json中,项目路径中若是有package.json文件时,直接使用npm install方法就能够根据dependencies配置安装全部的依赖包,这样代码提交到git时,就不用提交node_modules这个文件夹了。
npm install < name> --save-dev:安装的同时,将信息写入package.json中项目路径中若是有package.json文件时,直接使用npm install方法就能够根据devDependencies配置安装全部的依赖包,这样代码提交到git时,就不用提交node_modules这个文件夹了。
npm uninstall moudleName:卸载node模块。
3.4、环境配置
① 打开安装的目录(默认安装情况下在C:\Program Files\nodejs)
② 在安装目录下新建两个文件夹【node_global】和【node_cache】
③ 再次打开cmd命令窗口,输入npm config set prefix “你的路径\node_global”(“你的路径”默认安装的状况下为 C:\Program Files\nodejs)
npm config set prefix "E:\KF\nodejs\node_global"
④ npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录
npm config set cache "E:\KF\nodejs\node_cache"
执行的时候建议使用管理员权限打开CMD,否则有可能会提示权限不够报错
⑤设置环境变量,打开【系统属性】-【高级】-【环境变量】,在系统变量
中新建
变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_global\node_modules
( 用来告诉系统, 下载的模块或者包都在这里了)
⑥ 编辑用户变量(环境变量)
的 path,将默认的 C 盘下 APPData\Roaming\npm
修改成 C:\Program Files\nodejs\node_global
,点击确定
最后别忘了在Path
里面添加NODE_PATH
⑦ 测试,配置完成后,安装个module测试下,咱们就安装最经常使用的express模块,打开cmd窗口,输入以下命令进行模块的全局安装
npm install express -g // -g是全局安装的意思
官方地址:File system | Node.js v18.12.0 Documentation
fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求。
例如:fs.readFile() 方法,用来读取指定文件中的内容;fs.writeFile() 方法,用来向指定的文件中写入内容
如果要在 JavaScript 代码中,使用 fs 模块来操作文件,则需要使用如下的方式先导入它:const fs = require('fs')
使用 fs.readFile() 方法,可以读取指定文件中的内容,语法格式如下:fs.readFile(path[,options],callback)
参数解读:
参数1:必选参数,字符串,表示文件的路径。
参数2:可选参数,表示以什么编码格式来读取文件。
参数3:必选参数,文件读取完成后,通过回调函数拿到读取的结果。
示例代码:
- const fs = require('fs')
- fs.readFile("./files/1.txt", "utf-8", function (err, dataStr) {
- //回调函数,拿到读取失败和成功的结果err dataStr
- console.log(err)
- console.log('-------------')
- console.log(dataStr)
- })
- //可以判断 err 对象是否为 null,从而知晓文件读取的结果:
- const fs = require('fs')
- fs.readFile("./files/1.txt", "utf-8", function (err, dataStr) {
- //回调函数,拿到读取失败和成功的结果err dataStr
- if (err) {
- return console.log("读取文件失败" + err.message)
- }
- console.log("读取文件成功!" + dataStr)
- })
-
使用 fs.writeFile() 方法,可以向指定的文件中写入内容,语法格式如下:fs.writeFile(file,data[,options],callback)
参数解读:
参数1:必选参数,需要指定一个文件路径的字符串,表示文件的存放路径。
参数2:必选参数,表示要写入的内容。
参数3:可选参数,表示以什么格式写入文件内容,默认值是 utf8。
参数4:必选参数,文件写入完成后的回调函数。
示例代码:
- const fs = require('fs')
- fs.writeFile('./files/2.txt', "眩峰", function (err) {
- console.log(err)
- })
- //可以判断 err 对象是否为 null,从而知晓文件写入的结果:
- const fs = require('fs')
- fs.writeFile('./files/2.txt', "Hello Node.js", function (err) {
- if(err){
- return console.log("写入文件失败"+err.message)
- }
- console.log("文件写入成功")
- })
在使用 fs 模块操作文件时,如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时,很容易出现路径动态拼接错误的问题。
原因:代码在运行的时候,会以执行 node 命令时所处的目录,动态拼接出被操作文件的完整路径。
解决方案:在使用 fs 模块操作文件时,直接提供完整的路径,不要提供 ./ 或 ../ 开头的相对路径,从而防止路径动态拼接的问题。
- const fs = require('fs')
- fs.writeFile(__dirname + '/files/2.txt', "眩峰", function (err) {
- console.log(err)
- })
官方地址:Path | Node.js v18.12.0 Documentation
path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。
例如:
path.join() 方法,用来将多个路径片段拼接成一个完整的路径字符串
path.basename() 方法,用来从路径字符串中,将文件名解析出来
如果要在 JavaScript 代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它:const path = require('path')
使用 path.join() 方法,可以把多个路径片段拼接为完整的路径字符串,语法格式如下:path.join([...pahts])
参数解读:
...paths <string> 路径片段的序列
返回值: <string>
示例代码:
- const path = require('path')
- const pathStr = path.join('/a','/b/c','../','./d','e')
- console.log(pathStr) //shuchu\a\b\d\e
-
- const pathStr2 = path.join(__dirname,'./files/1.txt')
- console.log(pathStr2) //输出 当前文件所处目录\files\1.txt
使用 path.basename() 方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名,语法格式如下:path.basename(path[,ext])
参数解读:
path <string> 必选参数,表示一个路径的字符串
ext <string> 可选参数,表示文件扩展名
返回: <string> 表示路径中的最后一部分
示例代码:
- const fpath = '/a/b/c/index.html' //文件的存放路径
-
- var fullName = path.basename(fpath)
- console.log(fullName) //输出index.html
-
- var nameWithoutExt = path.basename(fpath,'.html')
- console.log(nameWithoutExt) //输出index
使用 path.extname() 方法,可以获取路径中的扩展名部分,语法格式如下:path.extname(path)
参数解读:
path <string>必选参数,表示一个路径的字符串
返回: <string> 返回得到的扩展名字符串
示例代码:
- const fpath = '/a/b/c/index.html'//路径字符串
- const fext = path.extname(fpath)
- console.log(fext) //输出.html
http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer() 方法,就能方便的把一台普通的电脑,变成一台 Web 服务器,从而对外提供 Web 资源服务。使用的话导入即可:const http = require('http')
服务器和普通电脑的区别在于,服务器上安装了 web 服务器软件,例如:IIS、Apache 等。通过安装这些服务器软件,就能把一台普通的电脑变成一台 web 服务器。
在 Node.js 中,我们不需要使用 IIS、Apache 等这些第三方 web 服务器软件。因为我们可以基于 Node.js 提供的
http 模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供 web 服务。
① 导入 http 模块
const http = require('http')
② 创建 web 服务器实例
- //调用 http.createServer() 方法,即可快速创建一个 web 服务器实例:
- const server = http.createServer()
③ 为服务器实例绑定 request 事件,监听客户端的请求
- //使用服务器实例的.on()方法,为服务器绑定一个request事件
- server.on('request',(req,res)=>{
- //req是请求对象,它包含了与客户端相关的数据和属性,如req.url是客户端请求的url地址
- //只要有客户端来请求我们自己的服务器,就会触发request事件,从而调用这个事件处理函数
- console.log('Someone visit our web server')
- //res是响应对象,它包含了与服务器相关的数据和属性,如向res.end()方法的作用:向客户端发送指定的内容,并结束这次请求的处理过程
- })
④ 启动服务器
- //调用server.listen(端口号,cb回调)方法,即可启动web服务器
- server.listen(80,()=>{
- console.log('http server running at http://127.0.0.1')
- })
当调用 es.end() 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式:
- const http = require('http') //导入http模块
- //创建web服务器实例
- const server = http.createServer()
- //为服务器实例绑定request事件,监听客户端的请求
- //req是请求对象,包含了与客户端相关的数据和属性
- server.on('request', function (req, res) {
- const url = req.url
- const method = req.method
- const str = `你的请求地址url是:${url},请求方法类型是:${method}`
- console.log(str)
- //当调用res.end()方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
- //为了防止中文显示乱码的问题,需要设置响应头Content-Type 的值为text/html;charset=utf-8
- res.setHeader('Content-Type', 'text/html;charset=utf-8')
- res.end(str)
- // console.log("Someone visit our web server")
- })
- //启动服务器
- server.listen(80, function () {
- console.log("server running at http://127.0.0.1")
- })
官方给出的概念:Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。
Express 的本质:就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法。
Express 的中文官网:http:// http://www.expressjs.com.cn/
对于前端程序员来说,最常见的两种服务器,分别是:
Web 网站服务器:专门对外提供 Web 网页资源的服务器。
API 接口服务器:专门对外提供 API 接口的服务器。
使用 Express,我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器。
在项目所处的目录中,运行如下的终端命令,即可将 express 安装到项目中使用:npm install express也可以指定版本安装npm install express@4.17.1
1、使用express创建基本的web服务器
- //导入express
- const express = require('express')
- //创建web服务器
- const app = express()
- //调用app.listen(端口号,启动成功后的回调函数),启动服务器
- app.listen(80,()=>{
- console.log('express server running at http://127.0.0.1')
- })
2、监听get请求
- app.get('请求URL',function(req,res){/*处理函数*/})
- //参数1、客户端请求的URL地址
- //参数2、请求对应的处理函数,req请求对象,包含了与请求相关的属性与方法;res响应对象,包含了与响应相关的属性与方法
3、监听post请求
- app.post('请求URL',function(req,res){/*处理函数*/})
- //参数1、客户端请求的URL地址
- //参数2、请求对应的处理函数,req请求对象,包含了与请求相关的属性与方法;res响应对象,包含了与响应相关的属性与方法
4、把内容响应给客户端
- app.get('/user',(req,res)=>{
- //向客户端发送JSON对象
- res.send({name:'lsf',age:21,gender:'男'})
- })
- app.post('/user',(req,res)=>{
- //向客户端发送文本内容
- res.send('请求成功')
- })
5、获取 URL 中携带的查询参数
通过 req.query 对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数:
- app.get('/',(req,res)=>{
- //req.query默认是一个空对象
- //客户端使用?name=lsf&age=20这种查询字符串形式,发送到服务器的参数
- //可以通过req.query对象访问到,例如:
- //req.query.name req.query.age
- console.log(req.query)
- })
6、获取 URL 中的动态参数
通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数:
- //URL地址中,可以通过:参数名的形式,匹配动态参数值
- app.get('/user/:id',(req,res)=>{
- //req.params默认是一个空对象
- //里面存放着通过:动态匹配到的参数值
- console.log(req.parmas)
- })
express 提供了一个非常好用的函数,叫做 express.static(),通过它,我们可以非常方便地创建一个静态资源服务器,
例如,通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了:
app.use(express.static('public'))
这样就可以访问 public 目录中的所有文件了:
http://localhost:3000/images/bg.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/login.js
注意:Express 在指定的静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在 URL 中。
如果想要托管多个静态资源,只需要执行多次app.use(express.static(路径))即可。
1、我们也可以给静态资源挂载一个路径前缀
app.use('/public',express.static('public'))
这样我们就可以访问 /public 前缀地址来访问 public 目录中的文件了:
http://localhost:3000/public/images/kitten.jpg
http://localhost:3000/public/css/style.css
http://localhost:3000/public/js/app.js
在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下:
app.METHOD(PATH,HANDLER)
例如:
- //匹配GET请求,且请求URL为/
- app.get('/',function(req,res){
- res.send('Hello World!')
- })
- //匹配POST请求,且请求URL为/
- app.post('/',function(req,res){
- res.send('Got a PST Request')
- }
每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。
在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理。
路由匹配的注意点:
① 按照定义的先后顺序进行匹配
② 请求类型和请求的URL同时匹配成功,才会调用对应的处理函数
1、简单的使用
在 Express 中使用路由最简单的方式,就是把路由挂载到 app 上,示例代码如下:
- const express = require('express')
- //创建web服务器,命名为app
- const app = express()
- //挂载路由
- app.get('/',(req,res)=>{res.send('Hello World')})
- app.post('/',(req,res)=>{res.send('Post Request')})
- //启动web服务器
- app.listen(80,()=>{console.log('server running at http://127.0.0.1')})
2、模块化路由的使用
为了方便对路由进行模块化的管理,Express 不建议将路由直接挂载到 app 上,而是推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下:
① 创建路由模块对应的 .js 文件
② 调用 express.Router() 函数创建路由对象
③ 向路由对象上挂载具体的路由
④ 使用 module.exports 向外共享路由对象
⑤ 使用 app.use() 函数注册路由模块
创建路由模块:
- var express = require('express') //导入express
- //创建路由对象
- var router = express.Router()
-
- router.get('/user/list',function(req,res){
- res.send('Get User List')
- })
-
- router.post('/user/add',function(req,res){
- res.send('Add new user')
- })
-
- module.exports = router //向外导出路由对象
注册路由模块:
- //导入路由模块
- const userRouter = requrie('./router/user.js')
- //使用app.use()注册路由模块
- app.use(userRouter)
3、为路由模块添加前缀
类似于托管静态资源时,为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式也非常简单:
- //导入路由模块
- const userRouter = requrie('./router/user.js')
- //使用app.use()注册路由模块
- app.use('/api',userRouter)
中间件(Middleware ),特指业务流程的中间处理环节。
例如:在处理污水的时候,一般都要经过三个处理环节,从而保证处理过后的废水,达到排放标准
处理污水的这三个中间处理环节,就可以叫做中间件。
当一个请求到达 Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理。
Express 的中间件,本质上就是一个 function 处理函数,Express 中间件的格式如下:
注意:中间件函数的形参列表中,必须包含 next 参数。而路由处理函数中只包含 req 和 res。
next 函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由。
- //常量mw所指向的,就是一个中间件函数
- const mw = function(req,res,next){
- console.log('这是一个简单的中间件函数')
- next() //表示把流转关系交给下一个中间件或路由
- }
全局生效的中间件
客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件。
通过调用 app.use(中间件函数),即可定义一个全局生效的中间件,示例代码如下:
- //常量mw所指向的,就是一个中间件函数
- const mw = function(req,res,next){
- console.log('这是一个简单的中间件函数')
- next() //表示把流转关系交给下一个中间件或路由
- }
- app.use(mw) //注册全局中间件
定义全局中间件的简化形式
- app.use(function(req,res,next){
- console.log('这是一个简单的中间件函数')
- next() //表示把流转关系交给下一个中间件或路由
- })
多个中间件之间,共享同一份 req 和 res。基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用。
不使用 app.use() 定义的中间件,叫做局部生效的中间件,示例代码如下:
- const mw1 = function(req,res,next){
- console.log('这是中间件函数')
- next()
- }
- //mw1这个中间件只在当前路由中生效,这种用法属于局部生效的中间件
- app.get('/',mw1,function(req,res){
- res.send('Home page')
- })
- //mw1这个中间件不会影响下面这个路由
- app.get('/user',function(req,res){res.send('User page')})
① 一定要在路由之前注册中间件
② 客户端发送过来的请求,可以连续调用多个中间件进行处理
③ 执行完中间件的业务代码之后,不要忘记调用 next() 函数
④ 为了防止代码逻辑混乱,调用 next() 函数后不要再写额外的代码
⑤ 连续调用多个中间件时,多个中间件之间,共享 req 和 res 对象
express官方把常见的中间件分为了5类:
① 应用级别的中间件
通过 app.use() 或 app.get() 或 app.post() ,绑定到 app 实例上的中间件,叫做应用级别的中间件,代码示例如下:
- app.use((req,res,next)=>{
- next()
- }) //应用级别的中间件(全局中间件)
-
- //应用级别的中间件(局部中间件)
- app.get('/',mw1,(req,res)=>{
- res.send('Home page')
- })
② 路由级别的中间件
绑定到 express.Router() 实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过,应用级别中间件是绑定到 app 实例上,路由级别中间件绑定到 router 实例上,代码示例如下:
- var app = express()
- var router = express.Router()
- //路由级别的中间件
- router.use(function(req,res,next){
- console.log('Time',Date.now())
- next()
- })
-
- app.use('/',router)
③ 错误级别的中间件
错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。
格式:错误级别中间件的 function 处理函数中,必须有 4 个形参,形参顺序从前到后,分别是 (err, req, res, next)。
- app.get('/',function(req,res){
- throw new Error('服务器内部发生了错误!')
- res.send('Home Page')
- })
- //错误级别的中间件
- app.use(function(err,req,res,next){
- console.log('发生了错误:'+err.message)
- 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@4.16.0 之前的版本中,经常使用 body-parser 这个第三方中间件,来解析请求体数据。使用步骤如下:
① 运行 npm install body-parser 安装中间件
② 使用 require 导入中间件
③ 调用 app.use() 注册并使用中间件
注意:Express 内置的 express.urlencoded 中间件,就是基于 body-parser 这个第三方中间件进一步封装出来的。
在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要频繁的手动 close 掉,然后再重新启动,非常繁琐。
现在,我们可以使用 nodemon(https://www.npmjs.com/package/nodemon) 这个工具,它能够监听项目文件的变动,当代码被修改后,nodemon 会自动帮我们重启项目,极大方便了开发和调试。
npm install -g nodemon
当基于 Node.js 编写了一个网站应用的时候,传统的方式,是运行 node app.js 命令,来启动项目。这样做的坏处是:代码被修改之后,需要手动重启项目。
现在,我们可以将 node 命令替换为 nodemon 命令,使用 nodemon app.js 来启动项目。这样做的好处是:代码被修改之后,会被 nodemon 监听到,从而实现自动重启项目的效果。
- node app.js
- //将上面命令替换为下面的
- nodemon app.js
我们编写的post接口和get接口,有一个很严重的问题,不支持跨域访问。
解决接口跨域问题的方案主要有两种:
① CORS(主流的解决方案,推荐使用)
② JSONP(有缺陷的解决方案:只支持 GET 请求)
cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件,可以很方便地解决跨域问题。使用步骤分为如下 3 步:
① 运行 npm install cors 安装中间件
② 使用 const cors = require('cors') 导入中间件
③ 在路由之前调用 app.use(cors()) 配置中间件
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列 HTTP 响应头组成,这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头,就可以解除浏览器端的跨域访问限制。
① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。
② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服务端接口(例如:IE10+、Chrome4+、FireFox3.5+)。
mysql 模块是托管于 npm 上的第三方模块。它提供了在 Node.js 项目中连接和操作 MySQL 数据库的能力。想要在项目中使用它,需要先运行如下命令,将 mysql 安装为项目的依赖包:npm install mysql
在使用 mysql 模块操作 MySQL 数据库之前,必须先对 mysql 模块进行必要的配置,主要的配置步骤如下:
- //导入mysql模块
- const mysql = require('mysql')
- //建立与MySQL数据库的连接
- const db = mysql.createPool({
- host:'127.0.0.1',
- user:'登录数据库的账号',
- password:'登录数据库密码',
- database: '指定要操作那个数据库'
- })
调用 db.query() 函数,指定要执行的 SQL 语句,通过回调函数拿到执行的结果:
- //检测mysql模块能否正常工作
- db.query('select 1',(err,results)=>{
- if(err) return console.log(err.message)
- console.log(results)
- })
- //查询users表中所有的数据:
- db.query('select * from users',(err,results)=>{
- //查询失败
- if(err) return console.log(err.message)
- //查询成功
- console.log(results)
- })
向 users 表中新增数据, 其中 username 为 Spider-Man,password 为 pcc321。示例代码如下:
- //要插入users表中的数据对象
- const user = {username:'lsf',password:'pcc321'}
- //待执行的SQL语句,其中英文?表示占位符
- const sqlStr = `insert into users (username,password) values(?,?)`
- db.query(sqlStr,[user.username,user.password],(err,results)=>{
- if(err) return console.log(err.message)//失败
- if(results.affectRows === 1){console.log('插入数据成功')}//成功
- })
向表中新增数据时,如果数据对象的每个属性和数据表的字段一一对应,则可以通过如下方式快速插入数据:
- //要插入users表中的数据对象
- const user = {username:'lsf',password:'pcc321'}
- //待执行的SQL语句,其中英文?表示占位符
- const sqlStr = `insert into users set ?`
- //直接将数据对象当作占位符的值
- db.query(sqlStr,user,(err,results)=>{
- if(err) return console.log(err.message)//失败
- if(results.affectRows === 1){console.log('插入数据成功')}//成功
- })
- //要更新的数据对象
- const user = {id:1,username:'zzx',password:'547426'}
- //待执行的SQL语句,其中英文?表示占位符
- const sqlStr = `update user 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.affectRows === 1){console.log('更新数据成功')}//成功
- })
- //要更新的数据对象
- const user = {id:1,username:'zzx',password:'547426'}
- //待执行的SQL语句,其中英文?表示占位符
- const sqlStr = `update user set ? where id = ?`
- //直接将数据对象当作占位符的值
- db.query(sqlStr,[user,user.id],(err,results)=>{
- if(err) return console.log(err.message)//失败
- if(results.affectRows === 1){console.log('更新数据成功')}//成功
- })
- //删除数据的时候,推荐根据id进行删除
- const sqlStr = `delete from user where id = ?`
- //如果sql语句中有多个占位符,则必须使用数组为每个占位符指定具体的值,如果SQL语句中只有一个占位符,则可以省略数组
- db.query(sqlStr,7,(err,results)=>{
- if(err) return console.log(err.message)//失败
- if(results.affectRows === 1) console.log('删除数据成功!')//成功
- })
服务端渲染的概念:服务器发送给客户端的 HTML 页面,是在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用 Ajax 这样的技术额外请求页面的数据。代码示例如下:
- app.get('/index.html',(req,res)=>{
- //要渲染的数据
- const user = {name:'lsf',age:21}
- //服务器端通过字符串拼接,动态生成HTML内容
- const html = `<h1>姓名:${user.name},年龄:${user.age}</h1>`
- //把生成好的页面内容响应给客户端。因此,客户端拿到的是带有真实数据的HTML页面
- res.send(html)
- })
服务端渲染的优缺点
优点:
① 前端耗时少。因为服务器端负责动态生成 HTML 内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
② 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容,所以爬虫更容易爬取获得信息,更有利于SEO。
缺点:
① 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
② 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。
前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛应用。简而言之,前后端分离的 Web 开发模式,就是后端只负责提供 API 接口,前端使用 Ajax 调用接口的开发模式。
前后端分离的优缺点
优点:
① 开发体验好。前端专注于 UI 页面的开发,后端专注于api 的开发,且前端有更多的选择性。
② 用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
③ 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。
缺点:
① 不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方案:利用 Vue、React 等前端框架的 SSR (server side render)技术能够很好的解决 SEO 问题!)
身份认证(Authentication)又称“身份验证”、“鉴权”,是指通过一定的手段,完成对用户身份的确认。
日常生活中的身份认证随处可见,例如:高铁的验票乘车,手机的密码或指纹解锁,支付宝或微信的支付密码等。
在 Web 开发中,也涉及到用户身份的认证,例如:各大网站的手机验证码登录、邮箱密码登录、二维码登录等。
身份认证的目的,是为了确认当前所声称为某种身份的用户,确实是所声称的用户。例如,你去找快递员取快递,你要怎么证明这份快递是你的。
在互联网项目开发中,如何对用户的身份进行认证,是一个值得深入探讨的问题。例如,如何才能保证网站不会错误的将“马云的存款数额”显示到“马化腾的账户”上。
对于服务端渲染和前后端分离这两种开发模式来说,分别有着不同的身份认证方案:
① 服务端渲染推荐使用 Session 认证机制
② 前后端分离推荐使用 JWT 认证机制
1、HTTP 协议的无状态性
了解 HTTP 协议的无状态性是进一步学习 Session 认证机制的必要前提。
HTTP 协议的无状态性,指的是客户端的每次 HTTP 请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次 HTTP 请求的状态。
2、如何突破 HTTP 无状态的限制
对于超市来说,为了方便收银员在进行结算时给 VIP 用户打折,超市可以为每个 VIP 用户发放会员卡。
注意:现实生活中的会员卡身份认证方式,在 Web 开发中的专业术语叫做 Cookie。
3、什么是cookie
Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称(Name)、一个值(Value)和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。
不同域名下的 Cookie 各自独立,每当客户端发起请求时,会自动把当前域名下所有未过期的 Cookie 一同发送到服务器。
Cookie的几大特性:① 自动发送② 域名独立③ 过期时限④ 4KB 限制
4、Cookie 在身份认证中的作用
客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的 Cookie,客户端会自动将 Cookie 保存在浏览器中。
随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的 Cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份。
5、 Cookie 不具有安全性
由于 Cookie 是存储在浏览器中的,而且浏览器也提供了读写 Cookie 的 API,因此 Cookie 很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过 Cookie 的形式发送给浏览器。
注意:千万不要使用 Cookie 存储重要且隐私的数据!比如用户的身份信息、密码等。
6、提高身份认证的安全性
为了防止客户伪造会员卡,收银员在拿到客户出示的会员卡之后,可以在收银机上进行刷卡认证。只有收银机确认存在的会员卡,才能被正常使用。
这种“会员卡 + 刷卡认证”的设计理念,就是 Session 认证机制的精髓。
7、session的工作原理
1、了解 Session 认证的局限性
Session 认证机制需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域 Session 认证。
注意:
当前端请求后端接口不存在跨域问题的时候,推荐使用 Session 身份认证机制。
当前端需要跨域请求后端接口的时候,不推荐使用 Session 身份认证机制,推荐使用 JWT 认证机制。
2、什么是JWT
JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案。
3、JWT的工作原理
总结:用户的信息通过 Token 字符串的形式,保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用户的身份。
4、JWT的组成部分
JWT 通常由三部分组成,分别是 Header(头部)、Payload(有效荷载)、Signature(签名)。
三者之间使用英文的“.”分隔,格式如下:
5、JWT 的三个部分各自代表的含义
JWT 的三个组成部分,从前到后分别是 Header、Payload、Signature。
其中:
Payload 部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。
Header 和 Signature 是安全性相关的部分,只是为了保证 Token 的安全性。
6、JWT 的使用方式
客户端收到服务器返回的 JWT 之后,通常会将它储存在 localStorage 或 sessionStorage 中。
此后,客户端每次与服务器通信,都要带上这个 JWT 的字符串,从而进行身份认证。推荐的做法是把 JWT 放在 HTTP请求头的 Authorization 字段中,格式如下:Authentication: Bearer <token>
npm install express-session即可
- //导入session中间件
- var session = require('express-session')
- //配置session中间件
- app.use(session({
- secret:'keyboard cat',//secret属性值可以为任意字符串
- resave:false,
- saveUninitialized:true
- }))
当 express-session 中间件配置成功后,即可通过 req.session 来访问和使用 session 对象,从而存储用户的关键信息:
- app.post('/api/login',(req,res)=>{
- //判断用户提交的登录信息是否正确
- if(req.body.username !== 'admin' || req.body.password !== '000000'){
- return res.send({status:1,msg:'登录失败'})
- }
- 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})
- })
调用 req.session.destroy() 函数,即可清空服务器保存的 session 信息。
npm install jsonwebtoken express-jwt
jsonwebtoken 用于生成 JWT 字符串、express-jwt 用于将 JWT 字符串解析还原成 JSON 对象
- //导入用于生成jwt字符串的包
- const jwt = require('jsonwebtoken')
- //导入用于将客户端发送过来的JWT字符串解析还原成JSON对象的包
- const expressJWT = require('express-jwt')
为了保证 JWT 字符串的安全性,防止 JWT 字符串在网络传输过程中被别人破解,我们需要专门定义一个用于加密和解密的 secret 密钥:
① 当生成 JWT 字符串的时候,需要使用 secret 密钥对用户的信息进行加密,最终得到加密好的 JWT 字符串
② 当把 JWT 字符串解析还原成 JSON 对象的时候,需要使用 secret 密钥进行解密
- //secret秘钥的本质:就是一个字符串
- const secretKey = 'lsf No1 ^_^'
- //登录接口
- app.post('/api/login',function(req,res){
- //用户登录成功后,生成JWT字符串,通过token属性响应给客户端
- res.send({
- status:200,
- message:'登录成功!',
- //调用jwt.sifn()生成jwt字符串,三个参数分别是:用户信息对象、加密秘钥、配置对象
- token:jwt.sign({username:userinfo.username},secretKey,{expiresIn:'30s'})
- })
- })
客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的 Authorization 字段,将 Token 字符串发送到服务器进行身份认证。
此时,服务器可以通过 express-jwt 这个中间件,自动将客户端发送过来的 Token 解析还原成 JSON 对象:
- //使用app.use()来注册中间件
- //expressJWT({secret:secretKey})就是用来解析Token的中间件
- //.unless({path:[/^\/api\//]})用来指定哪些接口不需要访问权限
- app.use(expressJWT({secret:secretKey}).unless({path:{/^\/api\//]}))
当 express-jwt 这个中间件配置成功之后,即可在那些有权限的接口中,使用 req.user 对象,来访问从 JWT 字符串中解析出来的用户信息了,示例代码如下:.
- //这是一个有权限的API接口
- app.get('/admin/getinfo',function(req,res){
- console.log(req.user)
- res.send({
- status:200,
- message:'获取用户信息成功!'
- data:req.user
- })
- })
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。