spring boot+iview 前后端分离架构之首页面包屑的实现（二十一）

朱雀 2021-12-14 22:19 345阅读 0赞

### spring boot 与 iview 前后端分离架构之首页面包屑的实现（二十一） ###

*  公众号
 *  首页面包屑

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg21】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 首页面包屑 #

前面二十章我们已经基本实现了前端的几个大模块的整合开发，但是在细节部分我们还是有缺失的，比如我们的面包屑、左侧菜单、顶部菜单，这些现在都是在代码里面写死的，这些我们应该是根据具体的场景来动态可配置的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
因此本章开始分别对以下的几块进行改造，首先本章我们将开始改造我们的面包屑导航，首先我们需要改造我们的router，原先我们的router是没有做拦截的，因此我们做了如下改造，创建一个名为router.js的文件代码如下：

import main from '../view/main/main.vue';
    
    
    export default [
      {
        path: '/login',
        name: 'login',
        component: resolve => {
          require(['../view/login/login.vue'], resolve);
        }
      },
      {
        path: '/main',
        name: 'main',
        meta: {
          icon: 'ios-settings',
          title: '系统首页',
          hideInMenu: true,
          requireAuth: false //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
        },
        component: resolve => {
          require(['../view/main/main.vue'], resolve);
        }
      },
      {
        path: '/sys',
        name: 'sys',
        component: main,
        meta: {
          icon: 'ios-construct',
          title: '系统管理',
          code:'system-manage',
          requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
        },
        children:[
          {
            path: 'dictList',
            name: 'dictList',
            meta: {
              icon: 'ios-paper',
              title: '字典维护',
              code:'system-manage-dict',
              requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
            },
            component: resolve => {
              require(['../view/sys/dict/dictList.vue'], resolve);
            }
          },
          {
            path: 'treeList',
            name: 'treeList',
            meta: {
              icon: 'md-git-network',
              title: '菜单管理',
              code:'system-manage-tree',
              requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
            },
            component: resolve => {
              require(['../view/sys/tree/treeList.vue'], resolve);
            }
          },
          {
            path: 'roleList',
            name: 'roleList',
            meta: {
              icon: 'ios-cog',
              title: '角色管理',
              code:'system-manage-role',
              requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
            },
            component: resolve => {
              require(['../view/sys/role/roleList.vue'], resolve);
            }
          },
          {
            path: 'orgList',
            name: 'orgList',
            meta: {
              icon: 'ios-people',
              title: '用户组织',
              code:'system-manage-user',
              requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
            },
            component: resolve => {
              require(['../view/sys/user/orgList.vue'], resolve);
            }
          }
        ]
      }
    ]

接着在lib目录底下增加一个util.js的工具类代码如下：

接着我们在修改router里的index.js代码如下：

import Vue from 'vue';
    import iView from 'iview';
    import Util from '../lib/util';
    import VueRouter from 'vue-router';
    import routers from './router';
    
    Vue.use(VueRouter);
    
    // 路由配置
    const RouterConfig = {
      //mode: 'history',
      routes: routers
    };
    
    export const router = new VueRouter(RouterConfig);
    
    router.beforeEach((to, from, next) => {
      iView.LoadingBar.start();
      Util.title(to.meta.title);
      if (to.meta.requireAuth) {
        console.log('需要权限，暂时放开！');
        next();
      } else {
        next();
      }
    });
    
    router.afterEach((to) => {
      iView.LoadingBar.finish();
      window.scrollTo(0, 0);
    });

最后我们修改main.js，修改完成以后的代码如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import {router} from './router/index'
    // 引入国际化包
    import i18n from './local'
    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    import runConfig from './config/run.config';
    import iviewArea from 'iview-area';
    
    Vue.use(iviewArea);
    
    /**
     * 表示当前的应用启动的时候是以mock的方式启动
     */
    if(runConfig.runConfig.mock){
      require('./config/mock/mock.js')
    }
    
    Vue.config.productionTip = false
    // 引入view的国际化
    Vue.use(iView, {
      i18n: (key, value) => i18n.t(key, value)
    })
    
    // 格式化时间全局通用方法
    Vue.prototype.formatDate = function (date, fmt) {
      let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      // 国际化初始化
      i18n,
      components: { App },
      template: '<App/>'
    })

到此处我们就完成了router部分的改造了，这时候大家点击某一个菜单的时候，我们会看到我们的网页的标题已经变了，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
接着我们需要引入我们的vuex来进行数据的存储，我们在src目录底下创建一个store目录，接着在store目录底下创建一个module目录，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
app.js的代码如下：

import {getBreadCrumbList, getHomeRoute} from '../../lib/util';
    import router from '../../router/router';
    
    export default {
      state: {
        breadCrumbList: localStorage.getItem('breadCrumbList') ? JSON.parse(localStorage.getItem('breadCrumbList')) : [],
        homeRoute: getHomeRoute(router)
      },
      getters: {
        breadCrumbList(state, getters, rootState) {
          return rootState.app.breadCrumbList;
        },
      },
      mutations: {
        setBreadCrumb(state, routeMetched) {
          let breadCrumbList = getBreadCrumbList(routeMetched, state.homeRoute);
          state.breadCrumbList = breadCrumbList;
          localStorage.setItem('breadCrumbList', JSON.stringify(breadCrumbList));
        }
      }
    }

index.js的代码如下：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    import app from './module/app';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        //
      },
      mutations: {
        //
      },
      actions: {
        //
      },
      modules: {
        app
      }
    });

