1. Express
express官网
Express是基于Node.js平台快速、开放、极简的web开发框架。
Express的作用和Node.js内置的http模块类似，是专门用来创建web服务器的。
Express本质就是一个npm上的第三方包，提供了快速创建web服务器的便捷方法。
最常见的两种服务器：
Web网站服务器：专门对外提供Web网页资源的服务器API接口服务器：专门对外提供API接口的服务器
使用Express可以方便、快速的创建Web网站的服务器或API接口的服务器
2. Express的基本使用
安装
在项目所处的目录中，运行如下的终端命令，即可将express安装到项目中使用：
npm i express@4.17.1
创建基本的Web服务器
//导入expressconst express = require('express')//创建Web服务器const app = express()//调用app.listen(端口号, 启动成功后的回调函数)，启动服务器app.listen(80, () => {console.log('express server running at http://127.0.0.1')})
监听GET请求
通过app.get()方法，可以监听客户端GET请求
//参数1：客户端请求的URL地址//参数2：请求对应的处理函数// req:请求对象（包含了与请求相关的属性与方法）// res:响应对象（包含了与响应相关的属性与方法）app.get('请求URL', function(req, res) {/*处理函数*/})
监听POST请求
通过app.post()方法，可以监听客户端的POST请求
//参数1：客户端请求的URL地址//参数2：请求对应的处理函数// req:请求对象（包含了与请求相关的属性与方法）// res:响应对象（包含了与响应相关的属性与方法）app.post('请求URL', function(req, res) {/*处理函数*/})
把内容响应给客户端
通过 res.send()方法，可以把处理好的内容发送给客户端：
app.get('/user', (req, res) => {//向客户端发送JSON对象res.send({name: 'zs', age: 20, gender: '男'})})app.post('/User', (req, res) => {//向客户端发送文本内容res.send('请求成功')})
获取URL的动态参数
通过req.params()对象可以访问到URL中，通过：匹配到的动态参数：
//URL地址中，可以通过 :参数名 的形式匹配动态参数值app.get('/user/:id', (req, res) => {//req.params默认是一个空对象，里面存放着通过：动态匹配到的参数值console.log(req.params)})
3. 托管静态资源
express.static()
express提供了一个非常好的函数，叫做express.static()，通过它我们可以非常方便地创建一个静态资源服务器。
例如：通过如下代码可以将public目录下的图片、CSS文件、JavaScript文件对外开放访问了：
app.use(express.static('public'))
托管多个静态资源目录
如果要托管多个静态目录，请多次调用express.static()函数：
app.use(express.static('public'))app.use(express.static('files'))
访问静态资源文件时，express.static()函数就会根据目录的添加顺序查找所需的文件。
挂载路径前缀
如果要在托管的静态资源访问路径之前，挂载路径前缀
app.use('/public', express.static('public'))
4. nodemon
安装nodemon
npm install -g nodemon
使用nodemon
当基于Node.js编写了一个网站的时候，传统的方式，是运行node app.js命令，来启动项目。这样的坏处是：代码被修改之后，需要手动重启项目。
可以将node命令替换为nodemon命令，使用nodemon app.js来启动项目。这样做的好处是：代码被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。
node app.js//将上面的终端命令，替换为下面的终端命令，即可实现自动重启项目的效果nodemon app.js
5. Express路由
在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express中的路由分3部分组成，分别是请求的类型、请求的UR地址、处理函数。
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 POST request')})
路由的匹配过程
路由的使用
在Express中使用路由最简单的方式，就是把路由挂载到app上
const express = require('express')//创建Web服务器，命名为appconst 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')})
模块化路由
创建路由模块
var express = require('express') //导入expressvar 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 = require('./router/user.js')//使用app.use()注册路由模块app.use(userRouter)
为路由模块添加前缀
类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单
const userRouter = require('./router/user.js')//使用app.use()注册路由模块，并添加统一的访问前缀 /apiapp.use('/api', userRouter)
6. Express中间件
中间件（Middleware），特指业务流程的中间处理环节。
7. Express中间件初体验
定义中间件函数
定义一个最简单的中间件函数：
//常量mw所指向的就是一个中间件函数const mv = function(req, res, next) {console.log('这是一个最简单的中间件函数')//在当前中间件的业务处理完毕后，必须调用next()函数//表示把流转关系转交给下一个中间件或路由next()}
全局生效的中间件
客户端发起的任何请求到达服务器之后，都会触发的中间件，叫做全局生效的中间件。
通过调用app.use(中间件函数)，即可定义一个全局生效的中间件。
//常量mv所指向的就是中间件函数const mv = function(req, res next) {console.log('这是一个最简单的中间件函数')next()}//全局生效的中间件app.use(mv)
定义全局中间件的简化形式
//全局生效的中间件app.use(function(req, res, next) {conosle.log('这是一个最简单的中间件函数')next()})
中间件的作用
定义多个全局中间件
可以使用app.use()连续定义多个全局中间件，客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行调用。
//第一个全局中间件app.use(function(req, res, next) {console.log('调用了第一个全局中间件')next()})//第二个全局中间件app.use(function(req, res, next) {console.log('调用了第二个全局中间件')next()})//请求这个路由，会依次触发上述两个全局中间件app.get('/user', (req, res) => {res.send('Home.page.')})
局部生效的中间件
不使用app.use()定义的中间件，叫做局部生效的中间件。
//定义中间件函数 mv1const mv1 = function(req, res, next) {console.log('这是中间件函数')next()}//mv1这个中间件只在"当前路由中生效"，这种用法属于"局部生效的中间件"app.get('/', function(req, res) {res.send('Home.page.')})//mv1这个中间件不会影响下面这个路由app.get('/user', function(req, res) {res.send('User page.') })
定义多个局部中间件
可以在路由中通过如下两种等价的方式，使用多个局部中间件
app.get('/', mv1, mv2, (req, res) => {res.send('Home.page.') })app.get('/', [mv1, mv2], (req, res) => {res.send('Home.page') })
中间件注意：
8. 中间件的分类
应用级别的中间件
通过app.use()或app.get()或app.post()，绑定到app实例上的中间件，叫做应用级别的中间件。
//应用级别的中间件（全局中间件）app.use((req, res, next) => {next()})//应用级别的中间件（局部中间件）app.get('/', mv1, (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内置的中间件
//配置解析 application/json 格式数据的内置中间件app.use(express.json())//配置解析 application/x-www-form-urlencoded 格式数据的内置中间件app.use(express.urlencoded({extended: false }))
自定义中间件
自定义中间件
使用app.use()来定义全局生效的中间件
app.use(function(req, res, next) {//中间件的业务逻辑})
监听req的data事件
在中间件中，需要监听req对象的data事件，来获取客户端发送到服务器的数据。
如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以data事件可能会触发多次，每一次触发data事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接。
//定义变量，用来存储客户端发送过来的请求体数据let str = ''//监听req对象的data事件（客户端发送过来的新的请求体数据）req.on('data', (chunk) => {//拼接请求体数据，隐式转换为字符串str = chunk})
监听req的end事件
当请求体数据接收完毕之后，会自动触发req的end事件。
因此，我们可以在req的end事件中，拿到并处理完整的请求体数据。
//监听req对象的end事件（请求体发送完毕后自动触发）req.on('end', () => {//打印完整的请求体数据console.log(str)//TODO:把字符串格式的请求体数据解析成对象格式})
使用querystring模块解析请求体数据
Node.js内置了一个querystring模块，专门来处理查询字符串。通过这个模块提供的parse()函数，可以轻松把查询字符串解析成对象的格式。
//导入处理querystring的Node.js内置模块const qs = require('querystring')//调用qs.parse()方法const body = qs.parse(str)
将解析出来的数据对象挂在为req.body
上游的中间件和下游的中间件及路由之间，共享同一份req和res。因此，可以将解析出来的数据挂载为req的自定义属性，命名为req.body，供下游使用。
req.on('end', () => {//调用qs.parse()方法，把查询字符串解析为对象const body = qs.parse(str) //将解析出来的数据挂载为req.body属性req.body = body//调用next()函数，执行后续的业务逻辑next()})
将自定义的中间件封装为模块
为了优化代码的结构，可以把自定义的中间件函数，封装为独立的模块。
//custom-body-parser.js 模块中的代码const qs = require('querystring')function bodyParser(req, res, next) {/*省略其它代码*/}//向外导出解析请求体数据的中间件函数module.exports = bodyParser----------------------------------------------------//导入自定义的中间件模块const myBodyParser = require('custom-body-parser')//注册自定义的中间件模块app.use(myBodyParser)
9. 使用Express写接口
创建基本的服务器
const express = require('express')const app = express()...//调用app.listen()方法指定端口号并启动Web服务器app.listen(80, function() {console.log('Express server running at http://127.0.0.1')})
创建API路由模块
//apiRouter.js【路由模块】const express = require('express')const apiRouter = express.Router()...module.exports = apiRouter-------------------------------//app.js【导入并注册路由模块】const apiRouter = require('./apiRouter.js')app.use('./api', apiRouter)
编写GET接口
apiRouter.get('/get', (req, res) => {//获取到客户端通过查询字符串，发送到服务器的数据const query = req.query//调用res.end()方法，把数据响应给客户端res.end({//状态：0表示成功，1表示失败status: 0,//状态描述msg: 'GET请求成功!'//需要响应给客户端的具体数据data: query})})
编写POST接口
apiRouter.post('/post', (req, res) => {//获取客户端通过请求体发送到服务器的URL-encoded数据const body = req.body//调用res.end()方法，把数据响应给客户端res.end({status: 0,msg: 'POST请求成功!',data: body})})
如果要获取URL-encoded格式的请求体数据，必须配置中间件app.use(express.urlencoded({ extended: false }))
10. CORS跨域资源共享
接口的跨域问题
刚才编写的GET和POST接口不支持跨域请求。
解决接口跨域问题有两种方案：
CORS（推荐）JSONP（只支持GET请求）
利用cors中间件解决跨域问题
cors是Express的一个第三方中间件，通过安装和配置cors中间件可以很方便地解决跨域问题
运行 npm install cors 安装中间件
使用 const cors = require(‘cors’) 导入中间件
在路由之前调用 app.use(cors()) 配置中间件
注意：
CORS只要在服务器进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了CORS的接口
CORS在浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端接口（例如：IE10+、chrome4+、FileFox3.5+）
CORS响应头部–Access-Control-Allow-Origin
响应头部中可以携带一个Access-Control-Allow-Origin字段
Access-Control-Allow-Origin: <origin> | *
其中origin参数的值指定了允许访问该资源的外域URL。
例如下面字段值将只允许来自 的请求：
res.setHeader('Access-Control-Allow-Origin', '')
如果指定了Access-Control-Allow-Origin字段的值为通配符 * ，表示允许来自任何域的请求。
res.setHeader('Access-Control-Allow-Origin', '*')
CORS响应头部–Access-Control-Allow-Origin-Header
//允许客户端额外向服务器发送 Content-Type请求头和X-Custom-Header请求头//注意：多个请求头之间使用英文的逗号进行分隔res.setHeader('Access-Control-Allow-Origin', 'Content-Type', X-Custom-Header)
CORS响应头部–Access-Control-Allow-Origin-Methods
默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求
如果客户端希望通过PUT、DELETE等方式发起请求服务器的资源，则需要在服务器通过Access-Control-Allow-Origin-Methods来指明实际请求所允许使用的HTTP方法。
//只允许POST、GET、DELETE、HEAD请求方法res.setHeder('Access-Control-Allow-Origin-Methods', 'POST、GET、DELETE、HEAD')//允许所有的HTTP请求方法res.Header('Access-Control-Allow-Origin-Methods', '*')
CORS请求的分类
根据请求方式和请求头的不同，分为两类
简单请求
预检请求
区别：
简单请求的特点：客户端与服务器之间只会发生一次请求
预检请求的特点：客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求
11. JSONP接口
概念：浏览器通过
特点：
JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求
创建JSONP接口的注意事项
如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口；否则JSONP接口会被处理CORS的接口。
//优先创建JSONP接口【这个接口不会被处理CORS接口】app.get('/api/jsonp', (req, res) => {})//再配置CORS中间件【后续的所有接口，都会被处理成CORS接口】app.use(cors())//这是一个开启了CORS的接口app.get('/api/get', (req, res) =>{})
实现JSONP接口的具体代码
app.get('./api/jsonp', (req, res) => {//获取客户端发送过来的回调函数的名字const funcName = req.querycallback//得到要通过JSONP形式发送给客户端的数据const data = {name: 'fg', age: 22 }//根据两步得到的数据，拼接出一个函数调用的字符串const scriptStr = '${funcName}(${JSON.stringify(data)})'//把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行res.send(scriptStr)})
在网页中使用jQuery发起JSONP请求
调用$.ajax()函数，提供JSONP的配置选项，从而发起JSONP请求。
$('#btnJSONP').on('click', function() {$.ajax({method: 'GET',url: 'http://127.0.0.1/api/jsonp',//表示要发起JSONP请求dataType: 'jsonp',success: function (res) {console.log(res)}})})
