1、环境与安装

1.1 node环境检查

json-server需要node环境才能运行，所以需要检查本地是否安装node，使用node -v查看本地环境是否安装，如果安装会提示版本，如果未安装则报错。

如果未安装，则前往node官网自行下载安装，一直下一步就行！点击访问node官网

1.2 json-server安装

在本地node环境正常后，在vscode终端（快捷键 ctrl + 反引号），使用npm i json-server -s 进行安装，别的安装方式自行百度！安装完成后会提示安装的信息。

查看json-server的版本信息：

1.3 json-server的帮助提示

PS C:\Users\Windows\Desktop\json-server总结\database> json-server --help
bin.js [options] <source>

选项：
  -c, --config                   Path to config file[默认值: "json-server.json"]
  -p, --port                     Set port                         [默认值: 3000]
  -H, --host                     Set host                  [默认值: "localhost"]
  -w, --watch                    Watch file(s)                            [布尔]
  -r, --routes                   Path to routes file
  -m, --middlewares              Paths to middleware files                [数组]
  -s, --static                   Set static files directory
      --read-only, --ro          Allow only GET requests                  [布尔]
      --no-cors, --nc            Disable Cross-Origin Resource Sharing    [布尔]
      --no-gzip, --ng            Disable GZIP Content-Encoding            [布尔]
  -S, --snapshots                Set snapshots directory           [默认值: "."]
  -d, --delay                    Add delay to responses (ms)
  -i, --id                       Set database id property (e.g. _id)
                                                                  [默认值: "id"]
      --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                  [默认值: "Id"]
  -q, --quiet                    Suppress log messages from output        [布尔]
  -h, --help                     显示帮助信息                             [布尔]
  -v, --version                  显示版本号                               [布尔]

示例：
  bin.js db.json
  bin.js file.js
  bin.js http://example.com/db.json

https://github.com/typicode/json-server

2.数据文件配置

2.1 配置JSON数据文件

打开cmd切换到当前目录，或者使用vscode打开当前目录。新建一个JSON文件，配置出符合要求的JSON数据，但是更推荐的做法是，新建一个Js文件，配置一个对象，配置完成后使用 JSON.stringify(对象名) 输出出来，样例在下方：

let data = { user: [{ name: "李四", age: "5", sex: "男", id: 1 }] };
console.log(JSON.stringify(data));

使用node 执行这个js文件

2.2 启动接口服务

在当前目录下调出终端，执行json-server --port 404 --host 0.0.0.0 --watch json文件名

--port + 端口号   指定本地接口服务的端口
--host 0.0.0.0   可以通过localhost、127.0.0.1或者本机IP可以直接访问
--watch          对文件进行监控

2.3 浏览器尝试访问

输入127.0.0.1:404/user (:404 改成你启动的端口号+你的接口地址)，查看服务是否启动成功。如下图则启动成功，如果外层对象立面有多个对象，则会启动多个接口。

3.数据的修改

3.1 接口测试工具安装

推荐使用postman 或者 SOAP UI 进行测试，下面使用postman进行请求

3.2 查询-GET

信息查询使用GET进行数据请求

1 填写接口地址2 GET请求是在Params中进行传参，如果不需要传参可以不传

3.2.1 不传参数查询

3.2.2 传ID查询

传参错误或数据不存在时，接口会返回一个空的数组。

3.3 新增请求-POST

3.3.1 新增

新增请求使用POST请求，新增数据时，不需要传ID，json-server会自动增加id参数。新增数据的参数队列在body中，如果Params中有数据，请清除。填写新增的参数队列时不要把键名填写错了，不然json文件中也是错的键名！

3.3.2 JSON中同步修改的结果

可以看到多了一个对象

3.4 删除数据-DELETE

3.4.1 删除

delete删除数据需要带id进行删除，json-server无法进行批量删除数据，需要使用额外的方法进行。删除直接在接口地址拼上id就行，不需要传递任何别的参数信息。

3.4.2 JSON中同步修改的结果

删除user数组中的一个对象

3.5 修改数据- PATCH

3.5.1 修改

PATCH修改数据需要在接口地址上加入id，注意patch修改数据需要将id拼在URL中，参数要填写在body中。

3.5.2 修改后的集合

4.批量处理数据

如果需要批量处理数据，可以先绕行处理，使用异步的async和await的方式，上一个数据处理完毕后在处理下一个数据。

async asyncDel(arr) {
      for (let i = 0; i < arr.length; i++) {
        await axios({
          method: "delete",
          url: "http://localhost:4567/shoppingcar/" + arr[i],
        });
        console.log(i);
      }
    },
    submit() {
      let arr = [];
      this.list.forEach((item) => {
        arr.push(item.id);
      });
      this.asyncDel(arr);
    }