json-server的下載和基本使用

前言:之前 mock.js + express 構建接口（構建非常的豐富，需要后台編程的經驗）
jsonplaceholder 便利，提供的數據模板很限制
接下來給介紹一個新的工具 json-server 兼具 上面兩種方式的優勢。

json-server 是什么？如何使用？

答： json-server 是一個 npm 管理的包，可以提供前端提供mock的功能。

如何使用？
1. 安裝
方法一:打開文件所在的位置打開一個命令函
npm install -g json json-server

yarn 全局安裝需要使用 global

方法二:yarn  global add json-server

 

當上面的包安裝后，會提供一個 json-server 的全局命令，基於該命令，我們就可以快速的mock數據。

2. 使用 json-server 命令，使用之前，需要提供一個 .json 結尾的數據模板。

{
  "news": [
    {
      "id": 1,
      "title": "奚夢瑤誕下賭王長孫！何猷君透露兒子承賭王之名取名何廣燊",
      "infos": "奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    },
    {
      "id": 2,
      "title": "奚夢燊",
      "infos": "奚夢瑤誕夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    },
    {
      "id": 3,
      "title": "賭王之名取名何廣燊",
      "infos": "奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    },
    {
      "id": 4,
      "title": "奚夢瑤名取名何廣燊",
      "infos": "奚夢瑤誕下賭王長瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長奚夢瑤誕下賭王長",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    }

  ]
}

使用 json-server 命令啟動一個端口服務,就是打開你所要操作的文件的命令函窗口,例如下圖
輸入命令函:
json-server --watch news.json

 

 

 

 輸入:http://localhost:3000/news

 

 

接口的使用，完全等同 jsonplaceholder 的方式
1. 列表
2. 詳情
3. 分頁
4. 排序
5. 全局查詢

增加下面的這幾種使用的方式，則必須使用第三方的接口調試工具（postman）
6. 提供 增加（post）、刪除(delete)、更新(put)

詳情請看上一篇的筆記啦,感謝大家的觀看啦,希望對大家有幫助哦