十一、vue3+vite项目配置mock数据

一，安装mock

pnpm add mockjs

pnpm add vite-plugin-mock -D

 具体一些使用也可以参考官网：vite-plugin-mock

注意：

这里直接安装是会报错的，因为 默认安装的是3.0.0版本，启动会报错

require is not defined

所以我们指定安装版本

pnpm install vite-plugin-mock@2.9.6 -D

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

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

 viteMockServe 一些属性：

{
    mockPath?: string;  //设置mock .ts文件存储的文件夹
    ignore?: RegExp | ((fileName: string) => boolean);
    watchFiles?: boolean;
    enable?: boolean;   //是否开启mock功能
    ignoreFiles?: string[];
    configPath?: string;
}

在根目录创建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} }
        },
    },
]

二，安装axios

在根目录下创建utils/request.ts

//进行axios二次封装：使用请求与响应拦截器
import axios from 'axios'
//利用element-ui Message做消息提示

//利用axios对象的create方法创建一个新的axios对象
const service = axios.create({
  //设置基础路径
  baseURL: import.meta.env.VITE_APP_BASE_API as string, //VITE_BASE_API是在.env文件中定义的
  timeout: 5000, //设置超时时间
})

//请求拦截器
service.interceptors.request.use((config) => {
  //config配置对象，headers属性请求头，经常给服务器端携带公共参数
  return config
})

//响应拦截器
service.interceptors.response.use(
  (response) => {
    //response响应对象，data属性是服务器端返回的数据
    return response.data
  },
  (error) => {
    //失败的回调函数：处理http状态码不是200的情况
    //error对象中包含的信息：config请求配置对象，response响应对象，request请求对象
    //定义一个变量用于存储错误信息
    let message = ''
    //http状态码：400 401 403 404 500 501 502 503 504
    const status = error.response.status
    switch (status) {
      case 400:
        message = '请求参数错误'
        break
      case 401:
        message = '身份信息无效'
        break
      case 403:
        message = '没有操作权限'
        break
      case 404:
        message = '请求资源不存在'
        break
      case 500:
        message = '服务器内部错误'
        break
      case 503:
        message = '服务器正在维护'
        break
      case 504:
        message = '服务器超时'
        break
      default:
        message = '未知错误'
        break
    }
    //利用element-ui Message做消息提示
    ElMessage.error(message)
    //创建一个失败的promise对象
    return Promise.reject(error)
  },
)

//对外暴露一个service对象
export default service

在APP.vue中测试一下：

 这里不需要写完整的地址，因为在request.js中已经配置了baseURL:/api

<template>
  <div></div>
</template>

<script setup lang="ts">
import request from '@/utils/request'

//当组件挂载完毕后尝试发送一个的请求
onMounted(() => {
  request({
    url: '/user/login', //这里不需要写完整的地址，因为在request.js中已经配置了baseURL:/api
    method: 'post',
    data: {
      username: 'admin',
      password: '111111',
    },
  })
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })
})
</script>

<style scoped></style>

 浏览器返回数据：