json-server的使用

json-server是一个全局命令行工具，其作用是把一个json文件托管成一个web服务器（提供接口）。

其特点有：

1. 基于Express
2. 支持CORS和JSONP跨域请求
3. 支持GET，POST，PUT和DELETE方法
4. 应用RESTful接口规则

全局安装

npm --install -g json-server

启动

我们先准备一个希望后端返回的json文件，命名为db.json

{
    "brands":[
        {
            "name":"诗人多尼",
            "date":"Tue Feb 18 2020 13:22:49 GMT+0800 (中国标准时间)",
            "id":1
        },{
            "name":"Microsoft",
            "date":"Tue Feb 18 2020 13:56:00 GMT+0800 (中国标准时间)",
            "id":2
        },{
            "name":"Apple",
            "date":"Tue Feb 18 2020 13:59:40 GMT+0800 (中国标准时间)",
            "id":3
        },{
            "name":"Huawei",
            "date":"Tue Feb 18 2020 14:22:32 GMT+0800 (中国标准时间)",
            "id":4
        },{
            "name":"Oracle",
            "date":"Tue Feb 18 2020 14:30:00 GMT+0800 (中国标准时间)",
            "id":5
        }
    ]
}

使用json-server对该文件执行watch操作：

json-server --watch db.json

由下图可见，json-server默认侦听3000端口，提供的接口即是db.json中我们自己给出的brands这个名字：

此时接口的服务器已经启动成功。

注意：加入watch时若提示3000端口被占用，可以使用以下语句修改端口：
（这里将端口修改为3001）

json-server --watch --port 3001 db.json

请求数据

使用浏览器访问http://localhost:3000/brands，相当于执行了一次GET请求，可以得到返回结果，即是db.json中brands对象对应的那个数组。

同理，在项目中可以通过该URL请求数据。

加入要查询特定的一条数据，可以在URL中加入该数据对应的id，如http://localhost:3000/brands/1，结果如下：

监控

从命令行可以看到接口被请求的信息：
（这里我刷新了3次浏览器，等同于发送了3个GET请求）

注意点

db.json中，数组中的每一个元素都有一个id属性。其实，id是json-server要求必备的一个属性，由其维护。我们以post方式添加数据时，不需要提交id属性的值，它是会自增的。如下图：