Spring Boot + Vue前后端分离（七）后端系统，功能导航页

其他 2020-07-27 10:22:00 阅读次数: 0

你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
 
标签：一个执着的职场程序员！

上篇文章我们把登录界面做了一次渲染，使用了Element组件库，通过登录我们了解到它的强大，它的强大不仅仅是功能多，还有开发难度也小，我们在开发中好多可以直接复用官网的效果，相信小伙伴都很快学习了，本篇文章我们还是需要用这个组件库 来完成后端功能界面的开发，把左侧功能导航栏开发出来，这样我们就更好的明白后台的功能和需求。

本文是Spring Boot + Vue前后端分离 系列的第七篇，了解前面的文章有助于更好的理解本文：

1.Spring Boot + Vue前后端分离（一）前端Vue环境搭建
2.Spring Boot + Vue前后端分离（二）前端Vue启动流程
3.Spring Boot + Vue前后端分离（三）实现登录功能
4.Spring Boot + Vue前后端分离（四）前端路由
5.Spring Boot + Vue前后端分离（五）登录拦截器
6.Spring Boot + Vue前后端分离（六）使用Element渲染登录界面

目录

(一). 添加后台功能页

(二). 子页面路由

(三). 问题解析

前言

本篇文章是前期准备页面工作的最后一篇了，后面会开始设计数据库，权限和业务逻辑的开发，其实该篇文章在5天前就已经准备和整理好了，只是一直没有发出来，原因一个是在设计数据库，想早早把数据库这块整理好，另一个就是 最近一直在家里办公，效率低下，时不时的会被打断，我这种自律性不高的人，总是这样一拖再拖，后期我会控制节奏的更新，让项目尽快完成，供大家学习，使用。

(一). 添加后台功能页

后台开发我们还是使用的vue中的Element组件库，这个可以到官网直接看效果，有现成的效果我们直接可以复制使用，比如如下效果就是官网提供的做后台功能页的，我们可以直接 点击显示代码，复制到我们项目中，调整到自己需要的效果就可以。

让我们看看书圈的后台到底什么样子吧？

通过效果可以看到我们的界面有几部分组成：
1，侧栏

2，折叠

3，下拉菜单

4，内容区

效果怎么实现的呢？直接上代码 ：

<template>  <el-container>    <div class="controlPanel-sidebar" width="220px">      <el-menu class="el-menu-vertical-demo"               @open="handleOpen"               @close="handleClose"               :collapse="isCollapse"               background-color="rgb(32,34,42)"               text-color="rgba(255, 255, 255, 0.8)"               active-text-color="#fff"               :router="true">        <div class="Title1" v-if="!isCollapse"><span>书圈后台管理</span></div>        <div class="Title2" v-if="isCollapse" style="width:60px;">书圈</div>
        <el-submenu index="1">          <template slot="title">            <i class="el-icon-data-board"></i>            <span slot="title">工作台</span>          </template>          <el-menu-item index="1-1" :route="{name:'Home'}"><div class="barstyle"></div>通知公告</el-menu-item>        </el-submenu>
        <el-submenu index="6">          <template slot="title">            <i class="el-icon-setting"></i>            <span slot="title">系统管理</span>          </template>          <el-menu-item index="6-1" :route="{name:'UserManager'}"><div class="barstyle"></div>用户管理</el-menu-item>          <el-menu-item index="6-2"><div class="barstyle"></div>角色管理</el-menu-item>          <el-menu-item index="6-3"><div class="barstyle"></div>菜单管理</el-menu-item>          <el-menu-item index="6-4"><div class="barstyle"></div>字典管理</el-menu-item>        </el-submenu>
        <el-submenu index="5">          <template slot="title">            <i class="el-icon-data-analysis"></i>            <span slot="title">平台管理</span>          </template>          <el-menu-item index="5-1" :route="{name:'Home'}"><div class="barstyle"></div>书单管理</el-menu-item>          <el-menu-item index="5-2"><div class="barstyle"></div>书圈管理</el-menu-item>        </el-submenu>
        <el-submenu index="2">          <template slot="title">            <i class="el-icon-menu"></i>            <span slot="title">事务管理</span>          </template>          <el-menu-item index="2-1" :route="{name:'UserManager'}"><div class="barstyle"></div>审核书单</el-menu-item>          <el-menu-item index="2-2"><div class="barstyle"></div>审核书圈</el-menu-item>        </el-submenu>
        <el-submenu index="3">          <template slot="title">            <i class="el-icon-view"></i>            <span slot="title">系统监控</span>          </template>          <el-menu-item index="3-1" :route="{name:'Home'}"><div class="barstyle"></div>接口文档</el-menu-item>          <el-submenu index="3-2">            <span slot="title">日志管理</span>            <el-menu-item index="3-2-1" :route="{name:'UserManager'}"><div class="barstyle" style="margin-left:-60px"></div>通用日志</el-menu-item>            <el-menu-item index="3-2-2"><div class="barstyle" style="margin-left:-60px"></div>接口日志</el-menu-item>            <el-menu-item index="3-2-3"><div class="barstyle" style="margin-left:-60px"></div>错误日志</el-menu-item>          </el-submenu>        </el-submenu>
        <el-submenu index="4">          <template slot="title">            <i class="el-icon-connection"></i>            <span slot="title">资源管理</span>          </template>          <el-menu-item index="4-1" :route="{name:'Home'}"><div class="barstyle"></div>视频课程</el-menu-item>          <el-menu-item index="4-2"><div class="barstyle"></div>文章资料</el-menu-item>        </el-submenu>
      </el-menu>    </div>    <el-container class="controlPanel-mainbar" >      <el-header height="55px">        <i class="el-icon-s-fold" @click="CollapseTrue()" id="CollapseTrueIcon"></i>        <i class="el-icon-s-unfold" @click="CollapseFalse()" id="CollapseFalseIcon"></i>        <el-input          placeholder="请输入搜索内容"          v-model="input"          size="small">          <el-button slot="append" icon="el-icon-search"></el-button>        </el-input>        <div class="userinfo">
          <el-dropdown :hide-on-click="false">            <div class="el-dropdown-link">              圈主<i class="el-icon-arrow-down el-icon--right"></i>            </div>            <el-dropdown-menu slot="dropdown">              <el-dropdown-item>首页</el-dropdown-item>              <el-dropdown-item>个人信息</el-dropdown-item>              <el-dropdown-item>公众号</el-dropdown-item>              <el-dropdown-item divided>退出系统</el-dropdown-item>            </el-dropdown-menu>          </el-dropdown>          <div class="avater"></div>        </div>      </el-header>      <el-main>        <el-scrollbar style="height:100%">          <keep-alive>            <router-view></router-view>          </keep-alive>        </el-scrollbar>      </el-main>    </el-container>  </el-container></template>
