切图崽的自我修养－[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请求，而且返回模拟的数据.因此在双方约定好接口格式以后，前端可以脱离后端，后端也能专一本身的接口开发，两者并行，提升开发效率