前端必備技能：json-server全攻略

在項目的初始階段，後端提供的接口或數據可能是不完整的，作爲一名前端開發工程師，不可避免的要使用mock的數據。如果此時的你不想使用簡單的靜態數據，而是想自己在本地啓動一個server來模擬請求相關的操作，那麼json-server是一個不錯的選擇。
json-serve可以幫助我們快速搭建一個mock-server本地服務，可以根據不同的後綴獲取到不同的數據。

一、準備工作

1、安裝Node

由於json-server需要通過Node對其進行啓動，所以首先要安裝Node。Node可自行安裝，在此不再進行演示。

2、全局安裝json-server

cnpm install json-server -g

3、查看版本

在cmd控制檯中輸入以下命令，查看版本號。用於驗證是否安裝成功。

json-server -v

4、準備一份JSON文件

我這裏準備的是一份名字爲score.json的文件，用於存放虛擬數據。

{
  "scoreList":[
    {"id":1,"userName":"張三","age":12,"sex":"男","score":{"yuWen":10,"shuXue":20,"yingYu":30}},
    {"id":2,"userName":"李四","age":21,"sex":"女","score":{"yuWen":12,"shuXue":45,"yingYu":37}},
    {"id":3,"userName":"王五","age":56,"sex":"男","score":{"yuWen":12,"shuXue":20,"yingYu":30}},
    {"id":4,"userName":"趙六","age":23,"sex":"女","score":{"yuWen":19,"shuXue":21,"yingYu":65}},
    {"id":5,"userName":"嚴七","age":12,"sex":"男","score":{"yuWen":34,"shuXue":67,"yingYu":43}},
    {"id":6,"userName":"沈八","age":43,"sex":"女","score":{"yuWen":56,"shuXue":76,"yingYu":30}},
    {"id":7,"userName":"錢九","age":13,"sex":"男","score":{"yuWen":24,"shuXue":89,"yingYu":30}},
    {"id":8,"userName":"張十","age":12,"sex":"女","score":{"yuWen":10,"shuXue":54,"yingYu":31}}
  ]
}

二、啓動服務

1、常用命令選項：

• -- watch：通過該命令可以實時監測score.json的變化，如果省略該命令，即使score.json發生變化，刷新、或重新發送請求，仍然會返回初次啓動服務時的數據。簡寫形式爲：-w
• --port:指定服務的端口號，可省略，默認爲3000。簡寫形式：-p
• --host:設置域，可省略。簡寫形式：-H

json-server --watch score.json --port 8090  --host 127.0.0.1

上方命令可簡寫爲：

json-server score.json -w -p 8090 -H 127.0.0.1

但，一般通過下面命令，即可完基本工作：

json-server -w score.json

2、工作場景建議

如果你已知項目接口域名及端口號，爲避免後續更改接口信息。我們可以這樣做：

• 假設項目接口域名爲：api.zhangpeiyue.com,端口號爲：80
• 設置host映射：用記事本打開C:\Windows\System32\drivers\etc目錄中的hosts文件。
  底部增加：127.0.0.1 api.zhangpeiyue.com，該文件如果不允許修改，增加相對應的權限即可。
• 啓動服務命令：

json-server --watch score.json --port 80  --host api.zhangpeiyue.com

由於80是默認端口號，所以我們可以通過api.zhangpeiyue.com來對數據進行操作了。

3、通過package.json文件啓動項目

啓動json-server時， 如果自定義配置的參數過多，容易出現命令敲錯的現象。我們可以在創建一個名字爲package.json的文件，內容爲：

{
  "scripts": {
    "score": "json-server --watch score.json --port 80  --host api.zhangpeiyue.com"
  }
}

通過npm run score啓動即可。

4、自定義配置文件

json-server允許我們把所有的配置放到一個配置文件中，這個配置文件默認json-server.json。配置文件的主要內容如下：

{
  "port": 80,  // 自定義服務監聽端口
  "watch": true, // 服務監聽
  "host": "api.zhangpeiyue.com",// 指定域
  "static": "./public", // 靜態文件目錄，可以將項目的HTML,JS,IMG等資源放在這裏
  "read-only": false,  // 是否只允許get請求
  "no-cors":false, // 是否允許跨域訪問
  "no-gzip": false, // 是否可壓縮
  "routes": "route.json" // 自定義路由，這個配置可以暫時省略，後續會有所涉及
}

可以通過json-server --watch score.json啓動項目。

4、輸出類似以下內容，說明啓動成功。

5、其它相關啓動參數

三、獲取數據(get)

1、get獲取scoreList屬性

• http://api.zhangpeiyue.com/scoreList

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList");
    console.log(data);
})();

2、通過以下兩種方式可get獲取scoreList屬性當中id爲1的數據：

• http://api.zhangpeiyue.com/scoreList/1

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList/1");
    console.log(data);
})();

• http://api.zhangpeiyue.com/scoreList?id=1

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            id:1
        }
    });
    console.log(data);
})();

3、單條件查找：scoreList屬性author爲李四的數據

• http://api.zhangpeiyue.com/scoreList?userName=李四

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            userName:"李四"
        }
    });
    console.log(data);
})();

4、多條件查找：scoreList屬性sex爲男，age爲12的數據

