vue组装模板（侧边栏+顶部+主体）--项目阶段4

冷不防 2024-04-26 04:30 7阅读 0赞

**目录**

一、前言介绍

二、结构解析

三、页面拆分

（一）页面拆分

1.侧边栏页面（固定）--Aside.vue

2.顶部页面（固定）--Header.vue

3.主体页面（不固定的）--示例用UserView.vue

（二）页面组装-Manage.vue

四、运行

代码获取

--------------------

## 一、前言介绍 ##

> 在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来：
> 
> [初学者SpringBoot+Vue打通前后端详细步骤（从零开始）--项目阶段3\_云边的快乐猫的博客-CSDN博客][SpringBoot_Vue_--_3_-CSDN]
> 
> 本篇文章是给这个项目增加上**侧边栏**和**顶部**，点击不同的侧边栏菜单会有不同的页面效果。

## 二、结构解析 ##

前端使用的技术还是**Vue**\+**Element-ui**，还用到elementui里面的[布局容器][Link 1]。

页面要分成3部分组成，分别是侧边栏、顶部和主体3部分。然后再把这3部分页面组装合并在一个**Manage.vue**页面里面。

其中侧边栏和主体部分可以固定，点击侧边栏中的菜单时候，主体部分就通过路由切换到对应的页面。

![88cd8af7c05c40678bcea266260444cd.png][]

**这种结构的优点与缺点：**

使用侧边栏的系统实际上是单页面系统，运行用户体验会更好，但是缺点就是SEO（搜索曝光率）没有多页面的好，典型的网易云就是单页面的系统。就是整体框架不会变，只是变里面的内容。这样用户体验度会比较好。

若依开源项目（[运行超链接][Link 2]）也是一样的

![3e3902f9b7024c808b47ec6a14d14600.png][]

##  ##

## 三、操作步骤 ##

### （一）页面拆分  ###