<script>export default {  name: 'topbar',  data () {    return {      isCollapse: false,      input: ''    }  },  methods: {    handleOpen (key, keyPath) {      console.log(key, keyPath)    },    handleClose (key, keyPath) {      console.log(key, keyPath)    },    // 收起    CollapseTrue () {      this.isCollapse = true      var show1 = document.getElementById('CollapseTrueIcon')      var show2 = document.getElementById('CollapseFalseIcon')      show2.style.display = 'block'      show1.style.display = 'none'    },    // 展开    CollapseFalse () {      this.isCollapse = false      var show1 = document.getElementById('CollapseTrueIcon')      var show2 = document.getElementById('CollapseFalseIcon')      show1.style.display = 'block'      show2.style.display = 'none'    }  }}</script>
<style lang="scss" scoped>  .controlPanel-sidebar {    height: 100vh;    .Title1 {      background:rgb(32,34,42);      width:219px;      height:55px;      border-bottom: 2px rgb(6,7,8) solid;      span {        display: block;        text-align: center;        font-weight: 300;        font-size: 18px;        color: white;        font-family: 'YouYuan';        padding-top: 15px;      }    }    .Title2 {      background:rgb(32,34,42);      width:219px;      height:55px;      border-bottom: 2px rgb(6,7,8) solid;      display: block;      text-align: center;      font-size: 18px;      font-weight: bold;      color: #fff;      padding-top:15px;    }    .el-menu-vertical-demo {      // width: 220px;      min-height: 100%;      height: 100%;      .barstyle {        width: 4px;        background: #409EFF;        height: 50px;        float: left;        margin-left: -40px;        display: none;      }
      /*左边导航栏具体样式*/      .el-menu-vertical-demo.el-menu {        background-color: #144A6A;        color: #EEEEEE;      }
      .el-submenu .el-menu-item, .el-menu-item {        background-color: #0A3148;        color: #EEEEEE;      }      .el-menu-item:hover {        background: rgb(6,7,8) !important;        color: #fff !important;        i {          color: #fff !important;        }        .barstyle {          display: block;        }      }      .el-menu-item.is-active {        background: rgb(6,7,8) !important;        .barstyle {          display: block;        }      }    }    .el-menu-vertical-demo:not(.el-menu--collapse) {      width: 220px;    }  }  .controlPanel-mainbar {    padding: 0px;    height: 100vh;    background: rgb(242,242,242);    .el-header {      background: white !important;      .el-icon-s-fold {        font-size: 28px;        color: rgb(144,147,153);        padding-top: 13px;        display: block;        width: 20px;        float: left;      }      .el-icon-s-unfold {        font-size: 28px;        color: rgb(144,147,153);        padding-top: 13px;        display: none;        width: 20px;        float: left;      }      .el-input {        width:250px;        padding-left: 30px;        padding-top: 12px;        .el-button {          padding-left: 13px;          padding-right: 6px;        }      }      .userinfo {        float: right;        .avater {          width: 35px;          height: 35px;          background: rgb(56,161,242);          -moz-border-radius: 50px;          -webkit-border-radius: 50px;          border-radius: 50px;          margin-top: 10px;          float: right;          margin-right: 15px;        }        .el-dropdown {          float: right;          .el-dropdown-link {            color: black !important;            // float: right;            margin-right: 5px;            margin-top: 18px;          }
        }      }    }  }</style><style>  .controlPanel-sidebar .el-submenu i,span{    color: rgba(255, 255, 255, 0.8) !important;  }  .controlPanel-sidebar .el-submenu i:hover,span:hover{    color: #fff !important;    background: rgb(6,7,8) !important;  }  .controlPanel-sidebar .el-submenu .el-submenu__title:hover{    color: #fff !important;    background: rgb(6,7,8) !important;
  }  .controlPanel-sidebar .el-submenu .el-submenu__title.is-active {    background: rgb(6,7,8) !important;  }</style>

解析：
1，这里我们通过如下几个标签完成了界面的开发

el-menu
el-submenu

el-menu-item

锯条可以查看官网资料，功能都是这几个标签的嵌套比较简单，有疑问可以看上一篇的登录界面，或者加微信。

2，该界面还实现了侧栏的展开和收缩效果

<i class="el-icon-s-fold" @click="CollapseTrue()" id="CollapseTrueIcon">

</i>

<i class="el-icon-s-unfold" @click="CollapseFalse()" id="CollapseFalseIcon"

></i>

3，添加了下拉菜单的效果

<el-dropdown :hide-on-click="false">
  <div class="el-dropdown-link">
    圈主<i class="el-icon-arrow-down el-icon--right"></i>
  </div>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>首页</el-dropdown-item>
    <el-dropdown-item>个人信息</el-dropdown-item>
    <el-dropdown-item>公众号</el-dropdown-item>
    <el-dropdown-item divided>退出系统</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

(二). 子页面路由

说到子页面的路由就是指的侧栏中的每一个功能对应内容区的页面怎么展示的

一般我们通过3个地方添加：
1，router/index.js中添加 路由页面的设置，如下：

routes: [// 下面都是固定的写法{path: '/login',name: 'Login',component: Login},{path: '/index',name: 'HomePage',meta: {requireAuth: true},component: HomePage,

2，我们在页面中添加路由的内容

<el-main>  <el-scrollbar style="height:100%">    <keep-alive>      <router-view></router-view>    </keep-alive>  </el-scrollbar></el-main>

3，最后我们在功能上面添加：比如：工作台/通知公告

<el-menu-item index="1-1" :route="{name:'Home'}">

<div class="barstyle"></div>通知公告</el-menu-item>

改行代码中我们添加了这个:route="{name:'Home'}" 这个就是路由的内容页的指向。

但让我们还可以通过点击事件的方式，具体看官网。

添加完上面的操作后，点击 通知公告 会发现进入页面了，但是 侧栏的菜单不见了，

原因是因为我们的路由设计的问题：

需要做 嵌套路由，让每一个子页面 都是在主路由页面中：

下面的所有路由都是Main路由的子路由，

代码如下：​​​​​​​

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import HomePage from '@/components/home/HomePage'import Home from '@/components/home/Home'import UserManager from '@/components/sysmanage/UserManager'import Login from '@/components/Login'import Error from '@/components/Error'
Vue.use(Router)
export default new Router({mode: 'history',routes: [// 下面都是固定的写法    {path: '/login',name: 'Login',component: Login    },    {path: '/index',name: 'HomePage',meta: {requireAuth: true      },component: HomePage,children: [// 开始嵌套路由，这下面的所有路由都是Main路由的子路由        {path: '/', // 嵌套路由里默认是哪个网页          redirect: '/home'        },        {path: '/home', // 首页的路由          name: 'Home',component: Home        },        {path: '/usermanager', // 设置页面的路由          name: 'UserManager',component: UserManager        }      ]    },    {path: '/*', // 注意，这里不是嵌套理由了，这是为了设置404页面，一定要放在最后面，这样当服务器找不到页面的时候就会返回404      name: 'Error',component: Error    }  ]})

我们后台的主页路由是HomePage，各个内容页面路由需要添加到该children中：​​​​​​​

{path: '/index',name: 'HomePage',meta: {requireAuth: true      },component: HomePage,children: [// 开始嵌套路由，这下面的所有路由都是Main路由的子路由        {path: '/', // 嵌套路由里默认是哪个网页          redirect: '/home'        },        {path: '/home', // 首页的路由          name: 'Home',component: Home        },        {path: '/usermanager', // 设置页面的路由          name: 'UserManager',component: UserManager        }      ]    },

HomePage中的子路由需要通过children的方式添加，这样添加后在点击效果就不

会出现 侧栏的丢失了

(三). 问题解析

在做页面中我们会遇到这样一个问题，添加了样式中的  

lang="scss" 属性的时候会报错。

页面加载错误 如下：

VUE CAN'T RESOLVE 'SASS-LOADER' IN...错误

解决办法：

需要引入sass-loader这种依赖包

npm install sass-loader -D
npm install node-sass -D

如果还是失败的小伙伴可能是网络问题，可以尝试用cnpm解决

cnpm install sass-loader -D

cnpm install node-sass -D

好了本篇文章结束，有疑问的小伙伴加微信。

源码链接：https://github.com/ProceduralZC/bookcircle

敬请期待下篇。。。​​​​​​​

作者：小小蒲公英

猜你喜欢

转载自blog.csdn.net/jianpengxuexikaifa/article/details/104378220
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022