Vue3+TypeScript集成Mock的方法
作者：码农张3
这篇文章主要介绍了Vue3+TypeScript集成Mock的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
mock.js用来做什么
在项目开发中，会通过调用接口来获取数据，然后进行渲染。现在前后端分离开发，有时后端并不能够及时开发完成接口，这个时候我们就可以通过mock.js来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发，使项目可以正常进行，节约了宝贵时间，等到后端接口编写完毕后，再替换成真正的接口就方便快捷很多。
安装依赖
pnpm install -D vite-plugin-mock mock.js
注册插件
vite.config.ts
...
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
...
export default defineConfig(() => {
return {
plugins: [
vue(),
viteMockServe({
// mockPath: 'mock', // 默认
enable: true,
}),
],
}
})原代码
defineConfig({...})现在要改成defineConfig(() => {return{...}})
参考网址：https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
创建假接口
/mock/user.ts
// 用户信息数据，createUserList:此函数执行会返回一个数组,数组里面包含两个用户信息
function createUserList() {
return [
{
userId: 1,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'admin',
password: '111111',
desc: '平台管理员',
roles: ['平台管理员'],
buttons: ['cuser.detail'],
routes: ['home'],
token: 'Admin Token',
},
{
userId: 2,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'system',
password: '111111',
desc: '系统管理员',
roles: ['系统管理员'],
buttons: ['cuser.detail', 'cuser.user'],
routes: ['home'],
token: 'System Token',
},
]
}
//对外暴露一个数组:数组里面包含两个接口
//登录假的接口
//获取用户信息的假的接口
export default [
// 用户登录接口
{
url: '/api/user/login',//请求地址
method: 'post',//请求方式
response: ({ body }) => {
//获取请求体携带过来的用户名与密码
const { username, password } = body;
//调用获取用户信息函数,用于判断是否有此用户
const checkUser = createUserList().find(
(item) => item.username === username && item.password === password,
)
//没有用户返回失败信息
if (!checkUser) {
return { code: 201, data: { message: '账号或者密码不正确' } }
}
//如果有返回成功信息
const { token } = checkUser
return { code: 200, data: { token } }
},
},
// 获取用户信息
{
url: '/api/user/info',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
//查看用户信息是否包含有次token用户
const checkUser = createUserList().find((item) => item.token === token)
//没有返回失败的信息
if (!checkUser) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
//如果有返回成功信息
return { code: 200, data: { checkUser } }
},
},
]安装 axios
pnpm i axios
使用测试
/main.ts 临时测试
...
import axios from 'axios'
axios({
url: '/api/user/login',
method: 'post',
data: {
username: 'admin',
password: '111111'
}
})
app.mount('#app')到此这篇关于Vue3+TypeScript集成Mock的方法的文章就介绍到这了,更多相关Vue TypeScript集成Mock内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！