切圖崽的自我修養－[TOOL] 用MockJs模擬數據

MockJs

用先後端分離的開發模式，前端和後端約定好接口格式以後，
前端能夠用MockJs模擬返回數據，從而能夠徹底脫離後端進行開發

安裝

npm install mockjs

---

使用

var Mock = require('mockjs');
var mail1 = Mock.mock('@email'); 
var mail2 = Mock.Random.email();
console.log(mail1,mail2);

這裏Mock.mock('@email')做用等價於Mock.Random.email()

---

拓展

var Mock = require('mockjs');
Mock.Random.extend({
    star: function(region) {
        var name  = ['周杰倫', '林俊杰', '鄧紫棋', '方大同']
            return this.pick(name)
    }
})


var star1 = Mock.mock('@star');
var star2 = Mock.Random.star();
console.log(star1,star2);

自定義的拓展函數同理，用@佔位符和調用具體的函數等價

---

API

Basic

可模擬Boolean/Number,Character,String,Array(整形數組)的長度和值

Date

可模擬某一個時間的值和格式

Image

模擬一張圖片的格式，尺寸，顏色，上面的字符串，還有base64編碼

Color

模擬顏色的值和格式(rgb/hsl/rgba/hex)

Text

模擬一段文本，可返回英文單詞，或者英文句子，漢字或者標題

Name

模擬人名，可返回姓/名/姓名/中文姓名

Web

模擬互聯網上常見的地址信息,包括url/protocol/host/domain/tld/email/ip/

Address

模擬中國的地域信息， 包括中國的地區/省/市/縣/郵編

Identity

模擬一些惟一標識符，包括UUID/十八位身份證ID

Helper

一些經常使用方法，最經常使用的爲 從數組裏隨機選擇一個元素， 或者打亂數組中的元素順序

---

結語

MockJs除了生成模擬數據以外，還能攔截你的Ajax請求，而且返回模擬的數據.因此在雙方約定好接口格式以後，前端可以脫離後端，後端也能專一本身的接口開發，兩者並行，提升開發效率