- 下载
npm install mockjs
- mock文件放置位置
一般习惯将mock内容放到src文件外
- 使用
// index.js
import Mock from 'mockjs' //导入mockjs
import {result} from './result'
Mock.mock('/jianyemini/groupOptions', 'get', {
data:{
...result.user.config //返回结果的配置
}
})
// 可以使用正则来对url进行匹配
Mock.mock(//api/users/(\d+)/, 'GET', function(options) {
const userId = options.url.match(//api/users/(\d+)/)[1];
// 使用提取的参数进行处理
// 返回相应的数据
});
接口返回结果内容规则
// result.js
export const result = {
user: {
config:"list|8": [{ // 生成8条数组元素
"id|+1": 1, // 自增
"mail": "@cname", // 随机名称
"userNumber|5": "123456", // 5个初始字符串
"module|1-2": 1, // 1-2随机
"group|1-2": 1,
"isAdmin|1-2": 1,
"moduleAuth|1": [1,2,3]
}]
}
}
将mock/index/js文件直接导入到main.js中
// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import elementUse from '@/assets/element-plus'
import '@/assets/scss/element-plus.scss'
import '../mock' // 将mock对象导入main.js 或则是main.ts
const app = createApp(App)
app.config.globalProperties.$PublicPath = import.meta.env.VITE_PUBLIC_PATH
app.use(createPinia())
app.use(router)
elementUse(app)
app.mount('#app')
axios的拦截请求和响应可能会对模拟数据的返回造成影响，axios中的baseUrl并不会对mock产生任何影响，不写也可以正常模拟数据。
// axios文件
import axios from 'axios'
const service = axios.create({
baseURL: baseUrl, // 这里不设置url也不会影响数据模拟请求
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
})
export default service
可以直接使用aioxs来实现数据模拟了
// 配合axios来直接调用config接口
const getConfig = ()=>{
getGroupOptions().then((res: any) =>{ // 模拟数据结果返回 })
}
【总结】：
- mock文件下将mock接口及对应的配置写好
- 在main.js 或则 main.ts中将整个文件
import '../mock导入 - 直接在其他文件中通过
aioxs来调用请求，调用方式和不使用mock一样
【相关链接】
