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

参考视频： VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

axios封装

axios中文文档

安装：

npm install axios
1

在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
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模拟数据

mock

文档：Mock.js：生成随机数据，拦截 Ajax 请求

安装：

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模拟成功。

总代码

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