json-server 是什么？
我把這個詞拋給一個后端好友時，他沒用過查了下回復說：哦，原來是個mock 工具。
mock這詞本意是模擬、糊弄的意思。mock server工具，通俗來說，就是模擬服務端接口數據，一般用在前后端分離后，前端人員可以不依賴API開發，而在本地搭建一個JSON服務，自己產生測試數據。
顧名思義，json-server就是個存儲json數據的server~
先獻祭上json-server的github ： github地址 。
1 下載安裝
使用npm全局安裝json-server：
npm install -g json-server
可以通過查看版本號，來測試是否安裝成功：
json-server -v
2 創建json數據——db.json
既然是造數據，就需要創建一個json數據。
在任意一個文件夾下（此處假設我創建了一個myserver文件夾），進入到該文件夾里面，執行代碼：
json-server --watch db.json
原本空空如也的文件夾里，就會多出一個db.json文件。
同時，根據執行代碼結果的提示，我們可以訪問 http://localhost:3000 （啟動json-server后，點擊才有效）,看到如下頁面：
可以分別點擊
/posts /comment /profile /db鏈接，看看頁面跳轉后，觀察地址欄變化和頁面內容，你看到了什么？沒錯，就是各自的json數據。
再比對myserver/db.json文件的數據，就可以發現： /db就是整個的db.json數據包，而/posts /comment /profile 分別是db.json里面的子對象。
所以說，json-server把db.json 根節點的每一個key，當作了一個router。我們可以根據這個規則來編寫測試數據。
json-server 默認是 3000 端口，我們也可以自己指定端口，指令如下：
json-server --watch db.json --port 3004
嗯，如果你很懶，覺得啟動服務的這段代碼有點長，還可以考慮db.json同級文件夾（也就是myserver文件夾）新建一個package.json，把配置信息寫在里頭：
{
"scripts": {
"mock": "json-server db.json --port 3004"
}
}
之后啟動服務，只需要執行如下指令就可以了：
npm run mock
3 操作數據
我們先自己倒騰下 db.json 數據，比如現在是個水果商城，放點 用戶信息 和 水果價格 信息：
{
"fruits": [
{
"id": 1,
"name": "apple",
"price": "33"
},
{
"id": 2,
"name": "orange",
"price": "8.88"
}
],
"users": [
{
"name": {
"username":"admin",
"nickname":"dachui"
},
"pwd": "123456"
}
]
}
要注意，數據格式符合JSON格式（尤其注意最后一個鍵值對后面不要有逗號）。如果數據格式有誤，命令窗口會報錯，可以根據錯誤提示進行修整。
接下來我們就可以GET, POST, PUT, PATCH or DELETE 方法來對數據進行操作。
（1）GET
首先，我們先來看GET操作。（以下會根據官方文檔對所有GET操作做詳細說明。）
瀏覽器地址訪問就可以看做GET操作，所以不用寫任何代碼，我們就可以先來測試下 url -GET 操作。
常規獲取：
http://localhost:3004/fruits
可以得到所有水果數據（對象數組）：
[
{
"id": 1,
"name": "apple",
"price": "33"
},
{
"id": 2,
"name": "orange",
"price": "8.88"
}
]
過濾獲取 Filter：
http://localhost:3004/fruits/1
可以得到指定id為1的水果（對象）：
{
"id": 1,
"name": "apple",
"price": "33"
}
當然，指定id為1的獲取指令還可以用如下指令，但要注意，此時返回的數據是一個數組。
http://localhost:3004/fruits?id=1
[
{
"id": 1,
"name": "apple",
"price": "33"
}
]
以此類推，我們也可以通過水果名稱，或者是價格來獲取數據：
http://localhost:3004/fruits?name=orange
[
{
"id": 2,
"name": "orange",
"price": "8.88"
}
]
也可以指定多個條件，用&符號連接：
http://localhost:3004/fruits?name=orange&price=8.88
[
{
"id": 2,
"name": "orange",
"price": "8.88"
}
]
你甚至還可以使用對象取屬性值 obj.key 的方式：
http://localhost:3004/users?name.nickname=dachui
[
{
"name": {
"username": "admin",
"nickname": "dachui"
},
"pwd": "123456"
}
]
以上看著是不是特別眼熟，不就是HTTP中GET請求方式嘛~
嗯，更好玩的還在后面
分頁 Paginate
為了能演示分頁效果，我們在db.json文件里的fruits里面多添加了幾種水果。
{
"fruits": [
{
"id": 1,
"name": "apple1",
"price": "33"
},
{
"id": 2,
"name": "apple2",
"price": "2"
},
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 6,
"name": "orange",
"price": "8.88"
}
],
"users": [
{
"name": {
"username":"admin",
"nickname":"dachui"
},
"pwd": "123456"
}
]
}
編輯過db.json（db.json數據有變動），都要關閉服務重新啟動。（注意：不要用 CTRL + C 來停止服務，因為這種方式會導致 node.js 依舊霸占著3004端口，導致下一次啟動失敗。簡單粗暴關閉窗口即可！ —— 個人window系統，其他系統可能沒有這樣的煩惱。）
分頁采用 _page 來設置頁碼， _limit 來控制每頁顯示條數。如果沒有指定 _limit ，默認每頁顯示10條。
http://localhost:3004/fruits?_page=2&_limit=2
[
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
}
]
排序 Sort
排序采用 _sort 來指定要排序的字段， _order 來指定排序是正排序還是逆排序（asc | desc ，默認是asc）。
http://localhost:3004/fruits?_sort=id&_order=desc
[
{
"id": 6,
"name": "orange",
"price": "8.88"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 2,
"name": "apple2",
"price": "2"
},
{
"id": 1,
"name": "apple1",
"price": "33"
}
]
也可以指定多個字段排序，一般是按照id進行排序后，相同id的再跟進name排序（此塊沒有具體造數據格式，猜測如此）：
http://localhost:3004/fruits?_sort=id,name&_order=desc,asc
取局部數據 Slice
slice的方式，和 Array.slice() 方法類似。采用 _start 來指定開始位置， _end 來指定結束位置、或者是用_limit來指定從開始位置起往后取幾個數據。
http://localhost:3004/fruits?_start=2&_end=4
[
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
}
]
http://localhost:3004/fruits?_start=2&_limit=4
[
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 6,
"name": "orange",
"price": "8.88"
}
]
取符合某個范圍 Operators
（1）采用 _gte _lte 來設置一個取值范圍（range）:
http://localhost:3004/fruits?id_gte=4&id_lte=6
[
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 6,
"name": "orange",
"price": "8.88"
}
]
（2）采用_ne來設置不包含某個值：
http://localhost:3004/fruits?id_ne=1
[
{
"id": 2,
"name": "apple2",
"price": "2"
},
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 6,
"name": "orange",
"price": "8.88"
}
]
（3）采用_like來設置匹配某個字符串（或正則表達式）：
http://localhost:3004/fruits?name_like=apple
[
{
"id": 2,
"name": "apple2",
"price": "2"
},
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
}
]
全文搜索 Full-text search
采用 q 來設置搜索內容:
http://localhost:3004/fruits?q=oran
[
{
"id": 6,
"name": "orange",
"price": "8.88"
}
]
關聯關系 Relationships
（1）采用 _embed 來設置（創建或包含）一個子資源。
http://localhost:3004/users?_embed=personInfo
[
{
"name": {
"username": "admin",
"nickname": "dachui"
},
"pwd": "123456",
"personInfo": []
}
]
（2）采用 _expand 來設置是否包含某個父資源。（測試數據的局限性，我沒太懂這條指令的意思了，之后在試試看。）
http://localhost:3004/fruits?_expand=users
[
{
"id": 1,
"name": "apple1",
"price": "33"
},
{
"id": 2,
"name": "apple2",
"price": "2"
},
{
"id": 3,
"name": "apple3",
"price": "3"
},
{
"id": 4,
"name": "apple4",
"price": "4"
},
{
"id": 5,
"name": "apple5",
"price": "5"
},
{
"id": 6,
"name": "orange",
"price": "8.88"
}
]
（3）獲取嵌套資源（測試數據局限性，這條指令是虛擬的。）
http://localhost:3004/fruit/1/shops
以上主要介紹GET的功能，通過瀏覽器請求數據。
下一篇 上手玩一下json-server（二）操作數據篇——POST/PATCH/DELETE，我們將用ajax方式來獲取/修改數據。
