Express框架入门

1. 了解框架与库

1.1 什么是框架

框架就是一个半成品，用来快速解决某一类问题。

使用框架有遵守框架的使用规范。

1.2 常用的框架有哪些？

bootstrap
lay-ui
express
vua
react

1.3 什么是库？

库就是工具集，使用非常灵活。

1.4 有哪些库？

jQuery
day.js
underscore
art-template
axios
echart
zepto.js (移动端的jQuery)

2. 认识Express框架

概念：是一个基于node.js平台的web开发框架，是用来显示页面，以及提供接口的…框架

对于node.js来说express框架就是一个第三方的模块。

官网的网址：https://www.expressjs.com.cn/

3. 运行一个简单的express程序

3.1 第一步创建一个具有语义的项目文件夹名称

项目文件夹名称：leam-express

3.2 第二步工具文件的目录打开cmd窗口输入命令：npm init -yes

3.3 第三步下载express包输入命令：npm i express

3.4 第四步在package.json文件的同级目录上创建一个add.js文件

在add.js写入内容以下内容：（规定的基本写法，变量名不做要求）

加载 Express
调用 express() 得到一个 app
设置请求对应的处理函数
监听端口号，启动 Web 服务

//  1.加载 Express
const express = require('express')// 2. 调用 express() 得到一个 app
//    类似于 http.createServer()
const app = express()// 3. 设置请求对应的处理函数
//    当客户端以 GET 方法请求 / 的时候就会调用第二个参数：请求处理函数
app.get('/', (req, res) => {// res.send具备的功能 = http模块中res的功能 + express扩展的功能res.send('hello world 11')
})// 4. 监听端口号，启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

3.5 第五步启动程序

打开cmd窗口输入命令：node add.js (或者nodemon add.js ：使用这个nodemon的前提就是要有下到nodemon这个包。下载nodemon包的命令：npm install nodemon -g)推荐所有nodemon add.js 这个命令，修改代码无需重启服务器。

浏览器运行刷新一下：浏览器里面搜索：本机的地址 http://localhost:3000/

这里端口号是用：3000

// 4. 监听端口号，启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

4. 托管静态资源-web服务器

什么是托管静态资源?

就是统一处理静态资源，目的就是为了让用户可以直接通过url来访问这个资源。

5. 路由和接口

5.1 什么是路由？

路由是由一个URL和一个特定的HTTP方法组成的。用户访问某个url地址时，页面反馈一些信息出来。
涉及到了如何去处理客户端的请求。
在后端叫路由，在前端叫接口。

5.2 路由的格式

const app = express();
//app.请求类型（请求地址，回调函数）
app.METHOD(PATH, HANDLER)

