vue3后台管理框架之Mock开发

前言

在前后端对接中，有时后端的接口数据没有 那么快能给出，因此我们可以通过mock模拟自己的请求数据，在后端接口没有给出的同时，先使用mock请求的数据完成前端相关的逻辑

官方文档：vite-plugin-mock

vite 的数据模拟插件，是基于 vite.js 开发的。 并同时支持本地环境和生产环境。 Connect 服务中间件在本地使用，mockjs 在生产环境中使用

安装依赖

pnpm add vite-plugin-mock@2.9.6 mockjs@1.1.0 -D

配置

新建mock测试文件 mock/example.ts

export default [
  {
    url: '/mock/getMapInfo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        title: 'mock请求测试'
      }
    }
  }
]

如果是mock的请求，建议大家以 /mock 开头

vite.config.js

//vite.config.js
    import { viteMockServe } from 'vite-plugin-mock'
    plugins: [
    vue(),
    viteMockServe({
    supportTs: true, //是否开启支持ts
    mockPath: 'mock', //设置mockPath为根目录下的mock目录,为根目录
    localEnabled: command === 'serve', //设置是否监视mockPath对应的文件夹内文件中的更改
    prodEnabled: true, //prod环境下是否可以使用mock
    logger: true //是否在控制台显示请求日志
    })
    ],

此时 开发环境的mock 已经配置好了，如果需要配置生产环境还需要下面的配置

使用

当然了我们需要先下载axios依赖

pnpm add axios@0.21.3 -S

src/views/dashboard/index.vue

<script setup>
  import axios from 'axios'
  const listReq = () => {
    axios.get('/mock/getMapInfo').then((res) => {
      if (res.data) {
        console.log(res.data)
        alert(res.data.title)
      }
    })
  }
script>

测试

 
<template>
  <div class="box">
    <el-button type="primary" size="default" :icon="Check">朱啊el-button>
    <h1>11111h1>
    <SvgIcon name="phone" />
  div>
  <div class="test">11111div>
 
  <button @click="listReq">listReqbutton>
template>
 
<style scoped lang="scss">
.test {
  background-color: $base-background;
  width: 100px;
  height: 100px;
}
.box {
  width: 200px;
  height: 200px;
  background-color: beige;
 
  h1 {
    color: red;
  }
}
style>

模拟用户数据接口

在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} }
    },
    },
    ]