想使用Go+Vue3来写一个后台管理系统,所以最近抽空研究学习了一下Vue3,由于是前后端分离开发的,前端使用Mock来模拟API及反馈。
笔者使用的是Vue3+Vite+TypeScript,所以要想使用Mock,需要在vite.config.ts
中使用:
import { viteMockServe } from 'vite-plugin-mock'
来导入vite-plugin-mock
,然后根据模式来决定是否启用Mock,一般只有开发模式才启用Mock,正式的产品就应该使用后端数据:
export default defineConfig(({ command, mode } : ConfigEnv) : UserConfig => ({
plugins: [
viteMockServe({
mockPath: 'mock',
enable: mode === 'development'
})
],
}))
通过上面的代码即可在项目根目录下创建一个mock目录,写需要模拟的API及相应的处理代码了。比如mock/user.ts
:
import { MockMethod } from 'vite-plugin-mock'
const arUsers = [
{
userId: 1,
username: 'admin',
password: 'admin',
token: 'admin'
},
{
userId: 2,
username: 'test',
password: 'test',
token: 'test'
}
]
const arMock: MockMethod[] = [
// 用户登录接口
{
url: '/api/user/login', //请求地址
method: 'post', //请求方式
response: ({ body }) => {
console.log('登录', body)
//获取请求体携带过来的用户名与密码
const { username, password } = body
//调用获取用户信息函数,用于判断是否有此用户
const checkUser = global.arUsers.find(
(item) => item.username === username && item.password === password
)
//没有用户返回失败信息
if (!checkUser) {
return { code: 201, message: '账号或者密码不正确' }
}
//如果有返回成功信息
return { code: 200, data: { user: checkUser} }
}
}
]
export default arMock
不过笔者遇到一个问题,前端的Vue代码都可以使用VSCode进行调试,但是Mock中response
的代码不能直接打断点进行调试,可以看到,打的断点是灰色的。
这就需要在vite-plugin-mock/dist/index.mjs
中,调用response
的地方先打一个断点:
然后在调试时,单步进入即可调试Mock中的代码了:
只要调试时步进过该Mock文件,就可以打断点了,如果后面断点为灰了,可以再次这样操作即可。