Vue Element Admin 使用mock模块模拟数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞。
vue-element-admin项目的所有请求都是通过封装的request.js进行发送的,所有的请求都设置了一个baseURL,而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的。
在vue element admin 的模板当中,所有的数据都是模拟实现的,这里可以仿照着它模拟数据的流程进行数据的模拟mock。如果你想添加 mock 数据,只要在根本录下找到mock文件,添加对应的路由,对其进行拦截和模拟数据即可。
比如我现在在src/api/charts 中需要添加一个获取图表数据的接口 ,首先新建接口:
import request from '@/utils/request'
export function getChartData() {
return request({
// 用这种方式直接走的是
url: '/charts/one',
method: 'get',
})
}
声明完接口之后,我们需要找到对应的 mock 文件夹mock/article.js,在下面创建一个能拦截路由的 mock 接口
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]
}
}
},
]
最后在页面当中调用我们的方法
// 1. 引入api中的方法
import { getChartData } from "@/api/charts";
// 2.调用方法
getChartData().then(response => {
this.chart.setOption({
xAxis: {
type: "category",
// 绑定数据
data: response.xdata
},
yAxis: {
type: "value"
},
series: [
{
// 绑定数据
data: response.ydata,
type: "line"
}
]
});
});
在浏览器中查看是否发送请求获取数据成功:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)