vue快速構建/搭建mock、mockjs。npm/cdn都涉及到

本人github地址

mock

寫在最前面

如果是想學mock請移步移步官網mock，本文章只是我自己學習的筆記

工作需要，被動學習。

mock的作用

Mock.js是一個模擬數據生成器，可以幫助前端開發和原型分離後端進度，並減少一些單調，特別是在編寫自動化測試時。

mock 安裝

基本語法

• rurl: url (可選)
• rtype: 請求類型(get/post) (可選)
• template|function( options ): 模板/方法 (可選)

Mock.mock( rurl?, rtype?, template|function( options ))

通過cdn安裝

<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
// Mock.mock( template )
// 官網文檔扣下來的模板

var template = {
    'title': 'Syntax Demo',

    'string1|1-10': '★',
    'string2|3': 'value',

    'number1|+1': 100,
    'number2|1-100': 100,
    'number3|1-100.1-10': 1,
    'number4|123.1-10': 1,
    'number5|123.3': 1,
    'number6|123.10': 1.123,

    'boolean1|1': true,
    'boolean2|1-2': true,

    'object1|2-4': {
        '110000': '北京市',
        '120000': '天津市',
        '130000': '河北省',
        '140000': '山西省'
    },
    'object2|2': {
        '310000': '上海市',
        '320000': '江蘇省',
        '330000': '浙江省',
        '340000': '安徽省'
    },

    'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
    'array2|1-10': ['Mock.js'],
    'array3|3': ['Mock.js'],

    'function': function() {
        return this.title
    }
}
var data = Mock.mock(template)

$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
</script>

npm安裝

const Mock = require('mockjs');
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};

// Mock響應模板
Mock.Mock(/\.json/, {
    "user|1-3": [{   // 隨機生成1到3個數組元素
        'name': '@cname',  // 中文名稱
        'id|+1': 88,    // 屬性值自動加 1，初始值爲88
        'age|18-28': 0,   // 18至28以內隨機整數, 0只是用來確定類型
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',   // 中國城市
        'color': '@color',  // 16進制顏色
        'isMale|1': true,  // 布爾值
        'isFat|1-2': true,  // true的概率是1/3
        'fromObj|2': obj,  // 從obj對象中隨機獲取2個屬性
        'fromObj2|1-3': obj,  // 從obj對象中隨機獲取1至3個屬性
        'brother|1': ['jack', 'jim'], // 隨機選取 1 個元素
        'sister|+1': ['jack', 'jim', 'lily'], // array中順序選取元素作爲結果
        'friends|2': ['jack', 'jim'] // 重複2次屬性值生成一個新數組
    },{
        'gf': '@cname'
    }]
});

通過 get 請求

打印出對應數據

$.ajax({
    url: /\.json/,
    type: 'get',
    dataType: 'json'
})
.then(res =>{ss
    console.log(res);
})

設置 post、帶參數的請求

響應時也可以是使用 function, 如:

const Mock = require('mockjs');
Mock.mock(/\.json/, 'post', function(options) {
    return options.type
})

通過 post 請求

$.ajax({
    url: 'hello.json',
    type: 'post',
    dataType: 'json'
})
.then(res()=>{
    console.log(res);
})

通過 post 帶參數請求

$.ajax({
    url: 'hello.json',
    type: 'post',
    dataType: 'json'
    data: {
      account: 888,
      pwd: 'abc123'
    }
})
.then(res()=>{
    console.log(res);
})

const Mock = require('mockjs');
Mock.mock(/\.json/, 'post', function(options) {
    console.log(options);
    // 打印出 {url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
    return Mock.mock({
        // .....
    });
});