前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建

前言

今天主要是讲后台的主体框架结构。在开始之前我们回顾一下，一般的后台都分成顶部，左侧菜单，右侧内容的经典布局模式。这样的布局模式我们是可以把这个的模式提取到一个公共的后台组件中来。下面我们就开始今天的

开始

在开始之前我们还是和往常一样，先看看今天的目录结构

总体的目录结构就是这样的了，其中的Admin.vue就是我们的后台布局主体了。下面我们来看看这个主体页面的代码吧。

Admin.vue

# 这个是admin的dom结构文件，

<template>
  <div class="common-layout">
    <el-container style="height: 100%;">
      //头部
      <el-header>Header</el-header>
			//主题内容
      <el-container>
      	//左侧菜单
        <el-aside width="200px">
          
          <!-- 
          	静态模式
          	<router-link to="/">Home</router-link> 
          -->
          
					/**
          * 动态菜单，这里面我们使用的是element 的菜单组件
          * 动态菜单的数据，我们将从store中获取
          */
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
          >
            <el-menu-item :key="index" v-for="(vo, index) of menus" :index="index">
              <!-- <el-icon><setting /></el-icon> -->
              <router-link :to="vo.path">{{ vo.title }}</router-link>
            </el-menu-item>
          </el-menu>

        </el-aside>
				//右侧主内容的展示
        <el-main>
          // 这个是用来展示对应组件的内容
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  height:100%;

  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>

下面我们来看看菜单的获取

# admin.vue 的js代码
# 这里我们主要是获取登录成功后，获取的菜单数据，我们可以把按钮的权限在菜单中一起返回
# 这样我们把按钮的权限处理到一个数组中，这里我们先讲菜单的展示

<script>
  import { reactive, ref, computed } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import jsCookie from 'js-cookie';
  import { filterAsyncRoutes } from '@/util/utils.js';

  export default {
    setup() {
      const router = useRouter();
      const store = useStore();

      //获取cookie中的userinfo
      let userInfo = JSON.parse(jsCookie.get('userInfo'));
			
      //调用菜单接口（这里的具体代码可以在第四章中查看）
      store.dispatch('global/getMenus', {
        "id":userInfo.id
      });
      
      //计算属性返回数据，可以不使用这种模式，也可以在调用菜单接口的时候才有then的返回
      //模式进行数据的填充。这里根据个人爱好进行处理
      
      const menus = computed(() => {
        let data = store.state.global.menus
        // 动态添加到路由中
        // 这个地方可能大家有点奇怪，为什么我们已经拿到了菜单的数据了，
        // 为什么不直接进行循环，然后才有router.addRoute 添加到路由中呢？
        // 非要用filterAsyncRoutes函数进行处理呢，其实vue3中是不能直接
        // 动态添加component的。这里我们需要使用到vue3的glob。所以
        // 我在这里写了一个函数进行处理这个。
        let routes = filterAsyncRoutes(data);

        routes.length > 0 && routes.map((v, k) => {
          // 其实还是可以添加其他的属性，这里目前只添加这些，后期有需要我们在添加
          router.addRoute(v.layout, {
            path: v.path,
            name: v.name,
            title: v.title,
            component: v.component
          });
        });

        return data;
      });

      return {
        menus
      }
    }
  }
</script>

这样后台的主体结构我们就已经完成了。这时大家肯定好奇，我们要怎么使用呢？

不知道大家还记不记的，我们在第三章中，我们有一个BasicLayout。这个就是我们的

admin.vue的主体结构。

知识点：router.addRoute
在这一章中，我们主要的知识点就是动态添加新路由的addRoute函数。官网上说明这个函数是添加多个数组函数的。同时也可以添加一个子路由的。添加子路由的时候，我们需要在第一个函数中负值父组件。

addRoute(parentName: string, route: RouteConfig): () => void

以上就是我们今天的内容。

每天学习一点，进步一点。加油～～

莫方教程网

专业程序员编程教程与实战案例分享

深入了解VUE3实践 - 搭建后台(五)

前言

开始