vue element admin 使用mock

vue element admin使用mock的步骤如下:

1. 在项目的src/api文件夹下创建一个charts.js文件，添加getindexMock方法，该方法用于发送请求获取数据。具体代码如下：

import request from '@/utils/request'

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

2. 在项目的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]
      }
    }
  }
]

3. 找到mock文件夹里的index.js文件，在该文件中调用charts.js。具体代码如下：

import chartsMock from './charts'

export default [
  ...chartsMock
]

4. 在需要使用mock数据的页面中引入getindexMock方法，然后调用该方法获取数据，并将数据绑定到页面上的图表中。具体代码如下：

import { getindexMock } from "@/api/charts";

// 在需要使用数据的地方调用getindexMock方法
getindexMock().then(response => {
  this.chart.setOption({
    xAxis: {
      type: "category",
      data: response.xdata // 绑定x轴数据
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        type: "line",
        data: response.ydata // 绑定y轴数据
      }
    ]
  });
});

通过以上步骤，你就可以在vue element admin中使用mock来模拟数据了。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *3* [Vue Element Admin 用mock模块模拟数据](https://blog.csdn.net/Hero_rong/article/details/102952251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [Vue Element Admin 使用mock模块模拟数据](https://blog.csdn.net/qq_43081842/article/details/100150327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]