• http://api.zhangpeiyue.com/scoreList?sex=男&age=12

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            sex:"男",
            age:12
        }
    });
    console.log(data);
})();

5、q全局搜索（模糊查詢）：查詢scoreList所有屬性值中包含英的數據

• http://api.zhangpeiyue.com/scoreList?q=張

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            q:"張"
        }
    });
    console.log(data);
})();

6、可以用.訪問更深層的屬性：查詢scoreList屬性score的屬性yuWen爲12的數據：

• http://api.zhangpeiyue.com/scoreList?roles.yuWen=12

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            ["score.yuWen"]:12
        }
    });
    console.log(data);
})();

7、通過_page and _limit 實現對數據的分頁：將scoreList每頁顯示3條記錄，查詢第2頁內容：

• http://api.zhangpeiyue.com/scoreList?_page=2&_limit=3

(async ()=>{
    const {data} = await axios.get(" http://api.zhangpeiyue.com/scoreList",{
        params:{
            _page:2,
            _limit:3
        }
    });
    console.log(data);
})();

8、通過_sort與_order 對數據進行排序。_sort指定排序的屬性，_order指定排序的類型（asc爲升序，desc爲降序）

• 按age的倒序排列：
  http://api.zhangpeiyue.com/scoreList?_sort=age&_order=desc

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            _sort:"age",
            _order:"desc"
        }
    });
    console.log(data);
})();

• 多條件排序：年齡相同按語文的升序排列：
  http://api.zhangpeiyue.com/scoreList?_sort=age,score.yuWen&_order=desc,asc

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            _sort:"age,score.yuWen",
            _order:"desc,asc"
        }
    });
    console.log(data);
})();

9、通過_start、_end、_limit對數據進行截取。

• 截取前5條記錄:
  http://api.zhangpeiyue.com/scoreList?_limit=5

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            _limit:5
        }
    });
    console.log(data);
})();

• 截取第3到第6的記錄(共三條):
  http://api.zhangpeiyue.com/scoreList?_start=3&_end=6

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            _start:3,
            _end:6
        }
    });
    console.log(data);
})();

• 從第2條記錄開始截取5條記錄(共5條):
  http://api.zhangpeiyue.com/scoreList?_start=2&_limit=5

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            _start:2,
            _limit:5
        }
    });
    console.log(data);
})();

10、通過操作符_gte（大於等於）， _lte（小於等於）, _ne（不等於）, _like（模糊查詢）獲得數據。

• 年齡大於等於23：
  http://api.zhangpeiyue.com/scoreList?age_gte=23

(async ()=>{
    const {data} = await axios.get("http://api.zhangpeiyue.com/scoreList",{
        params:{
            age_gte:23
        }
    });
    console.log(data);
})();

四、添加數據(post)

* `http://api.zhangpeiyue.com/scoreList?age_gte=23`
(async () => {
    const {data} = await axios.post("http://api.zhangpeiyue.com/scoreList", {
        "id": 11,
        "userName": "蕭十一郎",
        "age": 28,
        "sex": "男",
        "score": {"yuWen": 100, "shuXue": 100, "yingYu": 100}
    });
    console.log(data);
})();

五、刪除數據（delete）

• 刪除id爲11的數據:
  http://api.zhangpeiyue.com/scoreList/11

(async () => {
    const {data} = await axios.delete("http://api.zhangpeiyue.com/scoreList/11");
    console.log(data);
})();

六、更新數據（patch、put）

• 通過patch請求，將id爲8的記錄屬性userName修改爲張八。（patch爲局部修改）
  http://api.zhangpeiyue.com/scoreList/8

(async () => {
    const {data} = await axios.patch("http://api.zhangpeiyue.com/scoreList/8",{
        userName:"張八"
    });
    console.log(data);
})();

• 通過put請求將id爲8的記錄替換成一個新的對象，該對象只有userName屬性，值爲新來的。（put爲替換，id不會替換）
  http://api.zhangpeiyue.com/scoreList/8

(async () => {
    const {data} = await axios.put("http://api.zhangpeiyue.com/scoreList/8",{
        userName:"新來的"
    });
    console.log(data);
})();

七、自定義路由

創建route.json文件，可對路由進行如下配置：

{
//    /data/data1  ==>  /data1
    "/data/*": "/$1",
//    /data1/001/show ==> /data1/001
    "/:resource/:id/show": "/:resource/:id",
//    /data1/Sherry ==> /data1?name=Sherry
    "/data1/:name": "/data1?name=:name",
//    /data1?id=002 ==> /data/002 
    "/:anyArray\\?id=:id": "/:anyArray/:id"
}

啓動：

json-server --watch score.json --routes route.json

八、json-server是依賴express開發而來，如有需要可進行深度定製

1、安裝json-server

cnpm install json-server -D

2、創建server.js文件：

const jsonServer = require('json-server');
const $db = require(__dirname+"/score.json"); 
const server = jsonServer.create();
const middlewares = jsonServer.defaults();
const router = jsonServer.router($db);
server.use(router);
server.use(middlewares);
server.use(jsonServer.bodyParser);
server.listen(8090, () => {
    console.log('success');
});

—————END—————
分享結束！喜歡本文的朋友們，歡迎關注公衆號 張培躍，收看更多精彩內容，謝過！！