当一个项目开始开发，正常情况是前后台开发同时进行，但是很多情况是后台先提供接口，然后前端才开始编写页面，这样就会导致项目进度缓慢，为了解决这个问题，前端一般是根据接口先在本地进行数据模拟请求，本次我们使用Mockjs，实现在基于Vue3项目的数据模拟。
1.安装Mockjs
Mockjs提供npm包，所以安装比较方便
复制
2.配置Mock
我们配置方法可以按照官方提供的，写的比较详细，这里我们稍微加点自己的方法，方便我们在添加mock模块的时候更加方便。
配置统一入口
在src文件夹下新建mock文件夹，文件夹中新建index.js，这个js文件作为统一入口文件，之后添加的所有的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);
}
});复制
main.js中导入
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入mock
require('./mock');
createApp(App)
.use(store)
.use(router)
.mount("#app");复制
3.编写模拟数据接口
编写请求数据方法
比如我们有个登录接口，一般我们会在src文件夹下新建api文件夹，里面定义我们所有的请求接口方法，这里，我们也不例外，src/api/basis/下新建login.js，内容如下：
import { liSend } from '@/utils/request'
// 测试请求
export const login = (obj) => { return liSend("post", "login", obj) };复制
这里面我们只关注，请求方式是post，url是login。
编写mock返回数据方法
src/mock/basis/下新建login.js，内容如下：
/******************
* 基础 - 登录 - mock
*****************/
// 登录
let Login = {
"code": 0,
"msg": "success",
"data": {}
}
export default {
/**
* 基础 - 登录
* @param： {}
* @returns：Promise {<pending>}
**/
'post|login': option => {
return Login
}
}复制
4.调用mock数据
新建组件
新建组件，组件内调用login方法，返回数据。
<template>
<div>请求数据：{{ state.loginMsg }}</div>
<button @click="loginBtn">获取mock数据</button>
</template>
<script>
import { reactive, provide } from "vue";
import { login as loginDemo } from "@/api/basis/login";
export default {
setup(props, context) {
const state = reactive({
loginMsg: {}
});
const loginBtn = () => {
loginDemo().then(res => {
state.loginMsg = res;
});
};
return {
loginBtn,
state
};
}
};
</script>复制
预览效果
