【vue + mockjs】Mockjs——数据接口模拟

一、mockjs

根据规则生成随机数据，通过拦截 ajax 请求来实现"模拟前端数据接口“的作用。

二、安装

// yarn
yarn add mockjs

// npm
npm install mockjs --save-dev 

三、主要模块

• mock 根据数据模板生成对应的随机数据
• Random 工具函数, 调用具体的类型函数生成对应的数据
• valid 检验数据是否与数据规则匹配
• toJSONSchema 以 JSON Schanma 风格输出数据模板

四、应用到项目

1. 在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)

2. 在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
    }
)

模式一与模式二的区别在于：
前者在生成多个数据时, 嵌套内容将多次生成.
后者嵌套内容只是同一内容的拷贝