阅读 182

后端-Node系列三:Express框架

Express web框架官网

1: express基础

1.1: express简介

// ------------------------------- express简介 --------------------------------
express是基于node.js封装出来的是专门用来创建web服务器的,本质上就是一个第三方包
express能快速创建web服务器和API接口的服务器
复制代码

1.2: 使用express创建基本的web服务器

// ----------------------- 使用express创建基本的web服务器 ------------------------
使用express创建web服务器
const express = require('express')
const app = express()
app.listen(80, ()=> {
  console.log('express server runing at http://127.0.0.1')
})
复制代码

1.3: 监听GET和POST请求以及响应客户端

// -------------------------- 使用express创建get和post请求 -------------------------------
//1: get
app.get('/user, (req, res) => {
   res.send({name: 'zs', age: 20, gender:''})
})
// 2:post
app.post('/user', (req, res) => {
  res.send('请求成功')
})
通过postman 来测试接口, 直接通过请求方式请求接口地址点击send就能在body中打印数据了,不用携带任何参数
复制代码

2: URL请求地址

2.1:获取URL中携带的查询参数

//------------------------- 获取URL中携带的查询参数 ------------------------------ 
get 方式的req.query查询参数
req.query获取到查询参数
app.get('/', (req, res) => {
   console.log(req.query)
})
在postman中测试接口, 直接在请求地址后面携带参数和在面板中的params中写是一样的, 通过send后他们两都会自动互相填写。 req.query默认是空对象。 如果请求地址携带参数, body中返回的就是send过来的查询参数,是一个对象类型的
复制代码

2.2:获取URL中的动态参数

获取url中的动态参数id, 通过req.params
app.get('/user/:id', (req, res) => {
   console.log(req.params)
})
通过posman直接在请求地址后面/携带id, 点击send, body就能接收到这个id,不填写时, 默认也是空对象。
复制代码

2.3:补充动态参数的两个注意点

动态参数名时自己随意取的,你怎么取, 通过url传递参数的时候, 返回来的body就能以键值对的形式将参数名:与参数值,以对象形式,成对展示在控制台中
app.get('/user/:ids/:username', (req, res) => {
  res.send(req.params)
})
postman GET请求: http://127.0.0.1/user/3/zs
body请求体中返回的数据{"id": "3",  "username": "zs"}
复制代码

3: express.static托管静态资源

3.1: 使用express.static托管静态资源

express.static能指定托管的静态资源的文件夹
1:托管方式:app.use(express.static('要托管的静态资源文件夹'))
2:访问方式:直接在 127.1.0.1/输入要访问的文件
3:页面效果: 就能直接把文件显示在本页面
4:注意细节:app.use(express.static可以指定任意一个文件夹当做静态资源托管, 访问方式不需要携带该托管的文件夹。直接在请求地址后面输入要访问的文件即可)
复制代码

3.2:托管多个静态资源目录

挂在多个,就多次调用express.static挂几次, 就有几个。 如果挂在的多个文件夹中, 有同名文件, 按照加载顺序。 会从上至下依次加载
举例: express.static('./files') ---->它下面有1个index.html
      express.static('./clock') ----->它下面也有1个index.html
通过 浏览器的url地址访问: 127.0.0.1/index.html 
页面返回的是: ./files/index.html 这个页面, 因为他是按照加载顺序, 只加载前一个
复制代码

3.3:挂载路径前缀

