温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Mock.js

发布时间:2020-07-04 14:59:21 来源:网络 阅读:591 作者:灰白世界 栏目:开发技术

1 Mock.js 简介

1.1 什么是 Mock.js?

Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。

1.2 Mock.js安装

在 CMD 输入如下命令:

cnpm install mockjs 

2 语法规范

Mock.js 的语法规范包括两部分:

  • 数据模板定义规范(Data Template Definition,DTD)

  • 数据占位符定义规范(Data Placeholder Definition,DPD)

2.1 数据模板定义规范 DTD

  • 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:'属性名|生成规则' : value

  • 生成规则有七种格式:

    • 'name|min-max': value

    • 'name|count': value

    • 'name|min-max.dmin-dmax': value

    • 'name|min-max.dcount': value

    • 'name|count.dmin-dmax': value

    • 'name|count.dcount': value

    • 'name|+step': value
  • 生成规则的含义需要依赖属性值的类型才能确定

  • 属性值 中可以含有 @占位符

  • 属性值 还指定了最终值的初始值和类型
2.1.1 属性值是字符串 String
  • 'name|min-max': string

    重复 string 生成一个字符串,重复次数大于 min,小于 max

  • 'name|count': string

    重复 string 生成一个字符串,重复 count 次

2.1.2 属性值是数字 Number
  • 'name|+1': number

    属性值自动+1

  • 'name|min-max': number

    生成一个介于 min-max 之间的整数

  • 'name|min-max.dmin-dmax': number

    生成一个整数部分介于 min-max 之间,小数部分保留 dmin-dmax 位的浮点数

2.1.3 属性值是布尔 Boolean
  • 'name|1': boolean

    随机生成一个 boolean 值,真或假的概率都为 1/2

  • 'name|min-max': value

    随机生成一个布尔值,值为 value 的概率是 min/(min+max),值为 !value 的概率是 max(min+max)

2.1.4 属性值是对象 Object
  • 'name|count': object

    从 object 中取 count 个属性

  • 'name|min-max': object

    从 obejct 中取 min-max 个属性

2.1.5 属性值是数组 Array
  • 'name|1': array

    从 array 中随机取一个元素,作为最终值

  • 'name|+1': array

    从 array 中顺序取一个元素,作为最终值

  • 'name|min-max': array

    通过重复 array 生成一个新数组,重复次数大于等于 min,小于等于 max

  • 'name|count': array

    通过重复 array 生成一个新数组,重复次数为 count 次

2.1.6 属性值是函数 Function
  • 'name':function

    执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 name 所在的对象

2.1.7 属性值是正则表达式 RegExp
  • 'name': regexp

    根据正则表达式 regexp 反向生成可以匹配它的字符串

2.2 数据占位符定义规范 DPD

  • 占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中

  • 占位符的格式为:

    @占位符
    @占位符(参数 [, 参数])
  • 占位符引用的是 Mock.Random 中的方法

  • 可以通过 Mock.Random.extend() 来扩展自定义占位符

  • 占位符也可以引用数据模板中的属性

  • 占位符会优先引用数据模板中的属性

  • 占位符支持相对路径和绝对路径

    2.2.1 基本方法
  • @string 字符串

  • integer 整数

  • date 日期
2.2.2 图像方法
  • @image 图片
2.2.3 文本方法
  • @title 标题

  • @cword(100) 文本内容,参数为字数
2.2.4 名称方法
  • @cname 中文名称

  • @cfirst 中文姓氏

  • @Last 英文姓氏
2.2.5 网络方法
  • @url url

  • @email 邮箱
2.2.6 地址方法
  • @region 区域方法

  • @county 省市县

3 EasyMock

3.1 什么是EasyMock?

Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务 。以项目管理的方式组织 Mock List,能帮助我们更好的管理 Mock 数据。

  • 地址:https://www.easy-mock.com

  • 在线文档:https://www.easy-mock.com/docs

3.2 EasyMock基本入门

3.2.1 初始化操作
  • 登陆或注册

    Mock.js

  • 创建项目

Mock.js

Mock.js

3.2.2 接口操作
  • 点击项目,进入个人项目,对接口进行增删改查

Mock.js

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI