vue3.2/Vite/Ts14: mock接口
·
Yin灏
安装依赖
pnpm install -D vite-plugin-mock mockjs
在 vite.config.ts 中配置 mock
//...
import { viteMockServe } from "vite-plugin-mock";
//...
// command 用于获取当前开发的环境的,在正式环境不能使用 mock
export default defineConfig(({ command }) => {
return {
//...
plugins: [
//...
viteMockServe({
localEnabled: command === "serve",
}),
],
};
});
//...
创建 mock 数据存储文件夹
- 新建 根目录 / mock / user.ts
// user.ts
// 用户信息数据
function createUserList() {
return [
{
userId: 1,
avatar: 'http:xxxx.com/yyy.png',
username: 'admin',
password: '111111',
desc: '平台管理员',
roles: ['平台管理员'],
buttons: ['cuser.detail'],
routes: ['home'],
token: 'Admin 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) => {
const token = request.headers.token;
const checkUser = createUserList().find(item => item.token === token);
if(!checkUser) {
return {
code: 201,
data: {
message: '获取用户信息失败'
}
}
}
return {
code: 200,
data: {
checkUser
}
}
}
}
];
测试 mock 接口
// main.ts
import axios from "axios";
axios({
url: "/api/user/login",
method: "post",
data: {
username: "admin",
password: "111111",
},
});