大部分内容参照简书文章:https://www.jianshu.com/p/1f6a3180051b
安装开发依赖
npm install mockjs -D
安装mockjs在你的开发依赖上,因为你生产环境用的是正式的接口,安装在开发依赖上可以减少你包的大小。
main.js:
import './mock' //引用mock
建立mock目录
在 src目录 中,建立一个mock的文件夹:
index.js
样例
index文件用于来合并mock拦截相应请求接口,并使用mock的方法模拟后端返回数据,示例:
// index.js
// 引入mockjs
import Mock from 'mockjs'
// 引入所写的接口拦截操作方法文件
import rootAPI from './root'
// root相关
Mock.mock(/\/system\/root\/list/, 'get', rootAPI.getRootList)
Mock.mock(/\/system\/root/, 'get', rootAPI.getRoot)
Mock.mock(/\/system\/root/, 'post', rootAPI.addRoot)
Mock.mock(/\/system\/root/, 'put', rootAPI.updateRoot)
Mock.mock(/\/system\/root/, 'delete', rootAPI.delRoot)
// ***相关
Mock.mock(url, method, function)
参数
Mock.mock(url, method, function) 实现请求拦截,参数:
参数 | 描述 |
---|---|
url | 后端数据请求接口url |
method | 请求方法类型 |
function | 拦截请求后的处理方法 |
其它文件
样例
示例中以 root.js 为例,用来存放相应的请求拦截处理方法:
// 引入mockjs
import Mock from 'mockjs'
// 公共方法
function fn1(x) {
// ...
}
function fn2(x) {
// ...
}
// 参数配置
let List = [] // 数据列表
const count = 50 // 数据数量
// 随机生成数据
for (let i = 0; i < count; i++) {
// Mock.mock()方法随机生成数据
List.push(Mock.mock({
dataname: "data",
// ...
}))
}
// 请求拦截相应的执行方法,一下以获取列表为例
export default {
/**
* 获取列表
* @param owner, ipCode, status, pageNum, pageSize
* @return {{code: number, ok: bool, data: array, total: number}}
*/
getRootList: queryParams => {
// 获取搜索参数,param2Obj方法用于将param转换为对象格式
const { owner, ipCode, status, pageNum = 1, pageSize = 10 } = param2Obj(queryParams.url)
// 搜索方法
const mockList = List.filter(item => {
if (owner && item.owner.indexOf(owner) === -1) return false
if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
if (status && item.status.indexOf(status) === -1) return false
return true
})
// 分页
const pageList = mockList.filter((item, index) => index < pageSize * pageNum && index >= pageSize * (pageNum - 1))
// 返回数据,模拟后端
return {
code: 200,
ok: true,
data: pageList,
total: mockList.length
}
},
// 其他方法
listFn: x => {
// ...
}
}
mockjs随机生成数据相关方法
如上样例所示,采用for循环,通过 push() 方法向 List 添加数据,示例:
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: Mock.Random.id(),
code: Mock.Random.guid(),
ipCode: Mock.Random.ip(),
owner: Mock.Random.cname(),
'status|1': ['0', '1'],
createdTime: Mock.Random.datetime(),
updatedTime: Mock.Random.datetime()
}))
}
Mock.Random
本方法可以随机生成相应种类参数, Mock.Random.{type}() 实现,常用种类:
type | 示例 |
---|---|
id | 360000201910290362 |
guid | B7fa74Ac-2fDD-24dC-E8af-ff39dcbd6158 |
ip | 139.232.165.220 |
cname | 潘涛 |
name | Richard Walker |
datetime | 1974-02-03 12:36:46 |
其它类型请前往Mock文档查看。
自定义随机数据
以样例中的随机选择数组中数据为例:
// 'name|1': array
'status|1': ['a', 'b', 'c']
status就会随机选择数组中的一个数据。
更多示例请查看Mock文档。
其它
常用公共方法
param转对象
前端常用get请求通过param带参数请求,以下方法可以将param转换为对象格式:
// param 转 对象
function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
获取url中“/”后的id等参数
通常修改删除等操作会使用id参数,通常在url最后的"/"后面(例:api/user/1002003),并且如果有多个参数(例:api/user/1002003,1023503,2402806)会返回一个数组:
// 获取最后一个“/”后参数
function getFinal(url) {
const id = url.split('/').reverse()[0];
if (id.indexOf(',') === -1) {
return id
}
const ids = id.split(',')
return ids
}
数据搜索方法
搜索使用filter方法搜索,生成搜索结果在mockList中:
// 搜索方法
const mockList = List.filter(item => {
if (owner && item.owner.indexOf(owner) === -1) return false
if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
if (status && item.status.indexOf(status) === -1) return false
return true
})