在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数据有以下好处：

1. 无需等待后端开发完成数据接口，前端开发可以先使用mock数据进行界面展示和调试。

2. 减少对后端开发的依赖，前端开发可以独立进行工作。

3. 可以模拟各种情况，例如网络延迟、错误提示等，方便前端开发进行调试和测试。

4. 保护真实数据的安全性，避免在开发过程中意外泄露真实数据。

5. 提高开发效率，减少开发成本。