从vue到elementUI项目（四）

文章目录

XX课堂后台视频管理理系统之首页开发
- 介绍mock.js及axios全局配置
- 随机生成数据
- 使用element布局组件实现首页布局
- 完成首页除图表外的内容
- - 完成左边用户头像和登录信息
  - 完成右边显示数据
- 完成首页table部分及ECharts介绍
- - 首页table部分
  - ECharts的使用
- 谈封装一个EChart组件的一些想法
- 上手封装一个EChart组件并处理数据展示图表
- 修改EChart组件样式及自适应图表
- - 修改EChart组件样式
  - 完成自适应图表
  - 完成对侧边菜单的标题
- Echart组件封装总结
全文所涉及的代码下载地址

XX课堂后台视频管理理系统之首页开发

介绍mock.js及axios全局配置

Mock.js

作用：生成随机数据，拦截ajax请求
安装与axios：

yarn add mockjs -S
yarn add axios -S

核心：

Mock.mock()

// 根据数据模板⽣生成模拟数据
Mock.mock( rurl, rtype, template)
/*
** rurl: 表示需要拦截的 URL，可以是 URL 字符串串或 URL 正则
** eg. /\/domain\/list\.json/、'/domian/list.json'
*/

Mock.Random()：随机生成数据

先在项目中对axios进行实例配置，在src中新建api文件夹，存放config.js，内容如下

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
    // 请求超时时间
    timeout: 3000
})

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        console.log(err)
    }
)

service.interceptors.response.use(
    response => {
        let res = {}
        res.status = response.status
        res.data = response.data
        return res
    },
    err => console.log(err)
)

export default service

在main.js中引入这个config，并挂载到vue上

...
import http from '@/api/config'
// 挂载在Vue实例上
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$http = http // 这样以后就能通过this.app调用axios实例了
...

随机生成数据

新建mock文件夹
配置mock请求时间
新建home.js存放主页的数据
安装mock的语法生成数据

新建mock文件夹，存放home.js，设置模拟返回接口的数据

import Mock from 'mockjs'

export default {
  getHomeData: () => {
    return {
      code: 20000,
      data: {
        videoData: [
          {
            name: 'SpringBoot',
            value: Mock.Random.float(100, 8000, 0, 2),
          },
          {
            name: '小程序',
            value: Mock.Random.float(100, 8000, 0, 2),
          }
        ],
      },
    }
  },
}

同路径下新建index.js，对mock进行配置，设置拦截的请求信息以及返回data

import Mock from 'mockjs'
import homeApi from './home.js'

// 设置200-2000毫秒延时请求数据
Mock.setup({
  timeout: '200-2000',
})

// 首页相关
// 拦截的是 /home/getData
Mock.mock(/\/home\/getData/, 'get', homeApi.getHomeData)

最后在main.js引入这个mock/index.js进行初始化

...
import http from '@/api/config'
import './mock' // 配置mock/index.js
...

在Home/Home.vue中，加载首页后，调用这个接口，返回模拟数据

...

...

使用element布局组件实现首页布局

主要是选择组件和调整css样式

首先我们新建一个home对应的scss，在assets/scss新建home.scss

.home {
...先不填
}

再来配置Home.vue中的布局，先看卡最终效果

基本都是使用卡片布局，然后微调一些css样式

微调的home.scss代码如下

.home {

    // background-color: #000;
    .num {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .el-card {
            width: 32%;
            margin-bottom: 20px;
        }
    }

    .graph {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .el-card {
            width: 49%;
        }
    }
}

完成首页除图表外的内容

完成左边用户头像和登录信息

登录信息直接写死

...

对这一块的css进行微调，在home.scss中调整

.home {
...
    .user {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;

        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 40px;
        }
    }

    // 等同于.userinfo
    &info {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }

    // 用户头像下面的登录时间
    .login-info {
        p {
            line-height: 28px;
            font-size: 16px;
            color: #999999;

            span {
                color: #666666;
                margin-left: 60px;
            }
        }
    }
...
}

可以看到目前的效果为

完成右边显示数据

...
  data() {
    return {
      userImg: require('../../assets/images/user.png'),
      countData: [
        {
          name: '今日支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9',
        },
        {
          name: '今日收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980',
        },
        {
          name: '今日未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef',
        },
        {
          name: '本月支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9',
        },
        {
          name: '本月收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980',
        },
        {
          name: '本月未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef',
        },
      ],
    }
  },
...

通过v-for循环，渲染页面