crm开发定制【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战

参考视频：

axios封装

安装：

npm install axios
1

在src下创建一个新文件夹utils，创建文件request.js，我们在这里面。

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

请求首页数据

封装完axios后，我们在src下建立一个新文件夹：api，并在其中创建文件index.js。我们将用它来请求数据。

import http from '../utils/request'// 请求首页数据,直接把这个对象导出export const getData = () => {    // 返回一个promise    return http.get('/home/getData')}
1
2
3
4
5
6
7

把它在Home中引入：

import {getData} from '../api/index'export default {    mounted(){        getData().then((data)=>{            console.log(data);        })    }}
1
2
3
4
5
6
7
8
9

启动服务看一下：显然是没有的。因为我们并没有后端服务。

接下来我们就要用来模拟后端的数据。

mock模拟数据

mock

文档：

安装：

npm install mockjs
1

在api中创建一个mock.js文件，用来定义mock拦截。

import Mock from 'mockjs'// 定义mock拦截Mock.mock('/api/home/getData',function(){    // mock的逻辑})
1
2
3
4
5
6

显然这里的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            }        }    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

最后注意要在main中import：

import './api/mock'
1

相关数据

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

柱状图：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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

饼图：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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果

这就是上面写的function的内容。mock模拟成功。

总代码

本篇创建的文件夹和文件如下，代码在文中：