Vue Element Admin 用mock模块模拟数据

朱雀 2023-05-30 03:57 247阅读 0赞

步骤简单

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

## **三 找到 mock 文件夹里面的 index.js 文件，调用 charts.js ** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

## **四 在页面上调用** ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

## **五  查看接口请求结果，可以看到这里请求的数据和我们上面自己写的是一样的** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

## **TIP：最后几个注意的点** ##

1.  vue.config.js  这里的接口地址必须是mock的地址，不能是后端真正给的地址，否则会报404

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

2.   .env.development 这里也必须用测试的地址，而不能用真正的地址，否则一样会报404

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107113949892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107133415481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191107133910176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191107134327604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191107134743917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70