接着在我们的main.js中引入我们的store，改造完成以后代码如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import {router} from './router/index'
    // 引入国际化包
    import i18n from './local'
    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    import runConfig from './config/run.config';
    import iviewArea from 'iview-area';
    import store from './store';
    
    Vue.use(iviewArea);
    
    /**
     * 表示当前的应用启动的时候是以mock的方式启动
     */
    if (runConfig.runConfig.mock) {
      require('./config/mock/mock.js')
    }
    
    Vue.config.productionTip = false
    // 引入view的国际化
    Vue.use(iView, {
      i18n: (key, value) => i18n.t(key, value)
    })
    
    // 格式化时间全局通用方法
    Vue.prototype.formatDate = function (date, fmt) {
      let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      // 国际化初始化
      i18n,
      store: store,
      components: {App},
      template: '<App/>'
    })

最后我们改造我们的main.vue页面，改造完成以后代码如下：

<template>
      <div class="layout">
        <Layout>
          
          <Header id="layout-header-scroll">
            <Menu mode="horizontal" theme="dark" active-name="1" >
              <div class="layout-logo">
                [外链图片转存失败(img-csYbcEDj-1562165658830)(https://mp.csdn.net/assets/logo.png)]
              </div>
              <div class="layout-nav">
                <language @on-lang-change="setLanguage" style="margin-right: 10px;" :lang="local"/>
              </div>
              <div class="layout-nav">
                <MenuItem name="1">
                  <Icon type="ios-paper"/>
                  内容管理
                </MenuItem>
                <MenuItem name="2">
                  <Icon type="ios-people"/>
                  用户管理
                </MenuItem>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-stats"/>
                    统计分析
                  </template>
                  <MenuGroup title="使用">
                    <MenuItem name="3-1">新增和启动</MenuItem>
                    <MenuItem name="3-2">活跃分析</MenuItem>
                    <MenuItem name="3-3">时段分析</MenuItem>
                  </MenuGroup>
                  <MenuGroup title="留存">
                    <MenuItem name="3-4">用户留存</MenuItem>
                    <MenuItem name="3-5">流失用户</MenuItem>
                  </MenuGroup>
                </Submenu>
                <MenuItem name="4">
                  <Icon type="ios-construct"/>
                  综合设置
                </MenuItem>
              </div>
            </Menu>
          </Header>
          
          <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
              <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    系统管理
                  </template>
                  <MenuItem name="1-1" to="/sys/dictList">数据字典</MenuItem>
                  <MenuItem name="1-2" to="/sys/treeList">菜单管理</MenuItem>
                  <MenuItem name="1-3" to="/sys/roleList">角色管理</MenuItem>
                  <MenuItem name="1-4" to="/sys/orgList">用户组织</MenuItem>
                </Submenu>
                <Submenu name="2">
                  <template slot="title">
                    <Icon type="ios-keypad"></Icon>
                    Item 2
                  </template>
                  <MenuItem name="2-1">Option 1</MenuItem>
                  <MenuItem name="2-2">Option 2</MenuItem>
                </Submenu>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-analytics"></Icon>
                    Item 3
                  </template>
                  <MenuItem name="3-1">Option 1</MenuItem>
                  <MenuItem name="3-2">Option 2</MenuItem>
                </Submenu>
              </Menu>
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
              
              <Breadcrumb :style="{margin: '24px 0'}">
                <BreadcrumbItem>
                  <Icon type="ios-home-outline"></Icon>
                  首页
                </BreadcrumbItem>
                <BreadcrumbItem v-for="item in breadCrumbList" v-bind:key="item.name" v-if="item.meta && item.meta.title">
                  <Icon :type="item.icon"></Icon>
                  {
       {showBreadcrumbItem(item)}}
                </BreadcrumbItem>
              </Breadcrumb>
              
              <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                <router-view/>
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    </template>
    <script>
      import Language from '../../components/language';
      import {mapMutations} from 'vuex';
    
      export default {
        components:{
          Language
        },
        data() {
          return {
            local:localStorage.getItem("lang")
          }
        },
        methods:{
          ...mapMutations([
            'setBreadCrumb'
          ]),
          /**
           * 顶部跟随着滚动条的变化而滚动
           */
          handleScroll() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop >= 60) {
              document.querySelector('#layout-header-scroll').style.top = scrollTop + 'px';
            } else {
              document.querySelector('#layout-header-scroll').style.top = '0px';
            }
          },
          setLanguage(lang) {
            this.local = lang
            localStorage.setItem('lang',lang)
          },
          showBreadcrumbItem(item) {
            return (item.meta && item.meta.title) || item.name
          }
        },
        watch: {
          '$route'(newRoute) {
            this.setBreadCrumb(newRoute.matched)
          }
        },
        computed: {
          breadCrumbList() {
            return this.$store.state.app.breadCrumbList
          }
        },
        mounted() {
          /**
           * 监听滚动条的滚动事件
           */
          window.addEventListener('scroll', this.handleScroll)
        }
      }
    </script>
    <style scoped>
      .layout-header {
        position: relative;
        z-index: 999;
        height: 60px;
      }
    
      .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
      }
    
      .layout-logo {
        width: 100px;
        height: 30px;
        border-radius: 10px;
        float: left;
        position: relative;
        left: 20px;
        top: 5px;
      }
    
      .layout-nav {
        width: auto;
        float: right;
        margin: 0 auto;
        margin-right: 20px;
      }
    </style>

最后我们运行我们的项目，这时候我们会看到我们的面包屑会随着我们点击不同的菜单而展示不同的页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
到此为止我们就完成了首页面包屑的实现了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现（二十）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之首页菜单栏的实现（二十二）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211214/cc54e36e25c34bba8390d40179551e40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211214/a92383637eab43ed9cc13602157f5c0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211214/60a3617a41204ea4bfba1e7284200c29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211214/52f7103970d4468c8f57c426f5edcdb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211214/364daf79990f40a79d6b8801e151a8ed.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94561601
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94594534