Vue项目中如何使用Mock
当后端还未写完接口,但前端已经写完页面,这时候就可以与你的后端人员约定好接口字段,然后自己使用mock来模拟后台返回数据。
使用步骤
首先在Vue项目中安装 mockjs
// 没有项目的 直接 vue create 项目名,有项目的安装mockjs
// 使用mockjs 产生随机数据
npm install mockjs
// 使用axios 发送 ajax
npm install axios --save
// 使用 json5 解决json文件,无法添加注释的问题
npm install json5 --save-dev(可以不要)
学习MOCKJS
在Vue根项目下新建 mock 文件夹,新建 index.js 文件
const Mock = require('mockjs') // 引入mockjs依赖
let id = Mock.mock('@id') // 得到随机id 类型为 字符串
var obj = Mock.mock({
id:'@id()', //得到随机的id,对象
username:'@cname()', //随机生成中文名字
date:'@date()', //随机生成日期
avatar:"@image('200 * 200','red','#fff','avatar')", //生成图片,参数:size, background, foreground, text
description:'@paragraph()', // 描述
ip:'@ip()', // IP地址
email:'@email()' // email
})
学习JSON5(可不要)
json文件中,存在注释编辑器就会报错,采用json5格式可以让json存在注释
引如JSON5 库来解析JSON5格式(可不要)
在mock文件夹下新建 testJSON5.js 文件
const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
var json = fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')
var obj = JSON5.parse(json)
console.log(obj);
在Vue项目中结合MOCK
在mock文件夹下新建 index.js
// 首先引入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);
}
});
在main.js 种引入 mock文件夹
require('../mock')
新建vue.config.js
在项目根目录下,新建 vue.config.js 文件
module.exports ={
devServer : {
before : require('./mock/index.js') // 引入 mock/index.js
}
}
模拟一个接口数据,在mock文件夹下新建js文件demoList。
// mock 语法 http://mockjs.com/0.1/
let demoList = {
status: 200, // 状态码为200 则调用成功
message: 'success',
data: {
total: 100, // 一次返回100条数据
'rows|10': [{ // 一组为10条
id: '@guid',//得到随机的id,对象
name: '@cname',//随机生成中文名字
'age|20-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
date:'@date()', // 随机生成日期
avatar:"@image('200 * 200','red','#fff','avatar')", //生成图片,参数:size, background, foreground, text
description:'@paragraph()', // 描述
ip:'@ip()', // IP地址
email:'@email()' // email
}]
}
};
export default {
'get|/user/userinfo': demoList // (get 请求)
}
在页面中发送AJAX请求
import axios from 'axios'
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
axios.get('/user/userinfo')
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err);
})
}
}