mockjs的开源地址：github.com/nuysoft/Moc…
mockjs的案例地址：mockjs.com/examples.ht…
使用mockjs
项目安装mock
npm install mockjs
项目中新建mock文件
//引入mock模块
import Mock from 'mockjs'
将mock文件在main.js中导入
import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'
Vue.config.productionTip = false
new Vue({
render:h => h(App),
}).$mount('#app')
mock语法
生成字符串
- 生成指定次数字符串
import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈"
})
- 生成指定范围长度字符串
const data = Mock.mock({
"string|1-8":"哈哈"
})
注意：文本/标题等前面加'c'表示生成中文文本，否则是英文
生成文本
- 生成一个随机字符串
const data = Mock.mock({
"string":"@cword"
})
- 生成指定长度和范围
const data = Mock.mock({
string:"@cword(1)"
str :"@cword(10,15)"
})
生成标题和句子
- 生成标题和句子
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence"
})
- 生成指定长度的标题和句子
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence(50)"
})
- 生成指定范围的
const data = Mock.mock({
title:"@ctitle(5,8)"
sentence:"@csentence(50,100)"
})
生成段落
- 随机生成段落
const data = Mock.mock({
content:"@cparagraph()"
})
生成数字
- 生成指定数字，number所对应的值或者 'number|' 后面的值
const data = Mock.mock({
numl: 2, //2
"number|80":1 //80
})
- 生成范围数字
const data = Mock.mock({
"number|1-99":1
})
生成自增id
- 随机生成标识
const data = Mock.mock({
id:"@increment"
})
生成姓名-地址-身份证
注意：城市地址中@city(true)表示地区名称带省，如果没有true则没有省，只有市
- 随机生成姓名-地址-身份证
const data = Mock.mock({
name:"@cname()"
idCard:"@id()"
address:"@city(true)"
})
随机生成图片
注意图片大小只能用
?x?不能用*连接。否则浏览器会出现Too big of an image!，不显示图片
- 生成图片：@image（“300*200”，‘#ff0000','#fff','gif','坤坤'）
- 参数1：图片大小
[ '300*250','250*250','240*400','336*280' '180*150','720*300','468*60','234*60' '388*31','250*250','240*400','120*40' '125*125','250*250','240*400','336*280']
-
参数2：图片背景色
-
参数3：图片前景色
-
参数4：图片格式
-
参数5：图片文字
生成时间
- @Date
- 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)
注意：指定格式时间字母必须和以上一样
生成数组
指定数组返回的参数
- 指定长度：‘date|5’
- 指定范围:'data|5-10'
const data = Mock.mock({
'list|50-99':[
{
name:'@cname'
address:'@city(true)'
id:'@increment()'
}
]
})
mock拦截请求
注意：使用 Mock.mock 拦截请求时的第三个参数可以是
{}或者()=>{ return{} }。
使用箭头函数可以获取参数和地址，箭头函数中的参数是一个对象，包括url,type,body。
- url：指明请求的地址，末尾会拼接get请求传递过来的参数
- type：指明请求的类型
- body：指明post请求传递的数据
定义get请求
Mock.mock('api/get/news','get',{
status:200,
message:"获取数据成功"
})
或者
Mock.mock('api/get/news','get',()=>{
return{
status:200,
message:"获取数据成功"
}
})
如果想要获取get请求的参数可以参考下列方法（调用该方法需要传递两个参数—从箭头函数的参数对象中获取到的url和想要获取的参数名称）:
// 根据url获取query参数
const getQuery = (url, name) => {
const index = url.indexOf('?')
if (index !== -1) {
const queryStrArr = url.substr(index + 1).split('&')
for (let i = 0; i < queryStrArr.length; i++) {
const itemArr = queryStrArr[i].split('=')
if (itemArr[0] === name) {
return itemArr[1]
}
}
}
return null
}
注意：如果请求需要传递参数，则会拼接到地址末尾，会无法识别。此时应该使用正则来匹配。
Mock.mock(/\/api\/get\/news/, 'get', (options) => {console.log(options)})
定义post请求
Mock.mock('/api/add/news','post',(options)=>{
console.log(options)
return{
status:200,
message:"获取数据成功"
}
})
注意：箭头函数中参数对象的body是JSON类型的对象（post请求传递的参数），想要将body中数据添加到数组中需要先将body转换为js对象，即
const body = JSON.parse(options.body)。
