spring boot + Vue + iView前后端分离架构(Mac版) – (三)首页布局与实现
一、首页的布局
在src-->view-->main
目录下,创建main.vue
文件,内容如下:
<template>
<div class="layout">
<Layout>
<!-- Header 表示头部的位置-->
<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">
<Submenu name="1">
<template slot="title">
<Icon type="ios-paper"/>
试题管理
</template>
<MenuItem name="1-1">试题录入</MenuItem>
<MenuItem name="1-2">试题修改</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-people"/>
用户管理
</template>
<MenuItem name="2-1">用户录入</MenuItem>
<MenuItem name="2-2">用户修改</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-stats"/>
统计分析
</template>
<MenuItem name="3-1">试题统计</MenuItem>
<MenuItem name="3-2">用户统计</MenuItem>
</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">试题录入</MenuItem>
<MenuItem name="1-2">试题排版</MenuItem>
<MenuItem name="1-3">试题勘误</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
学校管理
</template>
<MenuItem name="2-1">考研真题</MenuItem>
<MenuItem name="2-2">院校信息</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
复试管理
</template>
<MenuItem name="3-1">复试专业课</MenuItem>
<MenuItem name="3-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:{
/**
* 顶部跟随着滚动条的变化而滚动
*/
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)
}
}
</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>
二、配置首页路由
在src-->router-->index.js
中添加首页路由映射:
{
path: '/main',
name: 'main',
component: resolve => {
require(['../view/main/main.vue'], resolve);
}
}
在src-->login-->login.vue
中添加点击登录后跳转到首页,修改如下:
三、重启项目访问即可
cnpm run dev
执行后,访问login页面,因为没有做用户认证,随便输入用户名和密码即可跳转首页。