express 框架

1 框架

• 用来快速解决某一类问题的半成品，要遵守框架的使用规范：bootstrap、lay-ui、express、vue、react

2 库

• jQuery、dayjs、underscore、lodash、art-template、axios、echart、zepto.js

3 web 开发

• 运行在 node.js 之上，对不同的请求能够显示页面，提供接口服务

4 框架使用

• res.send( ) 是express 框架给 res 对象补充提供的方法（http模块中的 res 没有这个方法）用于结束本次请求，类似的还有 res.json( ) ,res.sendFile( )

//创建项目并初始化  初始化 package.json 文件
npm init --yes
//本地安装 express 
npm i express
//使用
//加载 express
const express = require('express')
//调用express
const server=experss()
//设置对应请求的处理函数，以 get 请求为例
server.get('/',(req,res)=>{
  res.send('hello world')
})
//监听端口号，启动服务
server.listen(10086,()=>{
  console.log('服务已启动')
})

5 express 静态资源托管

• 目标： 在某个文件夹下的内容可以直接被访问
• 用法：server.use ( express.static ( ’ 目录名 ’ ) )
• 带访问前缀用法：server.use( ‘/xxx’ , express.static ( ’ 目录名 ’ ) ) //要访问 xxx 中的内容，必须在请求 url 中加上 /xxx

6 路由与接口

• 在后端叫路由，在前端叫接口
• 约定：当用户访问 XX 地址时，执行 XXXX 逻辑
• 格式：server . 请求类型（请求地址，回调函数）
• 示例：server . get(’/getInfo’, (req, res) => { res.json(xxxxx) } ) //当用户以get类型请求/getinfo时，执行后面的回调，以 json 字符串格式返回数据

7 express-get请求-无参数

const express = require('express')
const server = express()

// http://localhost:10086/get
server.get('/get', (req, res) => {
    res.send('123')
})

server.listen(10086, () => {
    console.log('10086 端口已启动：');
})

8 express-get请求-带参数

• express 框架会自动收集 get 方式从 url 地址中传递的查询字符串参数，并自动保存在 req 对象的query 属性中。

const express = require('express')
const server = express()

// http://localhost:10086/get?name=李白
server.get('/get', (req, res) => {
    res.send(req.query)
})

server.listen(10086, () => {
    console.log('10086 端口已启动：');
})

9 express-post 请求

• post 请求参数在请求体中，参数有三种情况

1. 普通键值对
2. json 对象
3. 文件上传

• server.use(…)之后，在res.body中就会多出一个属性res.body，将请求体 中的携带的 数据 解析出来，保存在req.body中

10 express-post 请求-普通键值对参数

const express = require('express')
const server = express()

// 将请求体 中的携带的 普通键值对 解析出来，保存在req.body中
server.use(express.urlencoded())
// 路由-接口
server.post('/add', (req, res) => {
    console.log(req.body)
    res.json(req.body)
})

server.listen(10086, () => {
    console.log('10086 端口已启动：');
})

11 express-post 请求-json格式数据

const express = require('express')
const server = express()

//请求体 中的携带的 json 数据 解析出来，保存在req.body中
server.use(express.json())
// 路由-接口
server.post('/postJSON', (req, res) => {
    console.log(req.body)
    res.json(req.body)
})

server.listen(10086, () => {
    console.log('10086 端口已启动：');
})

12 express-post 请求-formData格式数据

• 需要额外使用第三方包 multer
• upload.single只是处理了文件的上传

const express = require('express')
const server = express()

// 涉及文件上传，需要额外使用第三方包 multer
// 安装 npm install multer
// 使用
// 引入包
const multer = require('multer')
// 配置   uploads 表示一个目录名，文件上传会保存在这个目录下
const upload = multer({ dest: 'uploads/' })
// 使用
server.post('/postfile', upload.single('cover'), (req, res) => {
    console.log(req.file)  // 记录文件上传的信息
    console.log(req.body)  //记录了其他普通参数信息
    res.json('数据上传成功！')
})

server.listen(10086, () => {
    console.log('10086 端口已启动：');
})

13 理解接口传参

• 传参位置：请求行、请求体
• 在请求体中，有一个属性 content-type 用来约定本次在请求体中传递的参数用什么格式去解析
• 四种处理方式：
  

14 require加载机制

# 15 了解restful风格的接口

• 通过 URL 设计资源，接口一般都是名词，不包括动词
• 请求方式 get、post、delete、put 决定资源的操作类型
• 用五种不同的请求方式来约定操作类型：
  1. get 获取
  2. post 添加
  3. delete 删除
  4. put 修改-覆盖式
     1. let obj = { a : 1 }
     2. obj = { b : 1 }
  5. patch 修改-局部修改
     1. let obj = { a : 1 }
     2. obj . a = 2

16 中间件

• 表示一件复杂的功能拆成多个小的环节，每一个环节的处理逻辑就称为中间件
• express 代码中，到处都是中间件
• 分类：

1. 应用级中间件
2. 路由级中间件
3. 内置中间件
4. 错误处理中间件
5. 第三方中间件

• 定义格式及使用流程
  1. 按顺序执行中间件，代码中的书写顺序
  2. 如果中间件中没有 next ，也没有 end ，会卡住
  3. 如果用了 next ，则会按顺序进入下一个中间件

// 具名函数格式：
const handler = (req, res, next) => {
  console.log(Date.now());
  next();
}
server.use(handler);


// 匿名函数格式：
app.use((req, res, next) => {
  console.log(Date.now());
  next();
});

17 中间件-四种匹配规则

server.use( 中间件 )  //是应用级中间件，所有请求都能匹配
server.use('/apiname',中间件) //匹配请求路径是 /apiname 的请求 
server.get('/apiname',中间件) //匹配 get 类型并且请求路径是 /apiname 的请求 
server.get('/apiname',中间件1，中间件2) //一个路由使用多个中间件

18 路由中间件

• 作用：

1. 帮助我们将不同类别的接口写在不同的文件中，最后再合起来
2. 有利于分工，方便维护代码

• 操作步骤：

  1.对现有接口进行整理
  2.按模块写接口、导出

//对现有接口进行整理
//按模块写接口、导出
const express = require('express')
const router = express.Router()

//写接口模块
router.get('/getinfo', (req, res) => {
    res.send('拿到了getinfo')
})
router.get('/getdetail', (req, res) => {
    res.send('拿到了getdetail')
})

//导出
module.exports = router

3.在主文件中引入使用

//配置服务器
const express = require('express')
const app = express()
app.listen(10086, () => {
    console.log("服务器已启动");
})

// 把路由对象引进来
const adminRouter = require('./router/admin') //自定义接口模块的相对路径
// 路由中间件
app.use('/admin', adminRouter)

19 跨域

• 原因：不同源的ajax

• 同源：协议、域名、端口三者都相同；只要有一个不同，就是不同源

• 报错原因：浏览器要遵守同源策略，浏览器认为请求不安全，所以报错。服务器是能正常收到请求并处理的
  
  

• 解决方案：

1. 给本次响应添加一个特殊的响应头： Access-Control-Allow-Origin
2. 使用 cors 包
   1. 安装：npm i cors
   2. 引入：const cors = require ( ’ cors ’ )
   3. 当作中间件使用 server.use ( cors() )

• 作为前端，在开发过程中如果遇到跨域问题，用 postman 检查接口是否正常

1. 正常：说明是没有处理跨域问题，可与后端商议
2. 不正常：说明可能是 ajax 请求出错