mock在项目中的使用
1.下载
npm i mockjs axios -D;
2.代码配置
2.1 mock文件夹index.js文件
// 配置 mock 文件
// 首先引入Mock
const Mock = require('mockjs');
// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
});
let configArray = [];
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
if (key === './index.js') return;
configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
for (let [path, target] of Object.entries(item)) {
let protocol = path.split('|');
Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
}
});
2.2 在app.js或main.js主文件中引入mock文件
import "../mock";
2.3 mock文件夹下创建mock1.js
const Mock = require('mockjs');
var Random = Mock.Random
let data=Mock.mock({
'rows|8': [{ //模拟每页有多少条数据。 每页8条。
key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
name: '@cname', //前缀加 c 的意思为随机生成中文，否则是英文
'age|1-70': 56,
address: '@csentence',
'tags|1-2': ['@name']
}]
})
let data2=Mock.mock({
'rows|4': [{ //模拟每页有多少条数据。 每页8条。
key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
name: '@cname', //前缀加 c 的意思为随机生成中文，否则是英文
'age|1-70': 56,
address: Random.csentence(),
'tags|1-2': ['@name']
}]
})
let articleList = {
code: 200,
msg: 'success',
data: { //数据
total: 100, //模拟数据的页数，分页功能。 100条
rows:data.rows
}
};
let List = {
code: 200,
msg: 'ss',
data: { //数据
total: 10, //模拟数据的页数，分页功能。 100条
rows:data2.rows
}
};
export default {//前面键是请求方式与请求地址，后边值是返回的数据
'get|/article/list': articleList,
'get|/article2/list': List,
}
2.4 mock文件夹下创建mock2.js
const Mock = require('mockjs') // 这个是引用库
const Random = Mock.Random // 生成随机数
let Result = {
code: 200,
msg: '操作成功',
data: null
}
// mock.mock的目的就是拦截目的，这样axios的访问，就可以被拦截了。但是一定要记得， 在main.js当中引入，只有引入了才生效。
Mock.mock('/captcha', 'get', () => {
Result.data = {
token: Random.string(32),
captchaImg: Random.dataImage('120x40', 'p7n5w')
}
return Result
})
export default Mock.mock('/login', 'post', () => {
// 无法在header中传入数jwt
// Result.code = 400
// Result.msg = "验证码错误"
return Result
})
Mock.mock('/sys/userInfo', 'get', () => {
Result.data = {
id: "1",
username: "test",
avatar: "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg"
}
return Result
})
Mock.mock('/logout', 'post', () => {
return Result
})
// 获取用户菜单以及权限接口
Mock.mock('/sys/menu/nav', 'get', () => {
let nav = [
{
name: 'SysManga',
title: '系统管理',
icon: 'el-icon-s-operation',
component: '',
path: '',
children: [
{
name: 'SysUser',
title: '用户管理',
icon: 'el-icon-s-custom',
path: '/sys/users',
component: 'sys/User',
children: []
},
{
name: 'SysRole',
title: '角色管理',
icon: 'el-icon-rank',
path: '/sys/roles',
component: 'sys/Role',
children: []
},
{
name: 'SysMenu',
title: '菜单管理',
icon: 'el-icon-menu',
path: '/sys/menus',
component: 'sys/Menu',
children: []
}
]
},
{
name: 'SysTools',
title: '系统工具',
icon: 'el-icon-s-tools',
path: '',
component: '',
children: [
{
name: 'SysDict',
title: '数字字典',
icon: 'el-icon-s-order',
path: '/sys/dicts',
component: '',
children: []
},
]
}
]
let authoritys = ['sys:user:list', "sys:user:save", "sys:user:delete"]
Result.data = {
nav: nav,
authoritys: authoritys
}
return Result
})
2.5 mock文件夹下创建mock3.js
//http://mockjs.com/examples.html
import Mock from 'mockjs'
import url from 'url'
/*
mock.mock()
参数1：请求地址 选填 url
参数2: 请求类型 选填 type
参数3：数据模板 | 函数
*/
var data = Mock.mock({
"data|100":[ //意思是data数组中有100条数据
{ //这个对象是用来写数据模板的
"id|+1":0, //初始值是0每次id都+1
"goodsName":"@ctitle(3, 5)", //看官网，这个名字是3-5之间的
"goodsPrice|+1":100, //这个类似上面的id一个，只是初始值是从100开始的
"address":"@county(true)", //这个是地址，@county(true) 对象的属性值都是mock.mock()提供的方法，直接拿过来用就可以了
"tel":/^1(3|5|7|8|9)\d{9}$/, //正则写的电话后面1开头，正则不懂自己去学！！！！！！！！！！！很重要
"goodsImg":"@image('200x100', '#894FC4', '#FFF', 'alley')", // 图片
"date":'@date("yyyy-MM-dd M:dd:d")', //时间
"email":"@email()", //邮箱
"name":"@ctitle(10, 30)", //10-30
"text":"@cparagraph(1, 3)", //备注用
"img":"@dataImage('200x100', 'Hello')", //图片200*100
"datetime":'@datetime("yyyy-MM-dd A HH:mm:ss")', //"1974-01-08 PM 23:54:57"
"string":'@string("lower", 5)', //"string5"
"number|1-800":800, //返回1-800的随机数
"url":"@url", //返回随机url地址
"word":Mock.Random.cword(5,20), //返回5-20个随机汉字
"array|1-10": [ //返回1-10个随机元素的数组
{
"name|+1": [
"Hello",
"Mock.js",
"!"
]
}
],//数组中含有数组的
'dds':'caiyufu'
}
],
code:200,
message:'请求数据成功'
})
console.log(data,'ddw');//打印这Mock.mock() 赋值的内容，直接在终端运行就 可以了
// .........这个是通过get 拦截的AJAX
Mock.mock(/\goods\/goodsList/,"get",function(options){
let {limit,page} = url.parse(options.url,true).query;// 解构赋值，结合上面看就懂了
// return data.data.slice(0,4);//获取0-4条的数据，
return data.data.slice((page-1)*limit,(limit*page)-1) //data.data是上面的数据，这里获取的是
})
export default Mock.mock('/postdata1','post',{
success: true,
message: '@cparagraph',
// 属性 list 的值是一个数组，其中含有 1 到 5 个元素
'list|1-5': [{
// 属性 sid 是一个自增数，起始值为 1，每次增 1
'sid|+1': 1,
// 属性 userId 是一个5位的随机码
'userId|5': '',
}]
})
2.6 使用axios调用接口
axios.get("/goods/goodsList", { //这个是通过get发送的
params: {
limit: 5, //一页有5条数据
page: 1 //第几页
}
}).then((data) => {
console.log(data);
});
axios.post('/postdata1', {
params: {
name: 'jack'
}
})
.then((res) => {
console.log(res.data)
})
.catch((err) => {
console.log(err)
})
axios.get('/sys/menu/nav').then(res => {
console.log("/sys/menu/nav")
console.log(res)
})
axios.get('/article/list').then(res => {
console.log("/article/list")
console.log(res)
})
参考链接：
http://runxinzhi.com/enhengenhengNymph-p-15665564.html
标签：name,项目,sys,mock,使用,data,Mock,icon From： https://www.cnblogs.com/domin520Jian/p/17482781.html