mockjs 入门

发表于 2020-07-02 更新于 2023-09-22 评论：阅读次数：

感觉 mockjs 真是个好东西。简单了解下用法。

官网

先直接上文档 Mock.js。文档中列出了 mockjs 可以模拟的数据类型，包括：

string
number
bool
array
object
guid
id
title
paragraph
image
address
date
time
url
email
ip
regexp

不要小看这个文档，你可以打开控制台，随意地试验这些方法。

-w795

示例

这里列举几个我用到的模拟数据。

模拟 title：

> Mock.mock({'title': '@title(1)'})
// {title: "Qoqhdl"}
> Mock.mock({'title': '@csentence(6)'})
// {title: "容约声量局有。"}

模拟图片：

1 2	> Mock.mock({'head': '@image()'}) // {head: "http://dummyimage.com/234x60"}

模拟图片打开之后的效果如下：

-w938

语法

mockjs 的语法还是比较简单易懂的，感觉不必花时间专门研究。不过不妨找一批较全的示例，实在不记得怎么写时可以照着示例来写。这里直接贴上一个示例，它来自这里。

// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
    'list|1-3': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
        // 属性 sex 是一个bool值
        "sex|1-2": true,
        // 属性 city对象 是对象值中2-4个的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        },
        //属性 grade 是数组当中的一个值
        "grade|1": [
            "1年级",
            "2年级",
            "3年级"
        ],
        //属性 guid 是唯一机器码
        'guid': '@guid',
        //属性 id 是随机id
        'id': '@id',
        //属性 title 是一个随机长度的标题
        'title': '@title()',
        //属性 paragraph 是一个随机长度的段落
        'paragraph': '@cparagraph',
        //属性 image 是一个随机图片 参数分别为size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //属性 address 是一个随机地址
        'address': '@county(true)',
        //属性 date 是一个yyyy-MM-dd 的随机日期
        'date': '@date("yyyy-MM-dd")',
        //属性 time 是一个 size, background, text 的随机时间
        'time': '@time("HH:mm:ss")',
        //属性 url 是一个随机的url
        'url': '@url',
        //属性 email 是一个随机email
        'email': '@email',
        //属性 ip 是一个随机ip
        'ip': '@ip',
        //属性 regexp 是一个正则表达式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})

其他模拟方式

以下是另外两个 mock 库，看起来更为强大。

AntDesign结合mockjs随机生成图片提供了另外一种思路：上传一批图片到云端(保证名字有规律)，再使用 mockjs 来拿到图片地址，从而实现在模拟自定义图片。

总结

mockjs 本身并不是特别有用，不过它结合 vue-admin-template 中的 mock-server，可以直接模拟线上接口，方便在后台尚未提供接口的情况下开始前端页面开发。这一点在某些情况下特别有用，如果事先后台能提供接口协议，保证模拟接口跟实际接口基本一致，生产力应该能大大提高。

vue-admin-template 中 mock-server 的用法见前一篇。

官网

示例

语法

其他模拟方式

总结

参考