spring boot+iview 前后端分离架构之首页的实现（三）

川长思鸟来 2022-02-13 04:25 186阅读 0赞

### spring boot 与 iview 前后端分离架构之首页的实现（三） ###

*  公众号
 *  基于iview首页的实现
 *   *  首页布局的实现

# 公众号 #

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

# 基于iview首页的实现 #

在上一章节我们已经完成了登陆页面了，同时对登陆页面我们进行了表单的验证，那么登陆成功以后我们需要跳转到我们的首页，这一章节我们将实现我们首页的布局展示。

## 首页布局的实现 ##

首先打开我们的bg-admin-web工程，然后在src的view目录底下创建一个main文件夹，同时在main文件夹底下创建一个main.vue文件，那么我们采用的布局方式是为以下的布局方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
main.vue的代码如下：

<template>
      <div class="layout">
        <Layout>
          
          <Header>
            <Menu mode="horizontal" theme="dark" active-name="1">
              <div class="layout-logo"></div>
              <div class="layout-nav">
                <MenuItem name="1">
                  <Icon type="ios-navigate"></Icon>
                  Item 1
                </MenuItem>
                <MenuItem name="2">
                  <Icon type="ios-keypad"></Icon>
                  Item 2
                </MenuItem>
                <MenuItem name="3">
                  <Icon type="ios-analytics"></Icon>
                  Item 3
                </MenuItem>
                <MenuItem name="4">
                  <Icon type="ios-paper"></Icon>
                  Item 4
                </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>
                    Item 1
                  </template>
                  <MenuItem name="1-1">Option 1</MenuItem>
                  <MenuItem name="1-2">Option 2</MenuItem>
                  <MenuItem name="1-3">Option 3</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>Home</BreadcrumbItem>
                <BreadcrumbItem>Components</BreadcrumbItem>
                <BreadcrumbItem>Layout</BreadcrumbItem>
              </Breadcrumb>
              
              <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                Content
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    </template>
    <script>
      export default {
    
      }
    </script>
    <style scoped>
      .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
      }
      .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
      }
      .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
      }
    </style>

接着我们要为我们的首页配置路由，打开我们的router文件夹底下的index.js加入以下的代码：

{
          path: '/main',
          name: 'main',
          component: resolve => {
            require(['../view/main/main.vue'], resolve);
          }
        }

然后在打开我们的login.vue页面，将我们前面的点击登陆按钮以后的修改为跳转到首页，修改如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
最后我们启动我们的工程，然后到登陆页面，点击登陆按钮，我们会发现我们跳转到了首页如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
但是很明显顶部的导航栏不是我们想要的，因此我们针对顶部的导航栏做一个改造，顶部栏的左侧加上图标，右侧加上导航下拉和语言切换模块，代码如下所示：

<template>
      <div class="layout">
        <Layout>
          
          <Header>
            <Menu mode="horizontal" theme="dark" active-name="1">
              <div class="layout-logo">
                <img height="50px" width="50px" src="../../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>
                    Item 1
                  </template>
                  <MenuItem name="1-1">Option 1</MenuItem>
                  <MenuItem name="1-2">Option 2</MenuItem>
                  <MenuItem name="1-3">Option 3</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>Home</BreadcrumbItem>
                <BreadcrumbItem>Components</BreadcrumbItem>
                <BreadcrumbItem>Layout</BreadcrumbItem>
              </Breadcrumb>
              
              <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                Content
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    </template>
    <script>
      import Language from '../../components/language';
    
      export default {
        components:{
          Language
        },
        data() {
          return {
            local:localStorage.getItem("lang")
          }
        },
        methods:{
          setLanguage(lang) {
            this.local = lang
            localStorage.setItem('lang',lang)
          }
        }
      }
    </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>

改造完成以后我们启动我们的项目，这时候登陆成功以后我们可以看到我们的顶部导航栏已经发生了变化：  
![在这里插入图片描述][2019042621123536.png]  
接着我们希望我们的顶部栏会随着我们的鼠标的滚动的时候往下接着滚动，因此我们对script部分的代码进行改造。改造结果如下：

import Language from '../../components/language';
    
      export default {
        components:{
          Language
        },
        data() {
          return {
            local:localStorage.getItem("lang")
          }
        },
        methods:{
          /**
           * 顶部跟随着滚动条的变化而滚动
           */
          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)
          }
        },
        mounted() {
          /**
           * 监听滚动条的滚动事件
           */
          window.addEventListener('scroll', this.handleScroll)
        }
      }

最后我们需要给我们的Header标签加入一个id,该id的值是layout-header-scroll这样我们才可以绑定到具体的触发事件。

最后我们启动我们的项目，访问我们的main页面，我们会发现如下所示，则我们的首页布局就完成了。  
![在这里插入图片描述][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/20220213/41835fe82f0042d0910533dbaaebea04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220213/b914afab9c89408484f858f790973c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220213/776566bd737540b2bada3de54ebfc676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20220213/34d6f1bb02b64f19b79f4655992895fd.png
[2019042621123536.png]: /images/20220213/7cd8d24c1be7467894b91791a775d78b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20220213/b67da8a391a94b6b8466f21815960796.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/89501739
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/89857502