mockjs介绍
官网:https://github.com/nuysoft/Mock/wiki/Getting-Started
一、为什么使用mockjs
在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口,

我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查
使用json-server模拟,但不能随机生成所需数据
使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查
二、mock优点
1.引入库
1.前后端分离,
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

三、mock使用
代码如下(示例):

npm install mockjs --save-dev
// 引入 Mock
var Mock = require('mockjs')

// 定义数据类型
var data = Mock.mock({
  // 20条数据
  "data|20": [{
    // 商品种类
    "goodsClass": "女装",
    // 商品Id
    "goodsId|+1": 1,
    //商品名称
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等级评价★
    "goodsStar|1-5": "★",
    //商品图片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售价
    "goodsSale|30-500": 30

  }]
})
// 输出结果随机生成的数据(node index.js)
 console.log(data);

四、mockjs的数据类型 及 语法规范
1、Mock.Random
Mock.Random是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数])
2Mock.Random 提供的完整方法(占位符)如下

3.定义数据类型,详情见官方文档

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

// 定义数据类型
var data = Mock.mock({
  // 20条数据
  "data|3": [{
    // 商品种类
    "goodsClass": "女装",
    // 商品Id
    "goodsId|+1": 1,
    //商品名称
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等级评价★
    "goodsStar|1-5": "★",
    //商品图片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售价
    "goodsSale|30-500": 30,

    // 邮箱:
    "email": "@email",
    // 颜色
    "color": "@color",

    // name
    "name": "@name",

    //img,参数1:背景色,参2:前景色,参3:图片的格式,默认png,参4:图片上的文字

    "img": "@image('100*100','@color')",
    //英文文本(句子)参1:句子的个数,参2:句子的最小个数  参3:句子的最大个数,没有参1时,参2参3才会生效
    "Etext":"@paragraph(1,1,3)",

    //中文文本(句子)参1:句子的个数,参2:句子的最小个数  参3:句子的最大个数,没有参1时,参2参3才会生效
    "Ctext":"@cparagraph(1,1,3)",

    //中国大区
    "cregion":"@region",
    // 省
    "cprovince":"@province",
    //市
    "ccity":"@city",
    //省 + 市
    "ss":"@city(true)",
    //县
    "country":"@county",
    //省市县
    "countrysx":"@county(true)",
    //邮政编码
    "code":"@zip"

  }]
})

// 输出结果
// console.log(data);

4.mockjs语法规范

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

注意:
属性名 和 生成规则 之间用竖线 | 分隔。 
生成规则 是可选的。 
生成规则 有 7 种格式: '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
//属性值自动加 1,初始值为 `number` 'name|+step': value    

生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