Vue Element Admin 用mock模块模拟数据

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

步骤简单

一  在 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 

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值