在vue中使用JSON-Server？Mock数据的增删改查
什么是JSON-Server
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。
json-server 支持以 CRUD（Create, Read, Update, Delete）操作对数据进行基本的增、删、改、查等操作，并且支持类 SQL 的过滤、分页、排序等复杂查询操作，同时还支持自定义路由和中间件等功能。
json-server 运行于 Node.js 环境，安装简单，可以通过 npm 快速安装并启动服务。
JSON-Server工具
-
npm i json-server -g全局安装
在Vue中使用 JSON-Server
首先，需要搭建一个Mock服务器来模拟API请求。推荐使用json-server模块来快速搭建。
安装json-server：
npm install json-server --save-dev
然后，在项目根目录下创建一个名为db.json的文件，并填入以下数据：
{
"users": [
{ "id": 1, "name": "John" },
{ "id": 2, "name": "Jane" },
{ "id": 3, "name": "Bob" }
],
"posts": [
{ "id": 1, "title": "Lorem ipsum", "authorId": 1 },
{ "id": 2, "title": "Dolor sit amet", "authorId": 2 },
{ "id": 3, "title": "Consectetur adipiscing elit", "authorId": 3 }
]
}
接下来，在package.json中添加以下命令：
{
"scripts": {
"mock": "json-server --watch db.json --port 3001"
}
}
运行以下命令启动Mock服务器：
npm run mock
现在，我们可以使用axios来请求Mock数据，并且对数据进行增删改查操作。
注意： 不能关闭命令行窗口
Axios请求对Mock数据的增删改查
Axios是一种用于发起HTTP请求的JavaScript库，它可以向服务器发送请求和接收响应。
而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作，以下是具体实现方法：
-
增加数据
使用Axios的POST方法向后台发送数据，然后将返回的数据添加到Mock数据中即可实现数据的增加操作。例如：
// 新增用户
axios.post('http://localhost:3001/users', { name: 'Tom' }).then(res => console.log(res.data));
-
删除数据
使用Axios的DELETE方法向后台发送请求，将需要删除的数据的ID作为参数，后台将会删除对应的数据。删除成功后，需要将Mock数据中对应的数据也删除。例如：
axios.delete('http://localhost:3001/users/1').then(res => console.log(res.data));-
修改数据
使用Axios的PUT方法向后台发送请求，将需要修改的数据的ID以及需要修改的字段作为参数，后台将会修改对应的数据。修改成功后，需要将Mock数据中对应的数据也修改。例如：
axios.put('http://localhost:3001/users/1', { name: 'Jack' }).then(res => console.log(res.data));-
查询数据
使用Axios的GET方法向后台发送请求，后台将会返回对应的数据。将返回的数据添加到Mock数据中即可实现数据的查询操作。例如：
// 获取所有用户
axios.get('http://localhost:3001/users').then(res => console.log(res.data));
// 获取单个用户
axios.get('http://localhost:3001/users/1').then(res => console.log(res.data));
为什么要使用Mock数据
使用mock数据有以下好处：
-
无需等待后端开发完成数据接口，前端开发可以先使用mock数据进行界面展示和调试。
-
减少对后端开发的依赖，前端开发可以独立进行工作。
-
可以模拟各种情况，例如网络延迟、错误提示等，方便前端开发进行调试和测试。
-
保护真实数据的安全性，避免在开发过程中意外泄露真实数据。
-
提高开发效率，减少开发成本。