Vue Element Admin 用mock模块模拟数据

最新推荐文章于 2025-10-05 07:17:39 发布

原创

最新推荐文章于 2025-10-05 07:17:39 发布 · 4.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#mock模拟数据 #vue模拟数据

本文详细介绍了如何在Vue Element Admin项目中使用Mock模块模拟数据，包括在src/api/charts添加接口，创建mock接口，配置index.js文件，以及在页面上调用和检查接口请求结果。同时，提到了注意事项，如vue.config.js和.env.development中需使用Mock的地址以避免404错误。

步骤简单

一在 src/api/charts 中添加接口，方法名为 getindexMock

import request from '@/utils/request'

export function getindexMock(params) {
  console.log(params)
  return request({
    url: '/charts/one',
    method: 'get',
    params
  })
}

二在 mock 文件夹里，添加 charts.js ，并创建 mock 接口

import Mock from 'mockjs'

export default [
  {
    url: '/charts/one',
    type: 'get',
    response: _ => {
      return {
        code: 20000,
        xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        ydata: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    }
  },
]