首页 » 前端 » Mock » 正文

Mockjs 的使用

1. 目录

2. 简介

Mockjs 是一款模拟数据生成器,指在帮助前端工程师独立于后端进行开发;帮助编写单元测试,提供一下模拟功能。
1. 根据数据模板生成模拟数据
2. 模拟 ajax 请求,生成并返回模拟数据
3. 基于 HTML 模板生成模拟数据

2.1. 语法规范

  1. 数据模板定义规范 Data Template Definition DTD
  2. 数据占位符定义规范 Data PlaceHolder Definition DPD

2.2. 特点

  • 前后端分离:让前端工程师独立于后端进行开发
    增加单元测试的真实性:通过随机数据,模拟各种场景
  • 开发无侵入:不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据
  • 用法简单:符合直觉的接口
  • 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
  • 方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则
    在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成之后,只需要改变url地址即可

2.3. 支持

生成随机的 字符串、数字、布尔值、日期、邮箱、链接、颜色,方便扩展,支持扩展更多数据类型,支持自定义函数和正则。

3. 快速入门

3.1. 安装

npm install mockjs

3.2. 数据模板定义规范 DTD

数据模板的每个属性由 3 部分组成:属性名、生成规则、属性值
生成规则的含义需要依赖属性值的类型从才能确定

'属性名|生成规则|属性值'
'name|count': value
'name|min-max': value 
'name|min-max.dmin-dmax': value 
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

详情例子看官网:http://mockjs.com/examples.html

‘name|count’: string 重复生成count次
‘name|min-max’: string 重复生成min-max之间次数

// 引入mockjs 
const Mock = require('mockjs')

// 例子,重复生成10次
let data = Mock.mock({
  "string|10": "★"
})

// 输出
{
  "string": "★★★★★★★★★★"
}

3.3. 数据占位符定义规范 DPD

Mock.Random的方法在数据模板中成为占位符
书写格式为 @占位符(参数)

Type CType Method
Basic 基本 boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image 图片 image, dataImage
Color 颜色 color
Text 文本 paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name 名字 first, last, name, cfirst, clast, cname
Web 环球网 url, domain, email, ip, tld
Address 地址 area, region
Helper 帮助 capitalize, upper, lower, pick, shuffle
Miscellaneous 其它 guid, id

详情例子看官网:http://mockjs.com/examples.html

// 引入mockjs 
const Mock = require('mockjs')

// 使用占位符例子
let data = Mock.mock({
    'list|2': [{
        'id|+1': 1,
        'name': '@cname', //随机生成中文名字
        'word': '@cword(20)', //随机生成中文指定长度文字
        'point': '@integer', //随机生成inter最大长度数值
        'birthday': '@date' //随机生成日期
    }]
})

// 输出结果
{
  "list": [
    {
      "id": 1,
      "name": "卢勇",
      "word": "明使最然南主统制知活或六结劳京特将本满志",
      "point": -4866676146983020,
      "birthday": "1996-01-02"
    },
    {
      "id": 2,
      "name": "蒋平",
      "word": "他则连难状采门有么时感交万重提总场军海接",
      "point": 7627048180050792,
      "birthday": "2007-08-10"
    }
  ]
}

4. Easy Mock

是杭州大搜车无线团队出品的一个极简单、高效、可视化并且能快速模拟数据的在线 Mock 服务。以项目管理的方式组织 Mock List,能帮助我们更好的管理 mock 数据。https://www.easy-mock.com/
* 支持在线 Mock 模拟
* 支持 Swagger Api文档导入
* 支持本地部署 Easy Mock

5. 参考来源

赞 (0)

发表评论