標籤：英語 大小 git nbsp null src 模板 from 關係
Mock.js官方網址： http://mockjs.com/
npm install mockdemo的檔案目錄如下
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‘ }});// 載入 Mockrequire([‘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渲染出資料
mock.js-無需等待，隨機產生資料，讓前端獨立於後端進行開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
