1.期望目标
如图,我们的前端页面很简单,头部导航栏,左侧导航栏,主体待填的内容。管理后台的常用布局。
2. 前端项目结构
我们编写的前端项目结构如上图,最底部的Home.vue作为主页,导航栏和其他内容作为home的组件。common文件夹存放了头部导航栏和侧边栏。library文件夹暂时只放了一个LinbraryIndex.vue。login文件夹还是一个登陆页面和hello页面。stu_manage文件夹存放了三个文件,班级信息管理,学生信息管理。学生成绩管理。
3.编写Home.vue
看完整理结构,我们先来看一个Home.vue。代码很简单,在部分引入了两个导航栏组件,继而挂载。这部分都是套路。使用组件,路由嵌套。
路由嵌套,会在接下来的开发体会到的。
// 引入两个导航栏作为组件 import NavMenu from './common/NavMenu' import SideMenu from './common/SideMenu' export default { name: "Home", // 挂载组件 components:{ NavMenu, SideMenu } }
4.编写头部导航栏NavMenu.vue
在elementUI官网上复制的,稍微改了改。没有什么技巧。
style="width: 100%;left: -5px;" mode="horizontal" background-color="#324157" text-color="#bfcbd9" active-text-color="#ffd04b"> VUE+SpringCloud,从入门到放弃 更多功能 export default { name: 'NavMenu', data () { return { } } } a{ text-decoration: none; } span { pointer-events: none; }
5.编写侧边导航栏
侧边导航栏看起来挺复杂的,就是一些循环而已。没有什么值得说的,都是套路。
有一个router关键词,它代表着:是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router> {{ item.title }} {{ subItem.title }} {{ threeItem.title }} {{ subItem.title }} {{ item.title }}
export default { data() { return { collapse: false, items: [{ icon: 'el-icon-s-home', index: 'dashboard', title: '首页', }, { icon: 'el-icon-s-management', index: '1', title: '学生管理', subs: [ { index: 'stuInfoMgmt', title: '学生信息管理' }, { index: 'stuPerfMgmt', title: '学生成绩管理' }, { index: 'classInfoMgmt', title: '班级信息管理' } ] }, { icon: 'el-icon-s-data', index: '2', title: '图书馆', subs: [ { index: 'serviceCodeRegister', title: '图书浏览' }, { index: 'serviceMenu', title: '我的收藏' } ] } ] } }, computed: { onRoutes() { return this.$route.path.replace('/', '') } } } .sidebar { display: block; position: absolute; left: 2px; top: 70px; bottom: 0; /*overflow-y: scroll;*/ } .sidebar::-webkit-scrollbar { width: 0; } .sidebar-el-menu:not(.el-menu--collapse) { width: 200px; } .sidebar>ul { height: 100%; }
6.添加路由
import Home from '@/components/Home'
{ path: '/home', name: 'Home', component: Home }
这时我们访问:http://localhost:8080/#/home
7. 编写其他页面
ClassInfoMgmt.vue,StuInfoMgmt.vue,StuPerfMgmt.vue三个页面,因为现在还没填什么内容,故而不写什么东西。
学生成绩管理
export default { name: "StuPerfMgmt" }
只写一个div,展示一下内容即可。
8. 修改路由
修改我们刚才写的home路由
{ path: '/home', name: 'Home', component: Home, //home页面不需要被访问 redirect: '/stuInfoMgmt', children:[ { path: '/stuInfoMgmt', component: resolve => require(['@/components/stu_manage/StuInfoMgmt.vue'], resolve), meta: { title: 'stuInfoMgmt' } }, { path: '/stuPerfMgmt', component: resolve => require(['@/components/stu_manage/StuPerfMgmt.vue'], resolve), meta: { title: 'stuPerfMgmt' } },
加上children里面的内容即可,整个页面的结构就算搭建完成。接下来我们就分别去相应页面中填充相应信息。
9.总结
VUE的前端代码比较散碎,组件化代码的好处与缺点吧。刚开始接触挺晕乎的,后面见多了,其实都一样了。