Vue Element Admin 用mock模块模拟数据

步骤简单

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

四在页面上调用

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"}]});});

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

TIP：最后几个注意的点

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

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

Vue Element Admin 用mock模块模拟数据相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Mock.mock()生成模拟数据
在做前端项目时,如果没有测试数据,可以通过mock来生成模拟数据. Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模 ...
微信小程序——使用mock.js模拟数据
一,创建目录再根目录utils目录下面创建 WxMock.js文件和api.js文件二,WxMock.js WxMock.js下载地址:https://github.com/webx32/WxMo ...
vue@3-cli使用mock.js模拟数据.........
第一步:项目路径下执行命令: npm install --save mockjs第二步:main.js统计目录简历mock文件夹 mock.jsconst Mock = require('mockjs ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...

Vue Element Admin 用mock模块模拟数据

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

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

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

四在页面上调用

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

TIP：最后几个注意的点

Vue Element Admin 用mock模块模拟数据相关推荐

最新文章

热门文章

Vue Element Admin 用mock模块模拟数据

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

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

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

四 在页面上调用

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

TIP：最后几个注意的点

Vue Element Admin 用mock模块模拟数据相关推荐

最新文章

热门文章

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

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

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

四在页面上调用

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