> 没有拆分之前的集成代码：
> 
> [https://download.csdn.net/download/m0\_52861000/88244356?spm=1001.2014.3001.5501][https_download.csdn.net_download_m0_52861000_88244356_spm_1001.2014.3001.5501]

#### **1.**侧边栏页面（固定）--Aside.vue ####

因为侧边栏页面是固定位置的而且是通用的（就是点击菜单栏，这个都存在的，除了登录页面不存在），所以这个页面写在vue的通用页面**components包**目录下。命名为Aside.vue

![dbbdb236b4d84a3eaba603b9145b8309.png][]

![62109a771c2f4f70b89551bcab4d7cf2.png][]

<template>
     <el-aside :width="asideWidth">    
            <div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center">
              <img :src="require('@/assets/logo.png')" style="width: 30px;" alt="">
              <span class="logo-title" v-show="!isCollapse">无敌系统</span>
            </div>
            
            
            <el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"
                     active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"
                     style="border: none">
              <el-menu-item index="/">
                <i class="el-icon-s-home"></i>
                <span slot="title">系统首页</span>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template>
                <el-menu-item index="/user">用户管理</el-menu-item>
                <el-menu-item index="/admin">管理员管理</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu"></i><span>部门管理</span></template>
                <el-menu-item index="/work">上班打卡</el-menu-item>
                <el-menu-item index="/rest">下班打开</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
    </template>
    
    <script>
    export default {
      name: 'Aside',
      props: {
        asideWidth: String,
        isCollapse: Boolean
        // 其他需要的 props
      }
      // 其他逻辑和方法
    };
    </script>
    
    
    <style>
    /* 侧边栏里面选中菜单的背景色   !important代表这个优先级很高*/
    .el-menu--inline, .el-menu-item {
      background-color: #000c17 !important;
    }
    
    /* 菜单栏一级标题样式 */
    .el-submenu__title {
      height: 40px !important;  /* 一级标题的框整体高度 */
      line-height: 40px !important;  /* 一级标题的字在框里面整体高度 */
      padding: 0 25px !important;    /* 一级标题位置，越大越右 */
      transition: color 10s;      /* 对文字颜色过渡效果时间 */
    }
    /* 菜单栏图标文字对齐样式（去掉也没关系） */
    .el-submenu__title>i:nth-child(1) {
      margin-top: 2px;    /* 用来微调菜单栏里面图标和文字上下对齐的 */
    }
    /* 菜单栏展开箭头样式位置（去掉也没关系） */
    .el-submenu__title>i.el-submenu__icon-arrow {
      margin-top: -5px;
    }
    /* 菜单栏样式（去掉影响也还好） */
    .el-menu-item {
      min-width: 0 !important;   /*允许最小屏幕的宽度  */
      width: calc(100% - 10px);
      margin: 5px;   /*菜单项主键的间距  */
      height: 40px !important;    /*首页菜单高度大小  */
      line-height: 40px !important;    /*二级菜单大小，最好和上面一样  */
      border-radius: 10px;  /*菜单标题的边框添加圆角，越大越圆*/
    }
    /* 菜单栏二级标题左移 （去掉也没关系） */
    .el-menu--inline>.el-menu-item {
      padding-left: 50px !important;
    }
    /* 菜单栏选中的背景颜色（去掉也没关系） */
    .el-menu-item.is-active {
      background-color: dodgerblue !important;
    }
    /* 菜单栏鼠标悬停在二级标题的颜色（去掉也没关系） */
    .el-menu-item:hover {
      color: #fff !important;
    }
    /* 菜单栏鼠标悬停在一级标题的颜色（去掉也没关系） */
    .el-submenu__title:hover *, .el-submenu__title:hover {
      color: #fff !important;
    }
    /* 菜单栏整体的美观样式 */
    .el-aside {
      box-shadow: 5px 0 6px rgba(15, 14, 14, 0.35); /* 菜单栏右侧阴影  0  阴影扩散范围 阴影的颜色 */
      background-color: #001529;   /* 菜单栏整体的背景色 */
      color: #fff;   /* 菜单栏顶部的系统颜色 */
      min-height: 100vh;  /* 菜单栏整体高度 */
      transition: width .3s;  /* 菜单栏展开收缩的整体时间0.3s */
    }
    /* 用于指示侧边栏折叠状态的选中一级图标偏移 */
    .el-menu--collapse .el-tooltip {
      padding: 0 15px !important;
    }
    /*菜单栏logo图标和文字的距离*/
    .logo-title {
      margin-left: 5px;  
      transition: all .3s;
    }
    .el-menu {
      transition: all .3s;
    }
    </style>

#### **2.**顶部页面（固定）--Header.vue ####

因为顶部页面是固定位置的而且是通用的（就是点击菜单栏，这个都存在的，除了登录页面不存在），所以这个页面写在vue的通用页面**components包**目录下。命名为Header.vue

![dc48d3866d564c948b7055d4bae9cf4f.png][]

![dd098e98885b4eb0a10285f865b93e7e.png][]

<template>
      <div class="aa">
      <el-header style="height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
              
              <i :class="collapseIcon" @click="handleCollapse" style="font-size: 30px"></i>
              
              <el-breadcrumb separator="/" style="margin-left: 20px">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
              </el-breadcrumb>
                    
              <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
                
                <el-dropdown placement="bottom">
                  <div style="display: flex; align-items: center; cursor: pointer">
                    
                    <img :src="require('@/assets/logo.png')" style="width: 30px;" alt="">
                    <span>管理员</span>
                  </div>
                  
                  <el-dropdown-menu slot="dropdown">
                      <router-link to="/person" style="text-decoration: none">
                      <el-dropdown-item>个人信息</el-dropdown-item>
                      </router-link>
                      <router-link to="/change-password" style="text-decoration: none">
                      <el-dropdown-item>修改密码</el-dropdown-item>
                      </router-link>
                      <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
          </div>
    </template>
    
    <script>
    export default {
      name: 'Header',
      props: {
        collapseIcon: String,
        handleCollapse: Function
        // 其他需要的 props
      }
      // 其他逻辑和方法
    };
    </script>
    
    <style>
    
    </style>

#### **3.**主体页面（不固定的）--示例用UserView.vue ####

主体页面界面就是自由嵌套一个完整页面进去的。我这里做示范，把[上一个做的页面放进来][Link 3]

![c8f99296d8554d3e81fc43411ce23b23.png][]

### （二）页面组装-Manage.vue ###

**1.**接下来就要把这些侧边栏、顶部、主体页面组装放到一个新页面里面。这里也是放到通用文件components里面，命名为Manage.vue

![66e1717a7ddb4c3882cdcf44ed47d173.png][]

<template>
        <el-container>
          <Aside :asideWidth="asideWidth" :isCollapse="isCollapse" />
          <div style="width: 100%;flex-wrap: wrap;">
          <Header :collapseIcon="collapseIcon" :handleCollapse="handleCollapse" />
            <el-main>
              <router-view />  
            </el-main>
          </div>
        </el-container>
    </template>
    
    <script>
    import Aside from '../components/Aside.vue';
    import Header from '../components/Header.vue';
    
    export default {
      components: {
        Aside,
        Header,
      },
      data() {
        return {
          isCollapse: false,   //展开
          asideWidth: '200px',   //侧边栏默认值为200
          collapseIcon: 'el-icon-s-fold'   //展开图标箭头向左
        };
      },
      methods: {
      handleCollapse() {
        this.isCollapse = !this.isCollapse;
        if (this.isCollapse) {     //折叠图标
          this.asideWidth = '64px';
          this.collapseIcon = 'el-icon-s-unfold';
        } else {
          this.asideWidth = '200px';    //展开图标
          this.collapseIcon = 'el-icon-s-fold';
        }
      }
    }
    
    };
    </script>

**2.**最后一个步骤，让这些页面可以加载起来，那就是放到路由里面。

![9dae5c4675ae4d198a7836c83d8859dd.png][] **四、运行**

cd切到到当前文件夹demo，然后输入运行命令

npm run serve

默认8080端口然后主体部分会重定向到[user界面 ][Link 3]

![34ac3b77afba403e94a25fddd9a78377.png][]

#### 代码获取 ####

> **1.**[点击下方那个猫扫一下][Link 4]
> 
> **2.**去那边回：项目阶段4

**有什么问题都可以评论区留言，看见都会回复的**

**如果你觉得本篇文章对你有所帮助的，把“文章有帮助的”打在评论区**

**多多支持吧！！！**

**点赞收藏评论，当然也可以点击文章底部的红包或者👇订阅付费文章创作支持一下了。抱拳了！**

> **vip文章：**[http://t.csdn.cn/Uq5j1][http_t.csdn.cn_Uq5j1]
> 
> **bug大全订阅文章**：[http://t.csdn.cn/j6UyR][http_t.csdn.cn_j6UyR]

[SpringBoot_Vue_--_3_-CSDN]: https://blog.csdn.net/m0_52861000/article/details/132032014?
[Link 1]: https://element.eleme.cn/#/zh-CN/component/container
[88cd8af7c05c40678bcea266260444cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2359427bc59a44bbb56f32d82326ceb3.png
[Link 2]: https://blog.csdn.net/m0_52861000/article/details/132387116?
[3e3902f9b7024c808b47ec6a14d14600.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/62223dd6bd6f472a8be8c623e291cee5.png
[https_download.csdn.net_download_m0_52861000_88244356_spm_1001.2014.3001.5501]: https://download.csdn.net/download/m0_52861000/88244356?spm=1001.2014.3001.5501
[dbbdb236b4d84a3eaba603b9145b8309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/976ac931fdb8460faf6f7fc27eafb58f.png
[62109a771c2f4f70b89551bcab4d7cf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f3dbe789ac1448c18450ab9cc6e67d57.png
[dc48d3866d564c948b7055d4bae9cf4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4b22e58e5d8a4b81b42b2b38e79b8c26.png
[dd098e98885b4eb0a10285f865b93e7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1947543ea6f64d07b844dded9ac0763b.png
[Link 3]: https://blog.csdn.net/m0_52861000/article/details/132032014?spm=1001.2014.3001.5501
[c8f99296d8554d3e81fc43411ce23b23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9728f71562f64de5b9938c0cbdd6899f.png
[66e1717a7ddb4c3882cdcf44ed47d173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/21d2e701e1a646a2aaae2c5589ebe6c4.png
[9dae5c4675ae4d198a7836c83d8859dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a9ad120bbc194e26862d58aba55a96fc.png
[34ac3b77afba403e94a25fddd9a78377.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fb49aab882584565845674b1a1ef4dd8.png
[Link 4]: https://blink.csdn.net/details/1441350
[http_t.csdn.cn_Uq5j1]: http://t.csdn.cn/Uq5j1
[http_t.csdn.cn_j6UyR]: http://t.csdn.cn/j6UyR