感興趣的話,能夠star關注支持下,項目地址。前端
在平常的開發中,前端mock後端api數據,是實現先後端並行開發很是重要的一步。有了數據,才能更加真實反饋實際操做流程,交互效果才能更好的編碼實現,也能很好的規避後期聯調會有的各類問題。git
前端模擬API數據的方式有不少種。github
1 手動模擬數據庫
在js中寫死數據,聯調發布時,將模擬的數據刪除。或者能夠封裝個開關。npm
let getData = (cb) => { // 在模擬的時候不走接口請求直接返回數據 return cb && cb({a: 1}) // 真實的請求 http.get('/api/test', (res) => { cb && cb(res) }) }
2 本地json文件json
這比上一種方法頗爲模塊化。依據後端接口路徑,在開發的目錄中生成對應的目錄和文件。並將請求經過特定的url,開發環境指定到對應的本地文件。聯調或者生產環境發佈前,再修改特定的url。後端
const config = { baseUrl: '/quxue', initialUrl: '../' }; // 兩種請求路徑,一種請求到項目真實後臺,一種請求本地json文件
3 mockjsapi
這像是一種更加高級的手動模擬的實現方式。藉助mockjs,能夠產生更多樣的返回數據。聯調發布前,也一樣須要將關鍵代碼進行處理,將請求真正發送到後端服務器中,而不是被mockjs攔截到。bash
如RequireJs中加載mockjs服務器
// 配置 Mock 路徑 require.config({ paths: { mock: 'http://mockjs.com/dist/mock' } }) // 加載 Mock require(['mock'], function(Mock){ // 使用 Mock var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) // 輸出結果 document.body.innerHTML += '<pre>' + JSON.stringify(data, null, 4) + '</pre>' })
4 Mock Server
Mock Server應該具有如下幾點功能:
基於Express的快速mock平臺,無需配置數據庫,啓動後便可實現本地mock接口數據。經過接口url,返回對應接口json數據。
# install dependencies npm install # 訪問localhost:3000/list npm start
輸入項目名稱,項目url(能夠理解爲,對於區分不一樣項目的特定字符串),項目描述。
項目面板,展現已存在的全部項目。
選擇一個項目後,能夠查看該項目下的接口信息和爲該項目添加接口。
輸入接口名稱和接口URL,將相對應json數據輸入左側,同時右側預覽json數據格式是否合法,下方填入此接口的備註說明。
能夠查看項目中有哪些接口,若是接口過多,支持接口的模糊查詢。
利用postman,驗證Mock Server能夠將數據真實有效的返回
生活並不缺乏美,缺乏的是發現美的眼睛。
原文地址:戳我