使用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會被忽略。

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

新北清潔公司,居家、辦公、裝潢細清專業服務

※別再煩惱如何寫文案,掌握八大原則!

※教你寫出一流的銷售文案?

※超省錢租車方案