app 是 express 实例。（const app = express（））
METHOD 是一个 HTTP 请求方法。全小写格式。如：post,get,delete等
PATH 是请求路径（相当于在http模块中用到过的 url.parse(req.url).pathname）
ANDLER是当路由匹配到时需要执行的处理函数。（req,res）=>{ }`

6. 写一个带参数的express-get接口

概念：express框架会自动收集get请求方式从url地址中传递的出现字符串参数，并且保存在req对象的query属性中。req.query可以直接获取到

参数：req.query直接可以获取到
返回值：res.json(对象)

简单代码实现：

// 0. 加载 Express
const express = require('express')// 1. 调用 express() 得到一个 app
//    类似于 http.createServer()
const server = express()// 2. 设置请求对应的处理函数
//    当客户端以 GET 方法请求 / 的时候就会调用第二个参数：请求处理函数
server.get('/admin/category/search', (req, res) => {// express框架会自动将url地址中的字符串参数解析成json对象，并且保存在req对象的query属性中console.log(req.query);// res.send具备的功能 = http模块中res的功能 + express扩展的功能const { id } = req.queryif(!id){// 链接写法res.status(400).json({code: 400, msg:'id呢，id去哪了？'})return}const data =  {code: 200,msg: '获取成功',data: [{id: id, name:'小黑', slug:'爱旅行'}]}res.json(data)
})// 3. 监听端口号，启动 Web 服务
server.listen(3000, () => console.log('app listening on port 3000!'));

7. 写带参数的express-post接口——三种情况

7.1 post参数在请求体中的，他有三种情况

普通键值对
json格式
form-data文件上传

7.2 普通键值对步骤：

使用中间件

将在请求体中的携带的普通键值对解析出来保存在req.body中；
```
server.use(express.urlencoded());
```

通过body获取post传递的键值对

server.post("/xxxx",function(req,res){//可以通过req.body来获取post传递的键值对    res.json(req.body)
});

可以用postman软件来测试请求（或者自己用ajax写一个post请求）

普通键值对代码演示：

// 0. 加载 Express
const express = require('express')// 1. 调用 express() 得到一个 app
//    类似于 http.createServer()
const server = express()// 将在 请求体 中的携带的 普通键值对 解析出来，保存在req.body中
server.use(express.urlencoded());// 2. 设置请求对应的处理函数
//    当客户端以 GET 方法请求 / 的时候就会调用第二个参数：请求处理函数
server.post('/post', (req, res) => {// express框架会自动将url地址中的字符串参数解析成json对象，并且保存在req对象的query属性中// 1. 接收参数console.log(req.body);// res.send具备的功能 = http模块中res的功能 + express扩展的功能res.json({code:200,msg:"创建成功"});
})// 3. 监听端口号，启动 Web 服务
server.listen(3000, () => console.log('app listening on port 3000!'))

###7.3 json格式

如果传递参数比较复杂的话（多级嵌套），就使用json格式上传。

多级嵌套格式如下：

let data = {name:"abc",address:{"a":1,"b":2,"info":"c","d":{"e":3}}
}

代码演示：

// 0. 加载 Express
const express = require('express')// 1. 调用 express() 得到一个 app
//    类似于 http.createServer()
const server = express()// 将在 请求体 中的携带的复杂的json格式数据 解析出来 保存在req.body中
server.use(express.json());
// 路由-post接口- json数据--复杂的嵌套的结构
// 它收到的参数是json格式的复杂对象
server.post('/postJSON', (req,res)=>{console.log(req);console.log('本次的请求头是',req.headers)// 1. 接收参数?console.log('收到的数据是：',req.body)// 2. 设置返回值res.json(req.body)})// 3. 监听端口号，启动 Web 服务
server.listen(3000, () => console.log('app listening on port 3000!'))

可以用postman软件来测试请求:

7.4 form-data文件上传

文件的上传：需要额外用到一个第三方的包 multer
安装multer包

在cmd小黑色窗输入命令：
```
npm i multer
```
multer是一个node.js中间件，用与处理 multipart/form-data 类型的表单数据，主要是用来上传文件的。

postman软件来测试请求：

代码演示：

// 1.加载
const express = require('express')// 2.引入 multer
const mulet = require('multer');// 3. 配置
const upload = multer({dest:'uploads/'}) // 上传的文件会保存在这个目录下
// uploads表示一个目录名，你也可以设置成其它的const server = express()
// 路由-post接口- 接收formData格式的参数（文件）
server.post('/abc/abcd',upload.single('cover'), (req, res) => {console.log('本次的请求头是',req.headers);console.log('接收到的文件是', req.file);console.log('接收到的参数是',req.body);res.json(req.body)
})// 4. 监听端口号，启动 Web 服务
server.listen(3000, () => console.log('app listening on port 3000!'))

8. 理解接口传参

8.1 请求报文

我们做接口传参的时候，按照http协议的规定，每个请求都有三个部分：

请求头

可以附加很多信息，其中的content-type就是用来约定请求体中保存的数据格式
请求行

保存请求的方式，地址，可以查询字符串格式附加的一部分数据
请求体

本次请求携带参数，这些参数如何处理，由请求头的content-type来决定

8.2 传递方式

传参方式	前端 content-type	后端框架express
请求行	get方式	req.query
请求体	application/x-www-form-urlencode	app.use(express.urlencoded()); req.body
请求体	application/json	app.use(express.json()); req.body
请求体	multipart/form-data	1. 引入包 const multer = require(‘multer’); 2. 配置app.post(’/apiname’, upload.single(), req.body)