给托管的静态资源文件夹, 添加前缀名称
语法规则:app.use('/前缀名', express.static('./将哪个文件夹托管为静态文件夹'))
代码示例: app.use('/files', express.static('./files)), 必须有意义,和托管的文件夹名称一致
访问方式: 127.0.0.1/files/index.html
页面效果: 返回的是files下的index.html这个页面
复制代码

4: 安装nodemon 实现项目的自动重启

安装方式 npm i -g nodemon 全局安装, 一次安装, 终身使用
之前使用的 是 node xx 文件, 现在用 nodemon xx 文件
复制代码

5:express路由

5.1:express路由概念

// -------------------------- 路由的概念 --------------------------
路由简称对应关系, 映射关系

// -------------------------- 了解express中路由的概念及组成部分 --------------------------
路由就是客户端和服务器处理函数之间的映射关系
由3部分组成: app.请求方式('请求地址', '回调函数')
app.get('/', function(req, res) { res.send('xxx') })
app.post('/', function(req, res) { res.send('xxxx') })

// --------------------------  路由的匹配过程 --------------------------
路由的匹配顺序是从上至下的匹配方式, ,必须满足前2个条件才会执行对应的处理函数。 
满足 app.get('/', function() {}). 满足了get请求方式和请求地址, 才会调用对应的请求处理函数。
复制代码

5.2:路由最简单的用法

//-------------------------- 路由最简单的用法 ---------------------------------
路由最基础的用法
1: 基础的创建自己的项目: 
1:  创建一个空的英文名称的空项目
2:在项目中初始化, package.json文件: npm init -y
3: 安装最基础的 express包 :  npm i express@4.17.1
4:用nodemon 的方式,挂载服务器: nodemon xx

最基础的路由示例:
app.get('/', (req, res) =>  {res.send('xxx')})
app.post('/', (req, res) => { res.send('xxx')})

postman 发起请求
get 方式 http://127.0.0.1/    body 响应 send中的文本信息
post 方式 http://127.0.0.1/  body响应  send中的文本信息
复制代码

5.3:express.Router()创建路由模块

// ------------------------- express.Router()创建路由模块 --------------------------------
创建Router对象, 挂载和导出路由对象的使用方式
1: 创建路由对象  : const router = express.Router( )
2:挂载路由请求 :router.get('/user/list', (req, res) => { res.send('xx') })
3:导出路由对象 :module.exports = router
复制代码

5.4:app.use()注册路由模块

//--------------------------- app.use()注册路由模块 ------------------------------------
如何在别的页面导入和使用别人定义好的路由
因为之前创建好的路由,写好了路由地址,和对外导出了, 我们只需接收挂载即可
1: 导入路由:  const router = require('./03.router.js')
2:挂载路由: app.use(router)
3:postman测试路由: 
get方式, 请求地址: http://127.0.0.1/user/list,响应send中的文本信息
post方式, 请求地址: http://127.0.0.1/user/add , 响应send中的文本信息
总结:只需要通过 文件导入的方式,将导入的文件用常量接收,将常量挂载到app.use上即可
复制代码

5.5: 为路由模块添加访问前缀

//---------------------------- 如何给路由添加前缀 --------------------------------
1: app.use('前缀名', 接收到的路由对象)
2:postman: get方式, http://127.0.0.1/api/user/list, 就能成功响应send中的文本
复制代码

1: Express中间件

1.1: 中间件的概念

//------------------------- 中间件的概念 ----------------------------
中间件就是中间处理环节
这个处理环节就叫, 中间件, 中间件事有输入和输出的

// -------------------------  express中间件的调用流程 ----------------------------
当一个请求到达express服务器之后, 可以调用多个中间件去进行处理, 中间件是有输入和输出的。 
最终的输出结果会通过服务器响应到客户端

// ----------中间件的格式,就是 next,谁回调函数的第三个参数
中间件的本质就是function处理函数, 他是回调函数的第三个参数,叫next, 
当函数处理完成,需要调用形参next()将处理的结果, 交给下一个中间件去接收。接着处理

// --------------- express中间件的格式 ----------------------------
中间件的格式,就是 next,谁回调函数的第三个参数
中间件的本质就是function处理函数, 他是回调函数的第三个参数,叫next, 当函数处理完成,需要调用形参next()将处理的结果, 交给下一个中间件去接收。接着处理 

//------------------------- next函数的作用 ----------------------------
next( )函数,就相当于交接, 把自己处理好的结果,交接给下一个中间件或者路由, 

//------------------------- 定义中间件函数 ----------------------------
最简单的中间件定义的代码示例
const express = require('express')
const app = express( )
const mw = function(req, res, next) { cosnoel.log('xxx')  next( ) }
复制代码

2: 全局中间件

2.1:全局生效的中间件

//-------------------- 全局生效的中间件 ------------------------------
只要定义了中间件, 中间件调用了next( )方法, 通过app.use(中间件函数)注册为全局中间件, 这样后面的请求都会出发这个中间件对外输出的内容
1:定义中间件 const mw = function(req, res, next) { next( ) }
2:注册为全局中间件  app.use(mw)
3:发请求测试能否触发全局中间件   app.get('/', (req, res) -> { res.send( xx ) })  
4:postman接口测试:get方式,请求地址:http://127.0.0.1/ body响应 send中的文本
5:终端返回的结果:1:触发了中间件中的内容, 2:触发了自己请求中响应的内容
6:总结:只要将中间件通过app.use注册为全局组件, 后续的每个请求都会触发该中间件。
复制代码

2.2: 定义全局中间件的简化形式

//--------------------------- 定义全局中间件的简化形式 -------------------------
简化操作:两步合为一步: 直接把中间件挂载注册到app.use身上
绑定app.use注册((req, res, next) => { next( ) })
操作之后,打印的结果是一摸一样的。无任何改变,代码又简化了
复制代码

2.3:中间件的作用

//---------------------------- 中间件的作用  ------------------------------
中间件在实际开发中的应用场景:
举例: 假设多个请求中都需要处理同一个东西, 何不把这个东西,放在中间件中处理好, 然后将结果还给这2个请求,请求中就你能将中间件的处理结果输出
1: 将共同方法定义在中间件中:app.use((req, res, next) =>{ const time = Date.now( )  req.startTime = time })
2:后续的2个请求,拿到中间件的处理结果:app.get('/user', (req, res) => { res.send('xx' + req.startTime) })
3:postman发请求,查看处理结果:get方式,请求地址:http://127.0.0.1/user body中的响应就是, req.startTime
总结以后我们相同的操作, 可以定义到一个中间件中去处理
复制代码

2.4: 定义多个全局中间件

// ------------------------- 定义多个全局中间件 -------------------------------
如何同时绑定多个中间件
中间件是可以同时注册多个的, 后续的每一个请求,会出触发这个中间件。
同时定义多个中间件代码示例:
1:注册多个中间件 app.use((req, res, next()) => { next( ) })
                      app.use((req, res, next()) => { next( ) })
2:发起请求 app.get('/user', (req, res) => { console.log('xx') })
3:postman测试:请求方式, GET, 请求地址:http://127.0.0.1/user, Body响应send中的信息
4:服务器【终端】的打印:打印了2个全局中间触发所打印的结果
总结:postman的Body中打印的是send中的信息【如果是浏览器发起的数据请求,则会在浏览器的页面上send展示响应结果。  终端【也可以称呼为服务器】的响应则是普通的console.log(). 】
复制代码

2.5:局部生效的中间件

// ------------------------------------ 局部生效的中间件 -----------------------------------
局部中间件的使用方法
没有使用app.use创建的中间件就叫局部中间件, 他能当做请求的第二个参数去使用
具体使用方法:
1:定义局部中间件【没使用app.use的中间件,就是局部的】const mw = (req, res, next) => { next( ) }
2:发起请求,触发局部中间件:app.get('/', mw, (req, res) => { res.send('xx') } )
3:psotman接口测试 : 请求方式 GET, 请求接口: http://127.0.0.1, Body中响应send的返回内容
4:服务器响应: 服务器终端打印了, 中间件中的内容,表示触发了中间件
总结:没使用app.use注册的件, 就叫中间件。 他能当做请求的第二个参数被触发
复制代码

2.6: 使用多个局部中间件

// ----------------------------- 使用多个局部中间件 -----------------------------
使用多个局部中间件, 是可以当第二个参数来用的, 
多个中间件, 用逗号隔开。或者多个中间件用[ ]用中括号包裹
复制代码

2.7: 了解中间件的5个注意事项

//----------------------------- 了解中间件的5个注意事项 ----------------------------------
中间件的5个注意事项:
1: 一定要在路由之前注册中间件
2:客户端发送过来的请求是可以连续调用多个中间件进行处理
3: 执行完中间件的代码不要忘记调用next( )函数
4:为了防止代码逻辑混乱, 调用next( ) 函数后, 就不要在写额外的代码
5:连续调用多个中间件时, 多个中间件之间, 共享req, 和res对象
复制代码

2.8: 了解什么是应用级别和路由级别的中间件

// ------------------------- 了解什么是应用级别和路由级别的中间件 -------------------------------
中间件的分:分为5大类
1:应用级别的中间件: app.use((req, res, next)=> {}), 挂载在app.use或者app.get、app.post
2:路由级别的中间件:绑定到express.Router身上const router = express.Router()  router.use(function(req, res, next) { next() })
复制代码

2.9: 错误级别的中间件

// --------------------------- 错误处理中间件 -------------------------------
1: 在请求中,自定义一个错误信息: app.get('/', (req, res) => {throw new Error('服务器内部发生了错误')})
2:错误处理中间件, 就是多了一个err参数, 能接收到err.message错误消息: app.use((err, req, res, next) => { console.log('发生了错误!', err.message)   res.send('Error: ' + err.message )})  注意:console.log()是打印在服务器中, send是响应到body页面中
复制代码

2.9.1: 了解3个内置的中间件

// ------------------- 了解3个内置的中间件 -----------------------
express内置中间件
express.static托管静态资源
express.json解析json请求体数据
express.urlencoded解析 URL-encoded 格式的请求体数据
复制代码

2.9.2: 演示express.json中间件的使用

//------------------------  演示express.json中间件的使用 -----------------------------
express.json的使用【讲json对象,转换为真正的对象】
1: 调用json方法解析:app.use(express.json)
2:req.body打印的是经过转换的:app.post('/user', (req, res) => { console.log(req.body) })  转换前undefined, 转换后{name: 'zs', age: 20}
3:  postman测试接口: post方式,请求地址:http://127.0.0.1/user 
3.1:  Body/raw/JSON/ : {"name": "zs", "age": 20}
4: 服务器打印: 转换前undefined, 转换后{name: 'zs', age: 20}
复制代码

2.9.3:express.urlencoded中间件的使用

//-------------------------- express.urlencoded中间件的使用 ----------------------------------
express.urlencoded解析x-www-form-urlencoded类型的数据
1: 全局挂载方法,解析数据:app.use(express.urlencode({extended: false})) 
2:postman发起数据请求: post-->http://127.0.0.1/book ---> Body/x-www-form-urlencode/ bookname: 水浒传, author: 施耐庵  
3:服务器端打印:转换前 { }空对象, 转换后: { bookname: '水浒传', author: '施耐庵' }
复制代码

body-parser第三方中间件的使用

// ---------------------------- body-parser第三方中间件的使用 -------------------------------
旧方法: body.parser
1: 将下载的包映入, 在调用方法:const parser = require('body-parser') app.use(parser.urlencode({ extended: false }))
2:postman发起数据请求:post--》http://127.0.0.1/user-->body/ name: zs, age:22, gender: 男, 
3 :服务器打印:转换前undefined, 转换后{name: 'zs', age: 22, gender: '男'}
总结: express.urlencoded,就是基于他封装的
复制代码

1: 自定义中间件

1.1: 介绍需求及实现步骤

初始化代码结构

1.2: 监听req的data事件

//--------------------- 监听req的data事件 -------------------------------
因为有可能客户端传输的数据过大, 要分批次传递过来, 会触发多个请求, 所以如果数据量大, 且无法一次传输完毕, 就是用data接受每次传输过来的一部分数据, 需要手动拼接数据, 形成一个完整的数据
复制代码

1.3: 监听req的end事件

// --------------------------- 监听req的end事件 ----------------------------
请求完毕,调用res.end时间, 能拿到拼接的数据, 
1: res.end拿到数据:res.on('end', () => { console.log(str) })
2:app.post发起数据请求:app.post('/user', (req, res) => { res.send('ok') })
复制代码

1.4: 使用querystring模块解析请求体数据

// ---------------------------- 使用querystring模块解析请求体数据 --------------------------------
调用系统内置模块,能够将字符串转换为真正的对象类型。
1: 导入内置模块: const es = reqiure('querystring')
2: 使用内置模块的.parse()方法将字符串转换为对象类型: const body = qs.parse(str)将字符串,转换为对象类型
复制代码

1.5: 为req挂载自定义的body属性

//---------------------------  为req挂载自定义的body属性 --------------------------------
将转换的对象挂载到req.body身上, 
app.use((req, res, next) => {
   let str = '',
   req.on('data', (chunk) => {
     str += chunk
  })
  res.on('end', () => {
    const body = qs.parse(str)
    req.body = body
    next()
  })
})
1: 发起请求: app.post('/user', (req, res) =>{
   res.send('req.body')
})
2:postman接口测试: post--> http://127.0.0.1/user-->Body/ name: 'zs',age: 20, gender: 男, ---> Body / {"name" :"zs", "age": 20, "gender":"男"} 变成了json对象
复制代码

1.6:将自定义中间件封装为独立的模块

将请求体数据转换为对象,然后挂载到req.body中, 单独封装成模块, 再导出去
接收抽离出去的模块, 将模块挂载在app.use成为一个全局处理中间件。
中间件处理流程: 
1: 创建服务器, 导入模块, 将模块注册为全局中间件,监听服务器。 发起数据请求,将数据打印到body中
2:调用querystring将字符串转换为真实大小, 在挂载到req.body上,打印查看, 将这个模块导出去
复制代码

1:1基于express写接口

1.1 : 创建基本的服务器

1.2: 创建API路由模块

// ---------------------  创建API路由模块 ------------------------
在其他js文件中调用了express.Router创建了路由对象,并导出了
在自己的页面中,导入了这个文件, 并接收了它的router方法
复制代码

1.3: 编写GET接口

// ------------------------------ 编写GET接口 -----------------------------
注意此时在路由js中挂载到router,get下的请求,需要在前面加上/api才能访问到数据。 
因为query=req.query接收到了请求地址的数据信息。 所以在页面响应的时候, data就是params中的信息。【注意请求地址:http://127.0.0.1/api/get】
复制代码

1.4:编写POST接口

//--------------------- 编写POST接口 ------------------------
get请求的req.query是在params或者直接在请求地址后面携带参数, 而post是在body中x-www-urlencoded中写, 接收的也是req.body

post 请求是, 在引入的页面文件中需要先app.use(express.urlencoded(extend: false))才能解析表单中的数据
复制代码

下一篇:后端-Node系列四:Mysql数据库

文章分类
前端
文章标签