基于Vue-element-template的后台管理系统首页页面设计（导航栏）

我在山的这边
429 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

1、首页功能前端开发

这一块也就是对应的我们的首页，刚一进来就能直观看到的，我们尽量做的美观一点，逼格高一点。

首先我们首页的顶部先放四个导航菜单，用来展示我们的一些重要的数据。

下面的开发我先写前端页面布局完成之后，再去写后端的代码。

1.1、顶部导航

这里使用了vue-element-admin的首页的功能。打开我们的前端项目，然后找到/views/dashboard。

然后我们引入一个组件，这个导航菜单已经封装成了一个组件。

在dashboard文件下新建一个components文件夹，然后创建一个文件PanelGroup.vue

<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            文章数量
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            分类数量
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            标签数量
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            用户数量
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
​
<script>
import CountTo from 'vue-count-to'
​
export default {
  components: {
    CountTo
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>
​
<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;
​
  .card-panel-col {
    margin-bottom: 32px;
  }
​
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
​
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
​
      .icon-people {
        background: #40c9c6;
      }
​
      .icon-message {
        background: #36a3f7;
      }
​
      .icon-money {
        background: #f4516c;
      }
​
      .icon-shopping {
        background: #34bfa3
      }
    }
​
    .icon-people {
      color: #40c9c6;
    }
​
    .icon-message {
      color: #36a3f7;
    }
​
    .icon-money {
      color: #f4516c;
    }
​
    .icon-shopping {
      color: #34bfa3
    }
​
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
​
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
​
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
​
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
​
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
​
@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }
​
  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
​
    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
​

然后去dashboard目录下的index.vue中引入该组件。

import PanelGroup from './components/PanelGroup'
​
export default {
  name: 'Dashboard',
  components: {
    PanelGroup
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}

这时控制台会报一个错误

image.png

此时我们要执行：npm install --save vue-count-to即可。

执行完之后，我们在引入该组件。

<panel-group ></panel-group>

此时页面上就已经有数据了，我们进行改造一下页面。

image.png

可以看到上边还缺少图标和描述之类的，这个是在组件里修改，打开PanelGroup.vue修改。

<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="documentation" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            文章数量
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="component" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            分类数量
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="icon" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            标签数量
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="people" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            用户数量
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
​

图标的话，可以去官网上查找或者从这里查找，然后将图标下载放到自己项目的svg目录下即可。panjiachen.github.io/vue-element…

改造完之后是这样的页面

image.png

1.2、ECharts入门

这里先介绍一下echarts

官网：echarts.apache.org/zh/index.ht…

什么是echarts？

它是一个基于 JavaScript 的开源可视化图表库，可以用于我们对数据分析的可视化展示，是我们的数据在图表中清晰可见，一般领导比较喜欢看这种分析的图表。

具体的如何使用这里不再一一讲述了，可以查看官方给的文档，有快速上手的教程可以学习。

1.3、数据图表

这里我们先安装一下echarts图表库。使用以下命令

npm install echarts --save

之后我们在创建的components组件文件中新建一个放图表的文件，现在是一个图表对应一个文件，新建一个BarChart.vue文件，这个放我们的柱状图，打开文件，先写一下存放图表的的容器，并设置一下高和宽。

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

紧接着要去写一下图表的代码，先引入echarts文件

import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

然后设置一下容器的高和宽

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
 data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}

然后就可以通过 echarts.init方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
​
      this.chart.setOption({
        title: {
          text: '发文数量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
        
      })
    }
  }

这里的代码大家可以去echarts官网的实例中去查找。

然后再去我们的主页将这个组件引进来。

import BarChart from './components/BarChart'
​
components: {
    PanelGroup,
    BarChart,
},

页面代码：

    <el-row :gutter="32" class="row-chart">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
           <bar-chart />
        </div>
      </el-col>
    </el-row>

然后再设置一下css样式

<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard {
      &-container {
        padding: 32px;
        background-color: #f0f2f5;
      }
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .row-chart{
      margin-top: 30px;
    }
</style>

然后我们打开页面，查看一下图表有没有渲染出来

image.png

avatar
文章
阅读
粉丝