mock.js-無需等待，隨機產生數據，讓前端獨立於後端進行開發

時間 2019-11-13

標籤 mock.js mock 無需等待隨機產生數據前端立於後端進行開發欄目 JavaScript 简体版

原文原文鏈接

mock.js所作的
基於數據模板生成模擬數據。
基於 HTML模板生成模擬數據。
攔截並模擬 ajax 請求。

Mock.js官方網址： http://mockjs.com/

html

一、Mock.js下載安裝

下載mock.js文件 https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js 直接打開另存爲就ok了
npm安裝mock模塊
項目路徑下執行命令： npm install mock

2.一、Mock.js 使用demo （方式1：jquery方式）

demo的文件目錄以下vue

require.js 下載地址爲http://www.requirejs.cn/docs/download.htmljquery

index.html 以下git

 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 以下github

// 配置 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");  //調用方法渲染出數據
});