mockjs介绍

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

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

猜你喜欢