文章目录
- axios封装
- 请求首页数据
- mock模拟数据
- mock
- 相关数据
- tableData
- 柱状图：userData
- 饼图：videoData
- 效果
- 总代码
参考视频：
VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目
案例 | 链接 |
【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16） | |
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19） | |
【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22） | |
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25） | |
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30） | |
【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35） | |
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38） | |
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42） | |
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44） | |
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46） | |
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48） | |
【前端】Vue+Element UI案例：通用后台管理系统-项目总结 |
axios封装
安装：
npm install axios在src下创建一个新文件夹utils，创建文件request.js，我们在这里面封装axios。
import axios from "axios";
// 封装一个axios实例
const http = axios.create({
// 通用请求的地址前缀
baseURL: '/api',
// 超时时间
timeout: 100000
})
// 请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做什么
return config;
}, function (error) {
// 对请求错误做什么
return Promise.reject(error);
})
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 对响应数据做什么
return response;
}, function (error) {
// 对响应错误做什么
return Promise.reject(error);
})
export default http请求首页数据
封装完axios后，我们在src下建立一个新文件夹：api，并在其中创建文件index.js。我们将用它来请求数据。
import http from '../utils/request'
// 请求首页数据,直接把这个对象导出
export const getData = () => {
// 返回一个promise
return http.get('/home/getData')
}把它在Home中引入：
import {getData} from '../api/index'
export default {
mounted(){
getData().then((data)=>{
console.log(data);
})
}
}启动服务看一下：显然是没有的。因为我们并没有后端服务。
接下来我们就要用mock来模拟后端的数据。
mock模拟数据
mock
文档：Mock.js：生成随机数据，拦截 Ajax 请求
安装：
npm install mockjs在api中创建一个mock.js文件，用来定义mock拦截。
import Mock from 'mockjs'
// 定义mock拦截
Mock.mock('/api/home/getData',function(){
// mock的逻辑
})显然这里的function是会随着要拦截的网址的不同而不同的，我们最好把它封装起来。
home.js:
// mock数据模拟
import Mock from 'mockjs'
// 导入数据
import videoData from '../../data/mockData/videoData'
import userData from '../../data/mockData/userData'
import tableData from '../../data/mockData/tableData'
// 图表数据
let List=[]
// 直接导出
export default {
getStatisticalData: () => {
//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
for (let i = 0; i < 7; i++) {
List.push(
Mock.mock({
苹果: Mock.Random.float(100, 8000, 0, 0),
vivo: Mock.Random.float(100, 8000, 0, 0),
oppo: Mock.Random.float(100, 8000, 0, 0),
魅族: Mock.Random.float(100, 8000, 0, 0),
三星: Mock.Random.float(100, 8000, 0, 0),
小米: Mock.Random.float(100, 8000, 0, 0)
})
)
}
// 返回给浏览器的数据
return {
code: 20000,
data: {
// 饼图
videoData,
// 柱状图
userData,
// 折线图
orderData: {
date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
data: List
},
tableData
}
}
}
}最后注意要在main中import：
import './api/mock'相关数据
tableData
const tableData = [
{
name: 'oppo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000
},
{
name: '苹果',
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000
},
{
name: '小米',
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000
},
{
name: '三星',
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000
},
{
name: '魅族',
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000
}
]
export default tableData柱状图：userData
// 柱状图
const userData = [
{
date: '周一',
new: 5,
active: 200
},
{
date: '周二',
new: 10,
active: 500
},
{
date: '周三',
new: 12,
active: 550
},
{
date: '周四',
new: 60,
active: 800
},
{
date: '周五',
new: 65,
active: 550
},
{
date: '周六',
new: 53,
active: 770
},
{
date: '周日',
new: 33,
active: 170
}
]
export default userData饼图：videoData
// 饼图
const videoData = [
{
name: '小米',
value: 2999
},
{
name: '苹果',
value: 5999
},
{
name: 'vivo',
value: 1500
},
{
name: 'oppo',
value: 1999
},
{
name: '魅族',
value: 2200
},
{
name: '三星',
value: 4500
}
]
export default videoData效果
这就是上面写的function的内容。mock模拟成功。
总代码
本篇创建的文件夹和文件如下，代码在文中：
