Mock在Vue项目中的应用
1.Mock介绍
生成随机数据,拦截 Ajax 请求
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
这是Mock官网给出的介绍,简单明了的说出了Mock实现的主要功能,也告诉了我们Mock的主要应用场景就是前后端分离开发,前端在没有后台接口的情况下,自己拦截Ajax请求并返回自己造的数据以方便页面调试。
2.Mock的使用
第一步:安装
mockjs
npm install mockjs
第二步 在项目中引入mockjs
项目目录下新建一个mock的文件夹,将下面几个文件复制进去
文件内容会在文章最后边
index.js
table.js
utils.js
第三步 配置Ajax请求的拦截
首先在main.js
中加入
// mock拦截http请求
const { mockXHR } = require('../mock')
mockXHR()
或
if (process.env.NODE_ENV === 'development') {
const { mockXHR } = require('../mock')
mockXHR()
}
下面这个根据自身项目情况配置
然后配置mock拦截的请求接口 在table.js
文件中url
通过参数进行调整
url: '/api/dome',
在这样配置之后请求/api/dome
接口就会被mock拦截了,至于需要返回的数据格式,就需要自己来设置了
3.Mock造数据
对于Mock来说造数据还是比较简单的
首先我们模拟后端接口返回长度 0-10 的对象数组
const data = Mock.mock({
'items|0-10': [{
}]
})
接下来我们可以给这个对象数组添加数据 如:
const data = Mock.mock({
'items|0-10': [{
'ccBoolean|1': true, // Boolean
ccId: '@Id', // 订单类编号
ccDatatime: '@datetime', // 时间字符串
}]
})
这样我们就可以在请求返回时查看到数据了
常用的数据的Mock方法
ccShow: '123', // 所见即所得
'ccBoolean|1': true, // Boolean
ccId: '@Id', // 订单类编号
ccDatatime: '@datetime', // 时间字符串
'ccIndex|1': ['100', '1万条=', '10万'], // 在指定选项中选取一项
'ccRepetition|1-2': ['100', '1万条'], // 重复后边内容1-2次 数组内容不是对象
ccInt: '@integer(0, 200)', // 随机整数 0-200
//ccFloat: '@float(60, 100)', // 随机浮点数 60 - 100
ccFloat: '@float(60, 100, 0, 3)', // 随机浮点数 60 - 100 小数点后0-3位
ccProvince: '@province', //省份
ccCity: '@city', // 市 '@city(true)' 省-市 '@county' 区县 '@county(true)' 省-市-县(区)
ccEmail: '@email', // 邮箱 太随机用不了
ccString: '@string("abcdefg", 0, 10)', // 根据给定内容随机生成字符串 长度0-10
ccWord: '@word(3, 10)', // 随机长度3-10的字符串
ccCWord: '@cword(3, 10)', // 随机长度3-10的中文字符串
4.Mock拦截多个ajax请求
题外话: 首先
mock
给定的拦截ajax请求的方法是Mock.mock
这个方式是重载的生成数据也是它。Mock.mock
可以有三个参数url, type, function
拦截地址,拦截的请求类型,拦截的处理函数。原生的Mock拦截多个请求多写几个Mock.mock
就可以了
首先我这里是对
mock
进行过封装的,所以拦截多个请求的方法也有些不一样
第一种方式:新建一个类似table的文件,在index.js中引入
const Mock = require('mockjs')
const { param2Obj } = require('./utils')
const user = require('./user') // 引入新文件
const table = require('./table')
const mocks = [
...user, // 在这里添加对新文件的遍历 ...表示扩展
...table // 通过扩展可以支持在table中写多个拦截,也可以在不同文件中写多个拦截
]
第二种方式:在table文件中扩展
module.exports = [
{
url: '/api/dome',
type: 'get',
response: () => {
const items = data.items
return {
code: '0',
data: {
total: items.length,
items: items
}
}
}
},
// 下面就是拦截的/api/dome2 接口
{
url: '/api/dome2',
type: 'get',
response: () => {
const items = data.items
return {
code: '0',
data: {
total: items.length,
items: items
}
}
}
},
]
5. 文件和Dome
index.js
const Mock = require('mockjs')
const { param2Obj } = require('./utils')
// const user = require('./user')
const table = require('./table')
const mocks = [
// ...user,
...table // 通过扩展可以支持在table中写多个拦截,也可以在不同文件中写多个拦截
]
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function() {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false
if (this.responseType) {
this.custom.xhr.responseType = this.responseType
}
}
this.proxy_send(...arguments)
}
function XHR2ExpressReqWrap(respond) {
return function(options) {
let result = null
if (respond instanceof Function) {
const { body, type, url } = options
result = respond({
method: type,
body: JSON.parse(body),
query: param2Obj(url)
})
} else {
result = respond
}
return Mock.mock(result)
}
}
// 遍历mocks去拦截请求 默认是get请求
for (const i of mocks) {
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
}
}
module.exports = {
mocks,
mockXHR
}
table.js
const Mock = require('mockjs')
// 详细可参考 http://mockjs.com/examples.html#Basic
const data = Mock.mock({
'items|0-20': [{
ccShow: '123', // 所见即所得
'ccBoolean|1': true, // Boolean
ccId: '@Id', // 订单类编号
ccDatatime: '@datetime', // 时间字符串
'ccIndex|1': ['100', '1万条=', '10万'], // 在指定选项中选取一项
'ccRepetition|1-2': ['100', '1万条'], // 重复后边内容1-2次 数组内容不是对象
ccInt: '@integer(0, 200)', // 随机整数 0-200
//ccFloat: '@float(60, 100)', // 随机浮点数 60 - 100
ccFloat: '@float(60, 100, 0, 3)', // 随机浮点数 60 - 100 小数点后0-3位
ccProvince: '@province', //省份
ccCity: '@city', // 市 '@city(true)' 省-市 '@county' 区县 '@county(true)' 省-市-县(区)
ccEmail: '@email', // 邮箱 太随机用不了
ccString: '@string("abcdefg", 0, 10)', // 根据给定内容随机生成字符串 长度0-10
ccWord: '@word(3, 10)', // 随机长度3-10的字符串
ccCWord: '@cword(3, 10)', // 随机长度3-10的中文字符串
}]
})
module.exports = [
{
url: '/api/dome',
type: 'get',
response: () => {
const items = data.items
return {
code: '0',
data: {
total: items.length,
items: items
}
}
}
},
{
url: '/api/dome2',
type: 'get',
response: () => {
const items = data.items
return {
code: '0',
data: {
total: items.length,
items: items
}
}
}
},
]
utils.js
/**
* @param {string} url
* @returns {Object}
*/
function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
}
module.exports = {
param2Obj
}
Dome:
地址