Vue3 使用 mockjs 模拟api数据

mockjs 介绍

Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的前端工具库，通常用于模拟数据接口，帮助开发者在没有后端支持的情况下进行前端开发和测试。它可以生成各种格式的随机数据，定义数据模板，甚至拦截和模拟 HTTP 请求。

mockjs 官方Wiki

基本使用

vue的项目结构

   src
    ├─api            api 相关的  mock 也放到此目录
    ├─assets        网站静态资源
    ├─components    组件
    ├─router        路由
    ├─types         类型
    ├─utils         帮助工具类型 
    └─views         页面 

网站访问，经过 router 路由转发，访问具体 views。

设置api模拟：

// mock.ts 
import Mock from 'mockjs'

Mock.mock('/mockapi/menus','get',[
  {
    key:'home',
    label:'Home',
    icon:'HomeOutlined'
  },
  {
    key:'about',
    label:'About',
    icon:'BarsOutlined'

  },
  {
    key:'icons',
    label:'Antd Vue Icons',
    icon:'BarsOutlined'

  }
])

api 访问：

/**
 * 创建 Axios 实例
 */
const api: AxiosInstance = axios.create({
  baseURL: '/mockapi', // API 基础路径
  timeout: 10000, // 超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});


... 

await api.get<MenuItem[]>('/menus')
    .then(
      (response) => {
        // 打印获取到的原始数据
        console.log('原始菜单数据:', response.data);
        // 对每一项菜单数据进行处理
        const processedMenus = response.data.map((item: MenuItem) => {
          // 假设我们要为每个菜单项添加一个 `title` 属性
          return MenuUtils.transMenuItem2ItemType(item);
        });
        // 返回处理过的菜单数据
        menuItems.value = processedMenus;
      }
    ).catch(
      (error) => {
        console.error('Failed to get menu:', error);
      }
    );