Mock的使用

---

前言

前端生产环境，mock模拟数据接口
官网：https://gitee.com/sela0629/vite-plugin-mock/tree/main

---

一、Mock的安装

1.安装mockjs

#mock依赖于mockjs，所以需要安装mockjs
yarn add mockjs
# or
npm i  mockjs -S

2.安装vite-plugin-mock

yarn add vite-plugin-mock -D
# or
npm i vite-plugin-mock -D

---

二、配置

1.vite.config.ts 配置

方法一

官方配置：

import { UserConfigExport, ConfigEnv } from 'vite';

import { viteMockServe } from 'vite-plugin-mock';
import vue from '@vitejs/plugin-vue';

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
    ],
  };
};

方法二

个人项目中的配置

// 引入mock插件
import { viteMockServe } from "vite-plugin-mock";
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === "serve",
      }),
    ],
  };
});

说明：
此配置需要vite-plugin-mock版本为2.9.6，官方最新版本为3.0.0。

可以运行以下命令安装2.9.6版本

npm i vite-plugin-mock@2.9.6

---

三、项目中的使用

1.根目录新建mock文件夹，用来存放接口数据

2.添加接口数据

// 用户列表数据
function createUserList() {
    return [
        {
            userId: 1,
            username: "admin",
            password: "111111",
            avatarUrl: "../public/bg1.jpg",
            desc: "超级管理员",
            buttons: [""],
            routes: ["home"],
            token: "Admin",
        },
        {
            userId: 2,
            username: "system",
            password: "111111",
            avatarUrl: "../public/bg1.jpg",
            desc: "系统管理员",
            buttons: [""],
            routes: ["home"],
            token: "System",
        },
    ];
}

export default [
    // 用户登录接口
    {
        url: "/api/user/login",
        methods: "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",
        methods: "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模拟接口数据，相较于正常的后端接口创建较为简单，省略了数据库，完整项目还是推荐使用正常的后端服务。