mockjs介绍

mockjs介绍

` 官网：https://github.com/nuysoft/Mock/wiki/Getting-Started

一、为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，

1. 我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2. 使用json-server模拟，但不能随机生成所需数据
3. 使用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    

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