上一篇文件我们介绍了Mockjs的基本用法–Mockjs之后端兄弟不给力只能靠自己了,这篇文件就讲点实际开发中的用法
如果你的前端项目中有上百个接口时,就不能把模拟数据的代码写在业务代码里面,这个时候就需要将Mock数据单独放在一个模块中,并根据生产环境还是开发环境来决定是否启动mock模块
创建Mockjs模块
在项目src中创建mock文件夹,创建三个文件:index.js、user.js、login.js
// user.js
import Mock from 'mockjs'
// `/api/getUsers`
Mock.mock(/\/api\/getUsers/, 'get', option => {
// get请求的参数可以在option.url中获取
console.log(option.url);
return {
'data|10-20': [{
'id|+1': 1,
'name': '@cname',
'age|18-30': 0,
'email': '@email',
'phone': /^1[3456789]\d{9}$/
}]
}
})
// login.js
import Mock from 'mockjs'
// /api/login
Mock.mock('/api/login', 'post', option => {
console.log(option);
// 传入的参数在body里面,这里不做处理
// if (option.body){
// }
return Mock.mock({
'token|32': '@string'
})
})
在index.js中引入上面两个文件
// index.js
// 登录相关接口
import './login'
// 用户信息相关接口
import './user'
使用 import 动态加载了 mock/index.js 文件,并使用 import.meta.env.DEV
来判断当前环境是否为开发环境。如果是开发环境,则加载 Mockjs;如果是生产环境,则不加载 Mockjs。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 项目使用vite创建,如果是其他方式创建的项目,判断环境的方式可能不一样
if (import.meta.env.DEV) {
await import('./mock')
}
createApp(App).mount('#app')
最后在页面中进行测试
<script setup>
import axios from "axios";
import {ref} from "vue";
const token = ref()
axios.post('/api/login', {
userName: 'admin',
password: '123456'
}).then(res => {
token.value = res.data.token
console.log(res);
})
axios.get('/api/getUsers?userName=admin').then(res => {
console.log(res);
})
</script>
<template>
<div>{{token}}</div>
</template>
这样我们完成了Mockjs的模块化开发
附上源码下载地址
有人任何问题都可以在评论区留言交流,相互学习