mock.js-無需等待，隨機產生數據，讓前端獨立於后端進行開發
- mock.js所做的
- 基於 數據模板 生成模擬數據。
- 基於 HTML模板 生成模擬數據。
- 攔截並模擬 ajax 請求。
Mock.js官方網址： http://mockjs.com/
1、Mock.js下載安裝
- 下載mock.js文件 https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js 直接打開另存為就ok了
- npm安裝mock模塊
項目路徑下執行命令：npm install mock
2.1、Mock.js 使用demo （方式1：jquery方式）
demo的文件目錄如下
require.js 下載地址為http://www.requirejs.cn/docs/download.html
index.html 如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>mock-demo</title> 6 </head> 7 <body> 8 9 <!--mock.js 依賴jQuery和require.js--> 10 <script src="jquery.js"></script> 11 <script src="require.js"></script> 12 <!--mock-main.js是mockJs的demo文件--> 13 <script src="mock-main.js"></script> 14 </body> 15 </html>
mock-main.js 如下
// 配置 Mock 路徑
require.config({
paths: {
mock: 'mock'
}
});
// 加載 Mock
require(['mock'], function(Mock) {
/*第一部分與第二部分沒有關系*/
/*第一部分*/
// Mock.mock( template )
//數據模板
var data = Mock.mock({
'list|4': [{
'id|+1': 1
}],
name: Mock.Random.cname(), //隨機產生一個中文的姓名
addr: Mock.mock('@county(true)'), //隨機生成一個地址
'age|18-60': 1, //隨機生成一個數字 大小在18到60
birth: Mock.Random.date(), //隨機生成一個日期
sex: Mock.Random.integer(0, 1),//隨機生成一個整數，0/1 ，根據這個來給“男” “女”
email:Mock.mock('@EMAIL()'), //隨機生成一個郵箱
'moblie|1':['13531544954','13632250649','15820292420','15999905612'], //在數組中隨機找一個
'num1|1-100.2':1, //1-100 中隨機生成一個保留兩位小數點
'num2|100-300.2':1,
'classroom|1':['精品語文班','精品作業A班','英語班','語文班'],
'from|1':['到店咨詢','微店','壹家教','學習服務平台'],
'status|1':['意識強烈','預報名','意向一般','暫無意向'],
time:Mock.Random.date('yyyy-MM-dd'),
mobile:/^1[0-9]{10}$/ //用正則匹配1開頭的11位數字的手機號
});
//打印到body上
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
/*第二部分*/
// Mock.mock(rurl, template)
Mock.mock(/\.json/, { //匹配.json文件
'list|1-10': [{ //數據模板，隨機生成一個對象數組
'id|+1': 1, //1開始，遞增
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
$.ajax({
url: 'hello.json', //請求訪問json文件，攔截hello.json的請求，返回mock數據模板中的數據
dataType: 'json'
}).done(function(data, status, jqXHR) {
//獲得mock數據模板中的數據，打印到body上
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
})
/*第三部分*/
var data3 =Mock.mock(/\.json/, { //匹配.json文件，可執行匹配成功的參數
'list|1-10': [{ //數據模板
'id|+1': 1,
'email': '@EMAIL',
'regexp4': /\d{5,10}/,
'name': Mock.Random.cname(), //隨機產生一個中文的姓名
}]
});
function sendData(url) {
$.ajax({
url: url,
dataType: 'json'
}).done(function(data3, status, jqXHR) {
//獲得mock數據模板中的數據，打印到body上
$('<pre>').text(JSON.stringify(data3, null,5)).appendTo('body');
})
}
sendData("hello.json"); //調用方法渲染出數據
});
效果如下圖
2.2 vue中使用mock.js 【引用自簡書】
vue-cli 本地開發mock數據使用方法http://www.jianshu.com/p/ccd53488a61b
2.3自己本地搭建vue項目 是在src底下添加一個mock模塊
目錄如下
將數據源放在user.js里面
在mock.js里面調用user.js渲染出數據