Vue2 + element-ui后台管理项目—主页布局_elementui后台管理布局

第一章-项目初始化
第二章-登录/退出功能
第三章-Git提交代码

---

主页布局

---

一、主页整体布局

element-ui组件库中找到 Container布局容器第四个

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

1
2
3
4
5
6
7
8

把button按钮放到el-header里面

<el-container>
    <!-- 头部区域 -->
    <el-header>Header<el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
       <!-- 侧边栏 -->
       <el-aside width="200px">Aside</el-aside>
       <!-- 右侧内容主体 -->
       <el-main>Main</el-main>
    </el-container>
</el-container>
1
2
3
4
5
6
7
8
9
10
11
12

在element-ui中导入这些组件并注册为全局组件

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.prototype.$message = Message
1
2
3
4
5
6
7
8
9
10
11
12

注意：每一个element-ui中提供的组件的组件名就是类名，直接加类选择器
给el-container添加一个自定义class，用于设置容器撑满全屏

<style lang="less" scoped>
.home-container{
  height: 100%;
}
.el-header{
  background-color: #373d41;
}
.el-aside{
  background-color: #333744;
}
.el-main{
  background-color: #eaedf1;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、主页header布局

使用flex布局，左侧设置一个div盒子放图标和文本

      <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/star.png" alt="">
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
1
2
3
4
5
6
7
8

.el-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0; // 去掉图标左边缝隙
  align-items: center; // 按钮上下居中
  color: #fff;
  font-size: 20px;
  > div { // 文本纵向居中对齐
      display: flex;
      align-items: center;
    span { // 文本和图标之间间距
      margin-left: 15px;
    }
  }
  img{
    width: 61px;
    height: 61px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、主页左侧菜单栏布局

使用组件库中 NavMenu 导航菜单
在element-ui中导入这些组件并注册为全局组件
在el-menu里面嵌套一级菜单el-submenu，一级菜单里面通过template指定图标和文本；
在一级菜单里面嵌套了二级菜单el-menu-item，二级菜单里面通过template指定图标和文本

        <!-- 侧边栏 -->
        <el-aside width="200px">
          <!-- 侧边栏菜单区域 -->
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
            <!-- 一级菜单 -->
            <el-submenu index="1">
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-location"></i>
                <!-- 文本 -->
                <span>导航一</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item index="1-4-1">
                <!-- 二级菜单模板区域 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>选项</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
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

1.、通过接口获取菜单数据

//axios请求拦截 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config
})
1
2
3
4
5
6

2、发起请求获取左侧菜单栏数据

• 在API接口文档中找到左侧菜单权限的请求路径和方法

• 在页面刚加载的时候就应该立即获取左侧菜单栏数据，所以在行为区域定义一个生命周期函数 created() ，调用 getMenuList() 来获取所有的左侧菜单，在methods中定义这个函数，get函数返回值是promise，用async简化promise操作，通过解构赋值把data属性解构出来重命名为res进行接收
  

• 拿到数据后，接下来为了能在页面中渲染出来，应该把获取到的数据立即挂载到data中，再定义一个组件的私有数据，然后再根据status值进行判断，保存到menulist里

<script>
export default {
  data () {
    return {
      // 第三步：左侧菜单数据挂载到data中
      menulist: []
    }
  },
  // 第一步：在created阶段请求左侧菜单数据
  created () {
    this.getMenuList()
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/mylogin')
    },
    // 第二步：获取所有的菜单数据
    async getMenuList () {
      const { data: res } = await this.$http.get('menus')
      // 第四步：根据status判断
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      console.log(res)
    }
  }
}
</script>
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

3、左侧菜单UI绘制

给一级菜单加v-for指令 循环渲染，每一个v-for都提供一个唯一的key属性，id是唯一的 可以直接指定
把每个item项对应的authname属性当作名称，为template中的span标签动态绑定一个菜单的名称
此时都已经渲染出来了，但展开一项，其他项也展开了

此时需要为el-submenu指定一个唯一的index，给index绑定一个动态的值 :index="item.id"
此时报错，原因是index只接收字符串不接收数值，所以拼接一个空字符串 :index="subItem.id + ''"
接着渲染二级菜单

<!-- 一级菜单 -->
            <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-location"></i>
                <!-- 文本 -->
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
                <!-- 二级菜单模板区域 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>{{ subItem.authName }}</span>
                </template>
              </el-menu-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4、左侧菜单格式美化

• 通过更改el-menu的active-text-color属性设置侧边栏菜单中点击的激活项的文字颜色

active-text-color="#409fff"
1

• 修改所有二级菜单的小图标

<i class="el-icon-menu"></i>
1

• 修改一级菜单的小图标 在for循环自动生成菜单名称的同时生成图标，先定义一个字体对象iconsObj，id作为key，图标作为value

<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>

data () {
    return {
      // 第三步：左侧菜单数据挂载到data中
      menulist: [],
      iconsObj: {
        125: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

再设置一下图标和文本间的距离

.iconfont {
  margin-right: 10px;
}
1
2
3

5、左侧菜单优化

限制一级菜单每次只能展开一个，添加一个属性unique-opened设置为true，再加冒号进行数据绑定

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409fff" :unique-opened="true">
1

发现展开的菜单右边框会有点突出去，检查发现多了border-right

通过类名选择器修改为none

.el-aside{
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
1
2
3
4
5
6

6、左侧菜单的折叠与展开功能

• 侧边栏上面添加能够实现伸缩功能的按键
  <div class="toggle-button" >|||</div>
• 给按键绑定点击事件 toggleCollapse
  <div class="toggle-button" @click="toggleCollapse">|||</div>
• element-ui查看collapse属性，给侧边菜单区域绑定属性
  
• 在data中定义一个布尔值isCollapse，把这个布尔值动态绑定到侧边菜单
  isCollapse: false
:collapse="isCollapse"
• 在事件处理函数中进行布尔值的切换
  toggleCollapse () { this.isCollapse = !this.isCollapse }
• 发现折叠时有动画效果，将collapse-transition属性值修改为false，为了保证是布尔值加上动态数据绑定
  :collapse-transition="false"
  
• 发现折叠起来之后背景栏没有跟着变小，所以不把菜单栏宽度写成固定值，利用三元运算符使width的值根据 isCollapse 进行动态切换
  <el-aside :width="isCollapse ? '64px' : '200px'">

四、实现首页的路由重定向

实现登录成功后首页显示welcome这个组件，在home中嵌套子组件
1.新建子组件welcome.vue
2.在router/index.js中导入子路由组件
并在home路由规则内部设置子组件路由规则以及子级路由的默认重定向规则
3.在Home.vue main的主体区域放一个路由占位符

//router/index.js
import Welcome from '../components/Welcome.vue'

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/mylogin' },
    { path: '/mylogin', component: myLogin },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [{ path: '/welcome', component: Welcome }]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Home.vue
<!-- 右侧内容主体区域 -->
<el-main>
  <!-- 路由占位符 -->
  <router-view></router-view>
</el-main>

1
2
3
4
5
6
7

五、左侧菜单改造为路由链接

将 el-menu 的 router 属性重置为true :router="true"
此时，点击二级菜单会跳转到：

我们不希望跳转到id而是path，因此重新绑定index的值为 :index=" ‘/’ + subItem.path"，服务器没有给地址加斜线，所以手动补全斜线

此时已经实现侧边栏路由跳转

---