Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立于后端進行開發，幫助編寫單元測試。提供了以下模擬功能：
根據數據模板生成模擬數據
模擬 Ajax 請求，生成并返回模擬數據
基于 HTML 模板生成模擬數據
mock.js 的文檔? http://mockjs.com/0.1/
使用步驟:?
第一步: 參考文檔上的示例, 直接 npm install mockjs 安裝
第二步: 要學會看文檔! ?很多人都會犯一個毛病,集成完之后,完檔都不看,然后就去使用,或者說各種百度XXX.使用教程........其實文檔才是最好的教程好不,只是說遇到了某些文檔描述不詳細的點,然后一頭霧水了,這時候你再去百度. ? ? ?
所以.可以把文檔大致給過濾一遍,知道都是干啥的,起碼有個印象.
第三步: 使用: ? 首先你要明確要你的哪個頁面需要模擬數據. ? 然后,你是想模擬成 ajax 請求的方式,還是模擬其他方式? ?我這里是模擬ajax 請求的方式來處理的.
? ? 1. 首先. 配置在全局配置文件夾中 配置mock. ? ? ? ?比如 ? ? ?const mock = require('./mock.js'); ? ? ?你可以把它當成一個serve來處理:
? ? ? ? ? server: { middleware: mock.data();} ? ? ? ? ?注:(我這里是用的gulp構建的項目)
? ? 2.既然第一步導入了,那么我看來看看mock.js 這個文件夾里面的內容是什么鬼
? ? const room = require('./app/mock/room.js'); ? ? ? //拿到room頁面模擬創建的數據
? ? const admin = require('./app/mock/admin.js'); ? //拿到admin頁面模擬創建的數據
? exports.data = function(){ return [...room, ...admin] }; ? ?// data方法中的代碼是 把這些數據整合到一個數組當中
? mock.js? 這個文件夾 我把它當成了全局的mock配置文件夾. 因為很多頁面都需要模擬數據,那么一個頁面我就可以綁定一個自定義的 ? ? ? ? ?mock.js文件夾去模擬常見數據(例如room? admin 這兩個就是room頁面 和admin頁面模擬數據的文件夾 ). ?
第四步:看看我們每個模擬數據的頁面時如何模擬數據的
? ? const Mock = require('mockjs');
? ? const url = require('url'); ? ? 這樣個是必須要導入的, 參考文檔. ?別問為什么! 規定!
? 然后就開始創建自定義數據, 看不懂的話 那是你沒看文檔定義的格式規范
? ? let area = Mock.mock({ ?'data|5':[{'id|+1': 1 , name: '區域@cword("一二三四五六七八九", 1)', nums: 0 }]});
代碼本來很長,怕寫太長太亂.就簡單寫了幾條數據
然后 參考文檔, 如模仿類似ajax請求,返回模擬的數據 ? (因為一個頁面有很多模塊,所以我們分模塊把模擬額數據撞到數組里)
module.exports = [ {頭部模塊}, {尾部模塊}, { //中間區域模塊?
? ? ?route:'/rooms', ? //路由
? ? handle:function (req,res,next) { ? ? //請求頭
? ? res.writeHead(200,{
? ? "Content-type":"application/json;charset=UTF-8"
? ? });
? ?res.write(JSON.stringify({ ? //可以輸出 你模仿的數據
? ? success: true,? code: 1,? area: area.data,? //area.data 就是上面所模仿的數據
})); res.end(); } ?} ];
//你可以把它理解成 數組里裝了三個路由.
//第五步.使用 ? (就想正常的ajax一樣)
fetch.prototype.get = function(url,callBack) {$.get(this.server+url,function(data){ callBack(data);})} ?//封裝的get請求
//輸入路徑,在回調函數中返回數據
fetchs.get('/dragTree',function(res) { ?
// console.log(res.success);
// console.log(res.data);
return res.data;
});
收尾: ? ?我只是詳細給你展示整個流程是什么樣的. ? 里面的代碼你可能看不懂, ?但是你可以感受寫整個使用過程. ? ?只要慢慢學會了看文檔,其實你會發現 集成任何第三方的東西,原理都是一樣的. ?無非就是install , 配置導入, 熟悉文檔語法 , ?使用. ??
???
