切图崽的自我教养－[TOOL] 用MockJs模仿数据

2024年4月19日 107次阅读 来源: 大切图崽

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要求，而且返回模仿的数据.所以在两边约定好接口花样以后，前端可以离开后端，后端也能专注本身的接口开辟，两者并行，进步开辟效力

    原文作者：大切图崽
    原文地址: https://segmentfault.com/a/1190000007077325
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