Vue3 -- mock数据完整配置并调试【项目集成6】

引言：

‌Mock在前端开发中的作用主要是模拟后端接口数据，以便前端开发者能够提前进行页面和功能的开发、调试，而无需等待后端提供真实的接口数据‌。Mock数据可以加速前后端开发的协同，避免因数据延迟导致的开发阻塞‌。【摘自百度】

配置mock：

安装依赖：

pnpm install -D vite-plugin-mock mockjs

vite-plugin-mock和mockjs都要安装,如上。

配置mock:

打开vite.config.js文件，进行配置：
其中官网提到，这个配置要暴露一个箭头函数，箭头函数返回一个配置对象。于是我们需要将配置对象改成箭头函数的形式。这里的 {command} 是用来检测当前开发环境的，即回调函数中我们注入一个command 来检测环境。保证了在开发阶段可以使用mock接口。也可以点击这里看官网自行配置。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 引入mock接口需要的插件
import { viteMockServe } from 'vite-plugin-mock'
// 引用svg需要的插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig(({command})=>{
  return {
    plugins: [
    vue(),
    viteMockServe({
      localEnabled: command === 'serve',// 保证开发阶段可以使用mock接口
    }),
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      // Specify symbolId format
      symbolId: "icon-[dir]-[name]"
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src") // 相对路径别名配置，使用 @ 代替 src
    }
  },
  // scss全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";'
      }
    }
  }
  }
});

使用mock：

在根目录下创建mock文件夹，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} }
        },
    },
]

测试使用mock数据：

安装axios：

pnpm install axios

测试：

我们在main.ts文件下写测试代码：

我们发现可以请求到假的数据：


并且如果我们输入错误的密码，返回的也是我们所期待的：