vue3 mock接口

以下基于mock的vite-plugin-mock版本为2.9.6实现，其他版本有可能导致报错

1. 安装依赖：https://www.npmjs.com/package/vite-plugin-mock

pnpm install -D [email protected] mockjs

2. 在vite.config.js配置文件启动插件

// mock插件提供的方法
import { viteMockServe } from "vite-plugin-mock";
// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === "serve"
      })
    ],
  };
});

3.新建mock文件夹，新建user.ts文件，模拟接口

// 用户信息数据
function createUserList() {
  return [
    {
      userId: 1,
      userName: "admin",
      password: "123123",
      desc: "平台管理员",
      roles: ["平台管理员"],
      buttons: ["cuser.detail"], // 按钮权限标识
      routes: ["home"], // 路由权限标识
      token: "Admin Token"
    },
    {
      userId: 2,
      userName: "system",
      password: "123456",
      desc: "系统管理员",
      roles: ["系统管理员"],
      buttons: ["cuser.detail", "cuser.user"],
      routes: ["home"],
      token: "System Token"
    }
  ];
}

// 对外暴露一个数组：数组里面包含两个接口
// 1. 登录接口  2. 获取用户信息接口
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 } };
    }
  }
];

4. 安装axios

pnpm i axios

5. 可以在main.ts中，简单测试以上接口

// 测试代码：测试假的接口能否使用
import axios from "axios";
axios({
  url: "/api/user/login",
  method: "post",
  data: {
    userName: "admin",
    password: "123123"
  }
});

6. 效果

成功

失败