前端-Vue电商后台管理系统(3)

Vue电商后台管理系统

前言

(三)主页布局和功能实现

一、主页布局

用到element-ui组件库中的Container布局容器，来实现主页的基础布局
（1）选择一个自己想要的布局，复制其代码

<template>
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div>
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" v-on:click="quit">退出</el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">Aside</el-aside>
        <!-- 右侧对应主体 -->
        <el-main>Main</el-main>
      </el-container>
    </el-container>
</template>

（2）在plugins->element.js中导入并注册组件

import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

（3）添加css样式

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #373D41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span{
    color: #fff;
    font-size: 28px;
  }
  .el-button{
    color: white;
    font-size: 18px;
  }
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
</style>

二、左侧菜单布局

菜单分为二级，并且可以折叠
用到element-ui组件库中的NavMenu导航菜单
（1）粘贴代码到侧边栏中

<!-- 侧边栏 -->
        <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>

（2）导入并注册组件

import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside, Menu, Submenu, MenuItemGroup, MenuItem} from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)

（3）通过接口获取菜单数据
通过axios请求拦截器添加token，保证拥有获取数据的权限
（为每一次API请求头，挂载了Authorization）

// 配置axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须return config
  return config
})
Vue.prototype.$http = axios

（4）获取左侧菜单数据

<script>
export default {
  data() {
    return {
      menuList:[]
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    quit () {
      // 清空token
      window.sessionStorage.clear()
      // 清空后重定向到登录界面
      this.$router.push('/login')
    },
    // 获取所有菜单
    async getMenuList () {
      const { data:res } = await this.$http.get('menus')
      // 失败
      if(res.meta.status!==200) return this.$message.error(res.meta.msg)
      this.menuList=res.data
      console.log(res)
    }
  }
}
</script>

（5）通过双层for循环渲染左侧菜单
一级菜单是data，数组中的每一项
每一个一级菜单通过children属性又嵌套了所有的二级菜单
外层for循环主要渲染一级菜单，内层for循环渲染二级菜单

<!-- 一级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
<span>{{item.authName}}</span>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<span>{{subItem.authName}}</span>

（6）为选中项设置字体颜色并添加分类图标

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF">

其中active-text-color就是激活后的颜色

修改二级菜单图标
去element-ui中找到icon图标，复制其名称即可

<!-- 图标 -->
 <i class="el-icon-menu"></i>

修改一级菜单图标，所有一级菜单图标都是不一样的，需要通过自定义图标形式去解决.
在数据中定义一个图标对象，把id作为对象的键，把图标名称作为值

data() {
    return {
      menuList:[],
      iconsObj: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      }
    }
  },

再用v-for遍历，把对应id号的图标添加上来

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

（7）每次只能打开一个菜单项
给menu添加属性 unique-opened的值为true
此时就只能打开一个菜单栏

三、左侧菜单的折叠与展开

（1）布局与样式

<!-- 在侧边栏中最顶部添加 -->
<div class="toggle-btn">|||</div>
.toggle-btn{
    background-color: #4A5064;
    color: white;
    font-size: 15px;
    letter-spacing: 0.2em;
    cursor: pointer;
  }

（2）实现点击__折叠与展开
为按钮绑定一个单击事件
怎么实现？menu有一个属性collapse，值为true__折叠
只要实现点击按钮，切换这个值的true/false即可实现

data() {
    return {
      menuList:[],
      iconsObj: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      },
      // 默认不折叠
      isCollapse:false
    }
  }
  methods: {
   // 点击按钮__切换菜单的折叠与展开
    toggleCollapse(){
      this.isCollapse=!this.isCollapse
    }
    }
  <!-- 侧边栏 -->
  <el-aside :width="isCollapse ? '64px':'200px'">
  <!-- 侧边栏菜单区域 -->
  <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened="true" :collapse="isCollapse" :collapse-transition="false">

四、实现路由的重定向效果

定义一个welcome组件，在home页面中main这个位置放一个路由占位符，然后把welcome这个路由设置为home路由的子路由规则，这样就在home页面中嵌套显示了welcome子组件
（1）在components->新建welcome.vue

<template>
  <div>
      <h3>Welcome!</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

（2）在路由中导入welcome组件

import welcome from '../components/welcome.vue'

（3）把welcome作为home的子路由规则，并且当访问home页面时，重定向到welcome组件

{ path: '/home', component: home ,redirect:'/welcome',children:[
    {path:'/welcome',component:welcome}
  ]}

（4）在home.vue中的menu中的main区域放一个路由占位符

<!-- 右侧对应主体 -->
<el-main>
   <!-- 路由占位符 -->
   <router-view></router-view>
</el-main>

五、实现左侧菜单路由链接的改造

把每个二级菜单改成路由链接，不用把每个都改成router-link，有更简单的方法
menu有一个属性router，默认值是false，就是没有启动路由跳转模式，启动该模式会在激活导航时以index作为path进行路由跳转
（1）开启router模式
为el-menu添加一个属性 router=“true”
此时，点击二级菜单，会发生跳转，跳转到二级菜单对应index的值，也就是id值

但是拿id值作为跳转地址并不是很合理，应该拿当前的path属性值作为唯一的跳转地址

<!-- 二级菜单 -->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">