使用json-server與Mockjs搭建模擬服務
為什麼使用
在專案開發中，常常需要邊寫前端頁面邊寫後端介面，但是後端介面服務往往是滯後於前端開發的，或者是不能及時提供的。出於前端開發的迅速和便捷去考慮，我們可以根據後端介面資料結構去模擬(mock)資料從而實現前端的獨立開發。
JsonServer 主要的作用就是搭建本地的資料介面，建立json檔案，便於除錯呼叫
Mockjs 主要的作用就是生成隨機資料，支援生成隨機的文字、數字、布林值、日期、郵箱、連結、圖片、顏色等
如何使用
以下操作需要node.js環境
1.建立資料夾
選擇自己喜歡的位置建立一個資料夾，比如E:/mock
2.安裝json-server
進入E:/mock
npm install json-server -g
安裝完執行 json-server -h，若安裝成功則會顯示選項
Options:
--config, -c Path to config file [default: "json-server.json"]
--port, -p Set port [default: 3000]
--host, -H Set host [default: "localhost"]
--watch, -w Watch file(s) [boolean]--routes, -r Path to routes file
--middlewares, -m Paths to middleware files [array]
--static, -s Set static files directory
--read-only, --ro Allow only GET requests [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]--no-gzip, --ng Disable GZIP Content-Encoding [boolean]
--snapshots, -S Set snapshots directory [default: "."]
--delay, -d Add delay to responses (ms)
--id, -i Set database id property (e.g. _id) [default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
[default: "Id"]
--quiet, -q Suppress log messages from output [boolean]
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
3.使用json-server
- 建立json檔案，如db.json，檔案內容如下
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
- 啟動json-server，cmd執行
json-server --watch db.json
看到如下內容
1574216715(1).jpg
則執行成功，直接訪問圖中顯示的三個地址可得結果，如
1574216903(1).jpg
至此，簡單的json-server服務已經搭建成功了，後續如果有更多需求，如跨域、引數查詢、路由這些，請參考json-server的github
4.安裝Mockjs
進入E:/mock
npm install mockjs --save
5.使用Mockjs
- 建立js檔案，如news.js，檔案內容如下
let Mock=require('mockjs');
let Random=Mock.Random;
module.exports=()=>{
let data={
news:[]
};
let images=[1,2,3].map(x=>Random.image('120x60',Random.color(),Random.word(2,6)));
for(let i=1;i<=100;i++){
let content=Random.cparagraph(0,10);
data.news.push({
id:i,
title:Random.cword(8,20),
desc:content.substr(0,40),
tag:Random.cword(2,6),
views:Random.integer(100,5000),
images:images.slice(0,Random.integer(1,3))
})
}
return data
}
- 啟動json-server，cmd執行
json-server --watch news.js
訪問結果（部分）
完成了以上的搭建與驗證過程後，你就可以開始使用json-server與Mockjs來繼續構建模擬伺服器了，來滿足自己的各種需要
Tips:
1、也可以使用json-server db.json ，使用“json-server --watch db.json”命令可以實時監測db.json的變化；如果沒有 -- watch 命令，即使db.json已經發生了改變，重新發請求，仍然會返回原先的mock data，返回狀態碼304，認為沒有變化。
2、同時，我們可以傳送 POST、PUT、PATCH和DELETE請求，相應的結果會通過lowdb自動儲存到db.json。關於POST、PUT等相關請求的傳送。
3、我們的request body應該是一個json物件，比如{"name":"Lynn"};
4、POST、PUT、PATCH請求頭中要包含Content-Type: application/json；
5、id的值是自動生成且不易變的。PUT請求和PATCH請求中自帶的id會被忽略。