Vue项目三 项目主体页面的搭建
前言
在Vue项目二中，完成的是项目的注册和登录逻辑的实现，当我们登陆成功后，页面会跳转到路由为path:"/"的页面下，在该路由下，我们进行项目主体页面的搭建。
Vue二 登录注册功能的实现
一、项目整体布局分析
项目整体采用后台管理系统常用布局，即上布局为头部布局，下左布局为导航布局，下右布局为信息列表展示布局。如图所示。
二、页面搭建步骤
1.搭建主体展示的页面
主体展示的页面是当我们登陆成功后页面的路由发生跳转从而实现主体内容的展示。路由从"/login"跳转到"/“。由于”/“在项目创建显示的是HelloWorld.vue，所以我们在components文件下创建Layout.vue文件来实现”/"路由下的页面的搭建。
路由文件的改变配置router文件夹下的index.vue
{
path:"/",
name:"layout",
component:Layout,
},
Layout.vue
<template>
<div>
<div class="header"></div>
<div class="navbar"></div>
<div class="main"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
components: {
},
methods: {
},
};
</script>
<style>
.header {
position: absolute;
line-height: 50px;
padding: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: #2d3a4b;
}
/* 左侧导航栏 */
.navbar {
position: absolute;
width: 230px;
top: 50px;
left: 0px;
bottom: 0px;
overflow-y: auto;
background-color: #545c64;
}
/* 右侧主区域 */
.main {
position: absolute;
top: 50px;
left: 230px;
right: 0px;
bottom: 0px;
padding: 10px;
overflow-y: auto;
}
</style>
2.抽离div作为子组件存储
我们需要对这三个布局组件进行样式设计，如果放在一起，不方便管理，所以我们在components创建AppHeader，AppMain，AppNavbar来存放三个布局。在这三个文件夹下创建index.vue。将Layout.vue的div抽离出来。
注意： 在layout导入，并且注册，最后再使用。
那么Layout.vue代码如下：
<template>
<div>
<app-header></app-header>
<app-navbar></app-navbar>
<app-main></app-main>
</div>
</template>
<script>
import AppHeader from "./AppHeader";
import AppNavbar from "./AppNavbar";
import AppMain from "./AppMain";
export default {
data() {
return {
};
},
components: {
AppHeader,
AppNavbar,
AppMain,
},
methods: {
},
};
</script>
三.头部，左侧导航和右侧列表切换的布局
3.1头部布局实现
头部布局主要显示的是项目的名称,右侧实现修改密码和登录功能的实现。
AppHeader
<template>
<div class="header">
</div>
</template>
分析：左侧的标题是一张图片加上文字，所以应用img和span，这个标签点击会回到首页，所以用a标签包裹这两个东西。
<a href="#">
<img src="@/assets/logo.png" width="25px" class="logo" />
<span class="title">学堂</span>
</a>
右侧的下拉表单可以通过ElementUI组件库实现。
Dropdown下拉菜单
我们择下拉菜单中的指令事件来实现我们的右侧布局。
头部右侧下拉表单
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
admin<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">修改密码</el-dropdown-item>
<el-dropdown-item command="b">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
表单验证方法
methods: {
handleCommand(command) {
this.$message("click on item " + command);
}
}
头部css布局
<style scoped>
.logo {
vertical-align: middle;
padding: 0 10px 0 40px;
}
.title {
color: white;
position: absolute;
}
.el-dropdown {
float: right;
margin-right: 40px;
}
.el-dropdown-link {
color: #409EFF;
cursor: pointer;
}
</style>
3.2左侧导航组件实现
NavMenu导航菜单
AppNavbar
<template>
<div class="navbar">
<el-menu
:router="true"
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="/home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/teacher/">
<i class="el-icon-user-solid"></i>
<span slot="title">教师管理</span>
</el-menu-item>
<el-menu-item index="/student/">
<i class="el-icon-s-cooperation"></i>
<span slot="title">学生管理</span>
</el-menu-item>
</el-menu>
</div>
</template>
:router="true"开启路由功能,则 index指定路由地址，default-active 默认选中哪个菜单,选中为黄色。
这里我们写出了路由，所以我们需要再router下的index.js配置路由。
import Vue from "vue";
import VueRouter from "vue-router";
// import Register from "../views/register"
import Register from "../views/register";
import Login from "../views/login";
import Home from "../views/home";
import Teacher from "../views/teacher";
import Student from "../views/student"
import Layout from "../components/Layout.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/register",
name: "register",
component: Register,
},
{
path: "/login",
name: "login",
component: Login,
},
{
path:"/",
name:"layout",
component:Layout,
redirect:"/home",
children:[
{
path: "/home",
component: Home,
meta:{
title:'首页'}
},
// {
// path: "/teacher",
// component: Teacher,
// meta:{title:'教师管理'}
// },
]
},
{
path:"/teacher",
component:Layout,
children:[
{
path:"/",
component:Teacher,
meta:{
title:'教师管理'}
}
]
},
{
path:"/student",
component:Layout,
children:[
{
path:"/",
component:Student,
meta:{
title:"学生管理"}
}
]
}
];
const router = new VueRouter({
// mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
这里我们将首页，教师列表和学生列表的路由进行配置，并且再index.js文件中通过import将这些组件进行导入。
并且在views下创建home，teacher，student
3.3右侧列表切换内容展示
右侧主要是左侧路由切换时右侧内容也发生变化，右侧的头部使用ElementUI表单的Breadcrumb面包屑实现横向路由导航。然后是内容的展示。
AppMain
<template>
<div>
<div class="main">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: $route.path }" class="line">{
{
$route.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>
</div>
</div>
</template>
为方便管理我们将el-breadcrumb横向导航路由抽离出来，作为AppMain的子组件，创建出一个AppLink来保存
AppLink.vue
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: $route.path }" class="line">{
{
$route.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
data() {
return {
};
},
components: {
},
methods: {
},
};
</script>
<style scoped>
.el-breadcrumb{
height: 10px;
padding:20px;
border-radius:4px;
box-shadow:0px 2px 3px 0px black;
}
.line{
border-left:10px solid greenyellow;
padding-left:10px;
}
</style>
抽离后的AppMain下的index.vue
<template>
<div>
<div class="main">
<app-link v-show = "$route.path !='/home'"></app-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import AppLink from './AppLink.vue';
export default {
data() {
return {
};
},
components: {
AppLink},
methods: {
},
};
</script>
<style scoped>
</style>
这里添加的v-show是当路由为/home(v-show=false)不显示横向导航路由。
总结
本章主要写的是项目页面布局功能的实现，分为头部，左侧导航和右侧切换列表的实现。