【vue + mockjs】Mockjs——数据接口模拟
一、mockjs
根据规则生成随机数据,通过拦截 ajax 请求来实现"模拟前端数据接口“的作用。
二、安装
// yarn
yarn add mockjs
// npm
npm install mockjs --save-dev
三、主要模块
- mock 根据数据模板生成对应的随机数据
- Random 工具函数, 调用具体的类型函数生成对应的数据
- valid 检验数据是否与数据规则匹配
- toJSONSchema 以 JSON Schanma 风格输出数据模板
四、应用到项目
- 在src根目录创建mock.js
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
//模拟添加
const data2={'code':200,'message':'添加成功','data':true, 'success':true}
Mock.mock('http://192.168.30.150:5784/api/major/add', 'post', data2)
//模拟分页查询
const data3={'code':200,'message':'查询成功','data':{'total':2,'list':[{'id':46,'zydm':'32','zymc': Random.province(),'zycc':'1','zkyx':'x得','status':true},{'id':44,'zydm':'21001','zymc':'GIS地理信息','zycc':'2','zkyx':'武汉大学','status':true}],'pageNum':1,'pageSize':10,'size':2,'startRow':1,'endRow':2,'pages':1,'prePage':0,'nextPage':0,'isFirstPage':true,'isLastPage':true,'hasPreviousPage':false,'hasNextPage':false,'navigatePages':8,'navigatepageNums':[1],'navigateFirstPage':1,'navigateLastPage':1,'lastPage':1,'firstPage':1},'success':true}
Mock.mock('http://192.168.30.150:5784/api/major/index?pageindex=1&pagesize=10&name=&code=&ccdm=', 'get', data3)
//模拟单个查询 , 使用 Random的natural 和province随机生成数据
const data4={'code':200,'message':'获取成功','data':{'id':46,'zydm':Random.natural(1, 800),'zymc':Random.province(),'zycc':'1','zkyx':'得','status':true,'majorSubjectList':[{'id':209,'zyId':46,'subjectId':37,'subjectName':'政治','subjectCode':'02','subjectType':'2'},{'id':211,'zyId':46,'subjectId':43,'subjectName':'高等数学1','subjectCode':'42','subjectType':'2'}
,{'id':211,'zyId':46,'subjectId':43,'subjectName':'高等数学1','subjectCode':'42','subjectType':'2'}]},'success':true}
Mock.mock('http://192.168.30.150:5784/api/major/getmajor?id=46', 'get', data4)
- 在main.js中加入以下内容
// 引入mockjs 使用模拟数据,注释后,使用服务器返回的真实数据
require('./mock.js')
五、Random 常用方法
==boolean== 随机布尔值
Random.boolean( min?, max?, current? )
Random.boolean() // 50% 几率返回 true / false
Random.boolean( 10, 100, true ) // 10%几率返回true
- ==natural== 随机正整数
Random.natural( min?, max?)
// 无取值范围
Random.natural()
// 有取值范围
Random.natural(1, 5)
- ==float== 随机浮点数
Random.float( min?, max?, dmin?, dmax? )
// 不带区间
Random.float()
//带区间
Random.float(1,3,4,6) // 2.5
- ==string== 随机字符串
Random.string( pool?, min?, max? )
// 固定长度
Random.string(2) // ab
// 长度区间
Random.string(2, 10) // aci@
// 根据字符集取值
Random.string("abcdefj", 1, 3) // cdf
- ==time== 获取时间
Random.time( format? )
Random.time("yyyy-mm-dd hh:mm:ss") // -> "1971-06-12 04:50:12"
- ==new== 获取当前时间
Random.now( unit?, format? )
Random.now("yyyy-mm-dd") // 2019-02-27
- ==dataImage== 随机Base64图片
Random.dataImage( size?, text? )
Random.dataImage("200x300", "Hello Wolrd") // png格式
- ==image== 获取定制图片地址
Random.image( size?, background?, foreground?, format?, text? )
size: 尺寸 "100*200"
background: 背景色 "#000000"
foregroundv: 前景色 "#FFFFFF"
format: 格式为 png
text: 内容文字
- ==cparagraph== 随机中文文本
Random.cparagraph( min?, max? )
- ==ctitle== 随机中文标题
Random.ctitle( min?, max? )
对于文字类接口,存在英文版和中文版[c 开头], 例如:title(英文标题) ctitle(中文标题)
- ==cname== 获取中文名称
Random.cname()
- ==url== 链接地址
Random.url( protocol?, host? )
Random.url('http') // "http://emcmqmabcd.ne/onfr"
- ==email== 邮箱地址
Random.email( domain? )
Random.email('nuysoft.com')
// => "h.pqpneix@nuysoft.com"
- ==province== 省
Random.province()
- ==city== 市
Random.city( prefix? )
Random.city()
// => "唐山市"
Random.city(true)
// => "福建省 漳州市"
- ==guid== guid token
Random.guid()
- ==id== 身份证
Random.id()
- ==increment== 自增数
Random.increment( step? )
step: 自增步长
六、注意
- 嵌套
// 模式一
mock({
"users|1-4": [
{
"id": Random.id(),
"name": Random.cname()
}
]
})
// 模式二
const user = mock({
"id": Random.id(),
"name": Random.cname()
})
const users = mock(
{
"users|1-4": user
}
)
模式一与模式二的区别在于:
前者在生成多个数据时, 嵌套内容将多次生成.
后者嵌套内容只是同一内容的拷贝