Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞。
那么怎么在项目中去使用mock数据来快速开发呢?这里我使用了vue-cli3
环境。
安装
yarn add mockjs
// 或者
npm i mockjs -S
搭建mock环境
- 1、在根目录新建
mock
目录,在mock
目录里新建index.js
文件和modules
文件夹
// index.js
const Mock = require('mockjs');
const mockFiles = require.context('./modules', false, /\.js$/);
let mocks = [];
mockFiles.keys().forEach(key => {
mocks.push(...mockFiles(key))
})
mocks.forEach(item => {
Mock.mock(item.url, item.type, item.response)
})
// modules/user.js
const userList = {
url: "/user/list",
type: "get",
response: () => {
return {
code: 20000,
data: [
{
"id": 1,
"username": "zhoujielun",
"password": "123456"
},
{
"id": 2,
"username": "guojingming",
"password": "666666"
},
]
}
}
}
const userList1 = {
url: "/user/list1",
type: "get",
response: () => {
return {
code: 20000,
data: [
{
"id": 1,
"username": "zhoujielun",
"password": "123456"
},
{
"id": 2,
"username": "guojingming",
"password": "666666"
},
]
}
}
}
module.exports = [
userList,
userList1,
]
- 2、在
main.js
中引入
require("../mock");
其实到这里mock
环境已经搭建好了,但还是不是很完美,一般情况下我们只有在开发环境需要使用mock
数据。那我们再优化一下。
在根目录新建一个.env
文件
// .env
VUE_APP_MOCK=true
然后,修改一下main.js
// VUE_APP_MOCK的值为true,并且在开发环境下
if (process.env.VUE_APP_MOCK && process.env.NODE_ENV === 'development') {
require("../mock");
}
到这里,我们的mock
数据环境已经搭建好了,下一节介绍一下如何使用
使用
注意:接口的url
和type
要和mock
中定义的一致
// request.js
import axios from 'axios'
import { Message } from 'element-ui'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
return res;
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
api 层
// index.js
const moduleFiles = require.context('./modules', false, /\.js$/);
let apis = {};
moduleFiles.keys().forEach(key => {
// 获取文件名,将 ./ 和 .js 替换为空, 最终格式 common
const fileName = key.replace(/(\.\/|\.js)/g, '');
// 填充数据
apis[fileName] = moduleFiles(key);
})
export default {
...apis
}
// modules/user.js
import request from '@/utils/request'
export function getList() {
return request({
url: '/user/list',
method: 'get'
})
}
然后,在views
层调用api
接口
import api from "@/api";
api.user.getList().then(res => { console.log(res) });