使用json-server提供简易接口

json-server是一款 json 数据服务器，它运行 Express 服务器，可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作，通过指定一个json文件作为api数据源，可以进行分页、排序、关联查询、范围查询等各种查询操作，是一套完整的模拟 REST API 接口。

1、安装json-server

npm i -g json-server

2、准备一份json文件

注意：json文件中的内容格式必须是对象格式，如下示例（index.json）

{
  "cart": [
    {
      "id": "100001",
      "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
      "price": 128,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
    },
    {
      "id": "100002",
      "name": "网易味央黑猪猪肘330g*1袋",
      "price": 39,
      "count": 10,
      "thumb": "https://yanxuan-item.nosdn.127.net/d0a56474a8443cf6abd5afc539aa2476.jpg"
    },
    {
      "id": "100003",
      "name": "KENROLL男女简洁多彩一片式室外拖",
      "price": 128,
      "count": 2,
      "thumb": "https://yanxuan-item.nosdn.127.net/eb1556fcc59e2fd98d9b0bc201dd4409.jpg"
    },
    {
      "id": "100004",
      "name": "云音乐定制IN系列intar民谣木吉他",
      "price": 589,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/4d825431a3587edb63cb165166f8fc76.jpg"
    }
  ]
}

3、终端中执行 json-server index.json ，json-server工具会自动运行上述json文件，并创建接口

注意：cmd的运行路径必须是在index.json的同一路径

假设：index.json文件存于D:\web\project\05-vue\vue_demo\src\db，文件夹下，那就需要在 D:\web\project\05-vue\vue_demo\src\db 路径下打开终端，执行命令，如下所示，即表示服务启动成功

可通过浏览器，访问localhost:3000，查看服务是否启动成功

 

也可直接访问localhost:3000/list，查看get请求接口数据

4、 访问接口

json-server会根据json文件内容自动生成各种类型的接口，可通过如下方式，调用接口