vue3实战-----使用mock模拟接口数据

1.安装和配置

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

pnpm install -D vite-plugin-mock mockjs

在 vite.config.js 配置文件启用插件:

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
//这里用到了箭头函数,需要把之前的格式改一下,之前里面传的是对象，现在传的是箭头函数
export default (({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        //表示开发时候用mock数据
        localEnabled: command === 'serve',
      }),
    ],
  }
}

上面的localEnabled可能会报错-----viteMockServe({ localEnabled: command === ‘serve’, }) 类型“{ localEnabled: boolean; }”的参数不能赋给类型“ViteMockOptions”的参数。对象字面量只能指定已知属性，并且“localEnabled”不在类型“ViteMockOptions”中。
解决方法如下:
卸载vite-plugin-mock:

npm uninstall vite-plugin-mock

重新安装 2.9.6版本

npm install mockjs vite-plugin-mock@2.9.6 -D

就可以完美解决。

2.创建mock数据

在根目录创建mock文件夹:

在mock文件夹内部创建一个user.ts文件:

//用户信息数据
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} }
        },
    },
]

3.使用axios测试

安装axios:

npm install axios

在main.ts入口文件中写一些测试代码:

import axios from "axios";
axios({
  url: "/api/user/login",
  method: "post",
  data: {
    username: "admin",
    password: "111111",
  },
}).then((res) => {
  console.log(res.data);
});

去浏览器查看控制台:

说明mock数据生效。