Vue3项目使用mockjs模拟数据

一、下载安装mockjs 和vite-plugin-mock插件

npm i -D  vite-plugin-mock mockjs 

二、在 vite.config.ts 文件中添加 mock 配置项（ 配置项添加在 plugins 中 ）

import { viteMockServe } from 'vite-plugin-mock'  // 引入 mock 插件提供的方法
 
 
export default defineConfig(( { command } )=>{
  return {
    plugins: [
      vue(),
      AutoImport({
        ...略,
      }),
      Components({
        ...略,
      }),
      createSvgIconsPlugin({
        ...略,
  
      }),
 
      // mock 配置项
      viteMockServe({
        mockPath:'mock',
        localEnabled:command === 'serve',
      }),
  
       ],
    },
  }
})

注意：

如果 localEnabled:command === 'serve', 报错 ：对象字面量只能指定已知属性，并且“localEnabled”不在类型“ViteMockOptions”中

可能是 vite-plugin-mock 插件的版本问题，可以卸载后重新安装新版本。

npm uninstall vite-plugin-mock   // 卸载

npm install mockjs vite-plugin-mock@2.9.6 -D     // 安装新版本

三、在项目根目录下创建 mock 文件夹，mock 文件夹下创建 user.ts 文件（ 文件名可自定义 ）

function createUserList(){
 
  return [
 
    {
      userId:1,
      avatar:'../src/assets/image/man.png',   // 头像
      username:'admin',   // 用户名
      password:'111111',   // 用户密码
      desc:'平台管理员',   //角色
      roles:['平台管理员'],
      buttons:['cuser.detail'],   // 按钮权限
      routes:['home'],   // 路由权限
      token:'Admin Token',
    },
    {
      userId:2,
      avatar:'../src/assets/image/man.png',   // 头像
      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 } }
 
    },
  },
 
]

四、配置完成后可在页面进行测试。

<template>
 
  <h1>哈哈哈</h1>
 
 
</template>
 
<script setup lang="ts">
 
 
// 测试 mock
import axios from 'axios'   // 引入axios
axios({
  url:'/api/user/login',
  method:"post",
  data:{
    username:'admin', 
    password:'111111', 
  }
})
 
 
</script>
 
<style scoped lang="scss">
 
</style>

网页上即可看见发送的请求

二 使用

1 模拟接口

export default [
  {
    //获取搜索标签
    url: '/api/ceshi', // 请求地址
    method: 'post',
    response: () => {
      return [
        {
          userId: 1,
          avatar: '../src/assets/image/man.png', // 头像
          username: 'admin', // 用户名
          password: '111111', // 用户密码
          desc: '平台管理员', //角色
        },
        {
          userId: 2,
          avatar: '../src/assets/image/man.png', // 头像
          username: 'system', // 用户名
          password: '111111', // 用户密码
        },
      ]
    },
  },
]

 2使用

<template>
  <div class="service_parameters"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const tableList = ref([])
const getList = async () => {
  const res = await axios({
    url: '/api/ceshi',
    method: 'post',
    data: {
      username: 'admin',
      password: '111111',
    },
  })
  tableList.value = res.data
}
onMounted(() => getList())
</script>
<style scoped>
.service_parameters {
  background: #ffffff;
  border-radius: 3px 0 0 3px;
  padding: 16px 20px;
}
</style>