--- theme: channing-cyan --- # Express ## express 介绍 - Express 是一个第三方模块，用于快速搭建服务器（替代http模块） - Express 是一个基于 Node.js 平台，快速、开放、极简的 **web 开发框架**。同类型产品 Koa - Express保留了http模块的基本API，使用express的时候，也能使用http的API - 使用express的时候，仍然可以使用http模块的方法，比如 res.end()、req.url - express还额外封装了一些新方法，能让我们更方便的搭建服务器 - express提供了中间件功能，其他很多强大的第三方模块都是基于express开发的 - [Express 官网](https://www.expressjs.com.cn/) ## 安装 express 项目文件夹中，执行 `npm i express`。即可下载安装express。 > 注意：express不能安装在express文件夹中。否则安装失败。 ## 使用Express构造Web服务器使用Express构建Web服务器步骤： 1) 加载 express 模块 2) 创建 express 服务器 3) 开启服务器 4) 监听浏览器请求并进行处理 ```js // 使用express 搭建web服务器 // 1) 加载 express 模块 const express = require('express'); // 2) 创建 express 服务器 const app = express(); // 3) 开启服务器 app.listen(3000, () => console.log('express服务器开始工作了')); // 4) 监听浏览器请求并进行处理 app.get('GET请求的地址', 处理函数); app.post('POST请求的地址', 处理函数); ``` ## express封装的方法 express之所以能够实现web服务器的搭建，是因为其内部对核心模块http进行了封装。封装之后，express提供了非常方便好用的方法。比如前面用到的 `app.get() 和 app.post()` 就是express封装的新方法。下面再介绍一个 `res.send()` 方法 - 该方法可以代替原生http模块中的 res.end 方法，而且比 res.end 方法更好用 - res.send() 用于做出响应 - 响应的内容同样不能为数字 - 如果响应的是JS对象，那么方法内部会自动将对象转成JSON格式。 - 而且会自动加Content-Type响应头 - 如果已经做出响应了，就不要再次做出响应了。 ```js const express = require('express'); const app = express(); app.listen(3000, () => console.log('启动了')); // 写接口 app.get('/api/test', (req, res) => { // res.end('hello world，哈哈哈'); // 响应中文会乱码，必须自己加响应头 // res.end(JSON.stringify({ status: 0, message: '注册成功' })); // 只能响应字符串或者buffer类型 // express提供的send方法，可以解决上面的两个问题 res.send({ status: 0, message: '注册成功' }); // send方法会自动设置响应头；并且会自动把对象转成JSON字符串 }); ``` > 使用 nodemon 命令运行上述代码后，即可使用 http://localhost:3000/api/test 请求接口了。 # 全局模块 nodemon 当服务器代码修改后，就要重新启动服务，非常麻烦。 nodemon 是一个全局模块，安装后，可以使用 nodemon 代替 node 运行js文件。好处是，当代码保存后，nodemon 会检测文件代码是否改变了，如果改变了，就会自动重启服务器。全局安装nodemon ```bash npm i nodemon -g ``` 使用 ```bash nodemon xxx.js ``` > 使用nodemon 命令代替node命令，我们就可以专心开发代码了，而不用但是服务有没有重启的问题了。 > > 建议不要滥用nodemon，建议只在启动服务时使用nodemon。其他情况继续使用node。 # 接口测试工具上述使用浏览器测试接口，只能测试GET方式的接口。如果是POST方式的接口，则无法使用浏览器测试。所以就需要一个专业的测试接口的工具。常用的的接口测试工具： - Postman （默认英文版本，github上有中文汉化包） - Apifox（默认中文）两个软件用法类似，且都比较简单。下面拿Apifox说明。 - 首先，登录Apifox，没有账号的需要先注册 - 点击侧边栏的“项目”，创建一个新的项目 - 在“项目”页，选项进入该项目接口 ![1646658245644.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42e7a622b7db4d8cac50f2b146bbc0ed~tplv-k3u1fbpfcp-watermark.image?) ![1646658268332.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7aa0a9cb7f0c4a1fb7b4cb01ba81ddb1~tplv-k3u1fbpfcp-watermark.image?) ## 发送GET请求 ![1646658093112.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0ce5aabce8243ae817d2dea30d9bef6~tplv-k3u1fbpfcp-watermark.image?) ## 发送POST请求 ![1646658179579.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08bb1acd7d7b4a76a03b3629a955da9e~tplv-k3u1fbpfcp-watermark.image?) # 写接口 > 写接口的目的是体会后端的接口是怎么写的。所以写最简单的接口即可。 - 创建后端接口项目文件夹，比如 code - 下载安装所需模块 express - 我们可以使用 then-fs 进行封装。 - 约定，每一个方法都返回Promise对象（为了方便，查询方法query可以返回查询数据） - 后期，就可以通过 .then 或者 async和await 获取结果了。 - 这样，就可以知道Promise如何使用了。 ```js npm i fs-then ``` ## 创建index.js 创建index.js，作用是编写后端代码，启动服务。使用的模块为 express。引入fs-then。初始代码，可以去官网复制并修改 ```js // 用于启动服务，并且写接口 import express from "express"; const app = express() import fs from "fs-then"; // 写接口 // app.请求方式('接口地址', '带有req、res参数的处理函数'); // app.get('/api/student', (req, res) => {}); // app.post(); // app.delete(); // app.put(); app.listen(3000, () => console.log('启动了')); ``` 只需这几行，就可以使用 `nodemon index.js` 启动服务了。 ## 封装操作JSON的模块 - 准备好存储数据的 json文件（`数据.json`）。 - 准备好处理JSON文件的自定义模块。 ### 准备JSON文件真实开发中，数据一般都放在数据库中存储，作为前端程序员，大部分都不了解数据库。所以，我们可以使用JSON文件存储数据。（使用JSON文件代替数据库，以便完成后续的开发）创建数据.json ，文件内容如下： ```json [ { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京出版社" }, { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海出版社" }, { "id": 5, "bookname": "水浒传", "author": "施耐庵", "publisher": "清华出版社" }, { "id": 12, "bookname": "三国演义", "author": "罗贯中", "publisher": "商务出版社" } ] ``` ## 获取图书接口 - 接口名称：/api/getbooks - 请求方式：GET - 请求参数：无 - 响应数据：`{ status: 0, message: '获取图书成功', data: [ { 一本书 }, { 一本书 } ] }` 基本代码如下： ```js app.get('/api/getbooks', async (req, res) => { // 如果要使用async来实现同步的话，要记住await后面要promise对象才可以，用第三方模块fs-then，是把已经封装好的promise直接调用，用fs内置模块得自己封装promise const data = await fs.readFile('./数据.json', 'utf-8') res.send({ status: 0, message: '获取图书成功', data: JSON.parse(data) }) }) ``` 接下来，可以使用客户端发送请求检测了。 ![1646658321511.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ea1d410f4bc4323ae0aaafa811be712~tplv-k3u1fbpfcp-watermark.image?) ## 根据id来获取数据接口 - 接口名称：/api/onebook - 请求方式：GET - 请求体：id（ID） - Content-Type: application/x-www-form-urlencoded - 响应数据：`{ status: 0, message: '获取图书成功' }` 基本代码如下： ```js app.get('/api/onebook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 获取到传进来的id参数 const id = req.query.id // 通过数组的find方法查询对应数据 const book = data.find(function (item) { return item.id == id }) if (book) { res.send({ status: 0, message: '获取图书成功', data: book }) } else { res.send({ status: 0, message: '获取图书失败' }) } }) ``` ## 添加图书接口 - 接口名称：/api/addbook - 请求方式：POST - 请求体：bookname （书名）、author（作者）、publisher（出版社） - Content-Type: application/x-www-form-urlencoded - 响应数据：`{ status: 0, message: '添加图书成功' }` 基本代码如下： ```js // 配置，接收请求体 app.use(express.urlencoded({ extended: true })); // 接收查询字符串格式请求体 app.post('/api/addbook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 已经设置app.use(express.urlencoded())，可以直接用req.query来获取前端传进来的参数 // 获取到的参数是有多个数据的数组，所以需要用展开运算符...展开，不然无法识别会报错 // Date.now()是从1970年1月1日到现在的时间戳 data.push({ ...req.body, id: Date.now() }) // writeFile是创建文件，如果没有这个文件名会增加新的，已经有这个文件会直接覆盖，目的就是为了把增加新数据后的文件覆盖掉之前的 await fs.writeFile('./数据.json', JSON.stringify(data)) res.send({ status: 0, message: '添加图书成功' }) }) ``` 接下来，可以使用客户端发送请求检测了。 ![1646658345270.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/efcafb03cd65413d84ab36a941c7becc~tplv-k3u1fbpfcp-watermark.image?) ## 修改图书接口 - 接口名称：/api/updatebook - 请求方式：PUT - 请求体：id（ID）、bookname （书名）、author（作者）、publisher（出版社） - Content-Type: application/x-www-form-urlencoded - 响应数据：`{ status: 0, message: '修改图书成功' }` 所以： ```js app.put('/api/updatebook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 修改一样是根据id来修改，所以要先获取id const index = data.findIndex(function (item) { // 判断请求参数中的id和数据中的id相同的数据是第几个 return req.body.id == item.id }) // 如果上面的索引找不到，会返回-1，需要进行个判断 if (index == -1) { res.send({ status: 1, message: 'id不存在' }) } else { // 把对应索引的数据改成传进来的参数 data[index] = req.body // 把新数据覆盖之前的数据 await fs.writeFile('./数据.json', JSON.stringify(data)) res.send({ status: 0, message: '修改图书成功' }) } }) ``` 接下来，可以使用客户端发送请求检测了。 ![1646658381983.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/865dae7ed0fe409ea682a418a8bd9f1b~tplv-k3u1fbpfcp-watermark.image?) ## 删除图书接口 - 接口名称：/api/delbook - 请求方式：DELETE - 请求参数：id（ID） - 响应数据：`{ status: 0, message: '删除图书成功' }` 所以： ```js app.delete('/api/delbook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 删除一样是根据id来删除，所以要先获取id const index = data.findIndex(function (item) { // 判断请求参数中的id和数据中的id相同的数据是第几个 return req.query.id == item.id }) // 用splice删除对应数据 data.splice(index, 1) // 把新数据覆盖之前的数据 await fs.writeFile('./数据.json', JSON.stringify(data)) // 响应 res.send({ status: 0, message: '删除图书成功' }) }) ``` 接下来，可以使用客户端发送请求检测了。 # 使用前端代码测试接口前端发送Ajax请求，请求接口。会有跨域问题。这里可以使用CORS方案解决跨域。 ## 后端 - 安装 cors 模块。 ```js npm i cors ``` - 代码中，在所有接口之前，加载cors，并注册为中间件。 ```js import cors from "cors"; app.use(cors()) ``` ## 完整代码 ```js // 引入express模块 --> 用来快速开发接口 import express from "express"; const app = express() // 引入cors模块 --> 用来解决跨域的 import cors from "cors"; // 引入封装好promise的fs-then模块 import fs from "fs-then"; // 引入修改编码格式的body-parser模块 --> 要先下载 body-parser模块名字 import bodyParser from "body-parser"; // 设置express 支持post请求参数格式支持json 支持application/json app.use(bodyParser.json()); // 设置 express 支持 post请求参数默认是application/x-www-form-urlencoded编码格式 app.use(express.urlencoded()); app.use(express.urlencoded()) // 解决跨域问题 app.use(cors()) // 获取图书接口(get) --> 路径+函数 app.get('/api/getbooks', async (req, res) => { const data = await fs.readFile('./数据.json', 'utf-8') res.send({ status: 0, message: '获取图书成功', data: JSON.parse(data) }) }) // 根据id来获取数据接口 app.get('/api/onebook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 获取到传进来的id参数 const id = req.query.id // 通过数组的find方法查询对应数据 const book = data.find(function (item) { return item.id == id }) if (book) { res.send({ status: 0, message: '获取图书成功', data: book }) } else { res.send({ status: 0, message: '获取图书失败' }) } }) // 新增接口(post) app.post('/api/addbook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 已经设置app.use(express.urlencoded())，可以直接用req.query来获取前端传进来的参数 // 获取到的参数是有多个数据的数组，所以需要用展开运算符...展开，不然无法识别会报错 // Date.now()是从1970年1月1日到现在的时间戳 data.push({ ...req.body, id: Date.now() }) // writeFile是创建文件，如果没有这个文件名会增加新的，已经有这个文件会直接覆盖，目的就是为了把增加新数据后的文件覆盖掉之前的 await fs.writeFile('./数据.json', JSON.stringify(data)) res.send({ status: 0, message: '添加图书成功' }) }) // 删除接口 app.delete('/api/delbook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 删除一样是根据id来删除，所以要先获取id const index = data.findIndex(function (item) { // 判断请求参数中的id和数据中的id相同的数据是第几个 return req.query.id == item.id }) // 用splice删除对应数据 data.splice(index, 1) // 把新数据覆盖之前的数据 await fs.writeFile('./数据.json', JSON.stringify(data)) // 响应 res.send({ status: 0, message: '删除图书成功' }) }) // 修改接口 app.put('/api/updatebook', async (req, res) => { // 先获取数据 let data = await fs.readFile('./数据.json', 'utf-8') // 然后把数据转换成数组 data = JSON.parse(data) // 修改一样是根据id来修改，所以要先获取id const index = data.findIndex(function (item) { // 判断请求参数中的id和数据中的id相同的数据是第几个 return req.body.id == item.id }) // 如果上面的索引找不到，会返回-1，需要进行个判断 if (index == -1) { res.send({ status: 1, message: 'id不存在' }) } else { // 把对应索引的数据改成传进来的参数 data[index] = req.body // 把新数据覆盖之前的数据 await fs.writeFile('./数据.json', JSON.stringify(data)) res.send({ status: 0, message: '修改图书成功' }) } }) // 开启服务器 --> 端口+处理函数 app.listen(3000, () => { console.log('3000 服务器开启成功'); }) ``` ## 前端正常发送请求即可。 ```html ``` ![1646741638793.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d10ff28704445fb604dfa192a9e699~tplv-k3u1fbpfcp-watermark.image?) ## 补充 > axios文件我是直接复制源码封装起来的复制下面的代码到html页面，按住ctrl+鼠标左键点击js链接，进入浏览器把全部源码复制一下，新建文件夹封装起来引入就行 ``` ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90a8103841824e998448cad295e87ae8~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dedc54d7c984a9281403f462515ff2b~tplv-k3u1fbpfcp-watermark.image?) ## 展示页面新建list.html ```html Document

id	书名	作者	出版社	操作

书名

作者

出版社

``` 新建editList.html ```html Document

编辑页面

书名

作者

出版社

``` > 最后，不建议用中文起文件名，嘿嘿