团购网站单页模板,网站推广的四个阶段包括,自动化发布 iis网站,西安哪家做网站公司好前言
本文为博主的vue实战小项目系列中的第三篇#xff0c;很适合后端或者才入门的小伙伴看#xff0c;一个前端项目从0到1的保姆级教学。前面的内容#xff1a;
【vue实战项目】通用管理系统#xff1a;登录页-CSDN博客
【vue实战项目】通用管理系统#xff1a;封装to…前言
本文为博主的vue实战小项目系列中的第三篇很适合后端或者才入门的小伙伴看一个前端项目从0到1的保姆级教学。前面的内容
【vue实战项目】通用管理系统登录页-CSDN博客
【vue实战项目】通用管理系统封装token操作和网络请求-CSDN博客
【vue实战项目】通用管理系统api封装、404页-CSDN博客
本文将讲解实现整个项目的重点首页的搭建包含菜单、菜单的路由转跳、面包屑导航等内容。 目录
1.搭架子
2.布局
编辑
3.Header
4.Footer
5.Menu
5.1.页面
5.2.路由
5.2.1自定义菜单内容
5.2.2.开启路由功能
6.面包屑导航 1.搭架子
先来看一下主页的样子
主页的结构头部中间底部也就是由header、menu、footer三个组件组成。由于这三个组件是很多页面都要用到的公共组件所以在components下面建一个common用来放这些公共组件。然后分别建三个组件的架子先建三个空白的架子吧后面一点点往这三个组件里填内容。
先把这三个组件写出来先写三个空白的架子即可后面再慢慢填充 header
templatedivfooter/div
/templatescript
export default{data(){return {}}
}
/script
style langless scoped/style
footer
templatedivfooter/div
/templatescript
export default{data(){return {}}
}
/script
style langless scoped/style
menu
templatedivmenu/div
/templatescript
export default{data(){return {}}
}
/script
style langless scoped/style
在helloworld组件里面引入一下看看能不能正常引入
templatediv classhelloworldHeader/HeaderMenu/Footer//div
/templatescript
import Footer from ./common/Footer.vue
import Header from ./common/Header.vue
import Menu from ./common/Menu.vue
export default {components:{Footer,Menu,Header},data(){return{}}
}
/script
能正常引入的话页面上会显示几个组件的内容 然后基于原来的HelloWorld改成Home页面
templatediv classhomeHeader/HeaderMenu/Footer//div
/templatescript
import Footer from ./common/Footer.vue
import Header from ./common/Header.vue
import Menu from ./common/Menu.vue
export default {components:{Footer,Menu,Header},data(){return{}}
}
/scriptstyle langless
.home{width: 100%;height: 100%;
}
/style
2.布局
准备好三个组件后接下来就是对Home进行布局既然用了UI框架直接用elementUI提供的布局即可在其官网上有 选一个改一改然后调整一下样式
templatediv classhomeHeader/el-container classcontentMenu/el-containerel-mainMain/el-mainel-footerFooter//el-footer/el-container/el-container/div
/templatescript
import Footer from ./common/Footer.vue
import Header from ./common/Header.vue
import Menu from ./common/Menu.vue
export default {components:{Footer,Menu,Header},data(){return{}}
}
/scriptstyle langless
.home{width: 100%;height: 100%;.content{position: absolute;width: 100%;top: 60px;bottom: 0;}
}
/style3.Header
接下来需要调整一下header根据上面的效果图可以看到header上面要显示系统的名字和登录用户的用户名。系统名称直接写死用户名可以用到我们之前封装的setToken.js去取登陆后我们放在缓存中的username作为用户名来显示。
templatedivel-headerdiv classtitle通用管理系统/divdiv{{name}}/div/el-header/div
/templatescript
import {getToken} from /utils/setToken.js
export default{data(){return {name:}},created(){this.namegetToken(username)}
}
/script
style langless scoped/style
系统名称要在最左边用户名要在最右边所以调整一下样式
templatediv classheaderel-headerdiv classtitle通用管理系统/divdiv{{name}}/div/el-header/div
/templatescript
import {getToken} from /utils/setToken.js
export default{data(){return {name:}},created(){this.namegetToken(username)}
}
/script
style langless scoped.header{.el-header{background: #2578b5;color: #fff;line-height: 60px;display: flex;justify-content: space-between;.title{width:200px;font-size: 24px;}}}
/style
这样Header就处理好了。
4.Footer
footer比较简单用一个el-card来包裹加上一些文字内容就可以了。
templatediv classfooterel-cardFrontend 2023 BugMan/el-card/div
/templatescript
export default{data(){return {}}
}
/script
style langless scoped/style
5.Menu
5.1.页面
菜单组件elementUI也提供了 去找一个然后调整一下即可
templatediv classmenuel-aside width200pxel-col :span12h5自定义颜色/h5el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/el-col/el-aside/div
/templatescript
export default {data() {return {};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
/script
style langless scoped/style
看一下效果图会发现菜单虽然是引进去了但是样式很奇怪所以接下来要做的就是调整菜单样式。 有左右和上下的滑动条说明高度和宽度不够将高度拉到100%宽度调宽一点即可。背景色不和谐需要手动调整一下背景色。具体的样式调整后整个menu组件内容如下
templatediv classmenuel-aside width200pxel-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#2578b5text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/el-aside/div
/templatescript
export default {data() {return {};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
/script
style langless scoped
.menu{.el-aside{height: 100%;.el-menu{height:100%;}.el-submenu .el-menu-item{min-width: 0;}}
}
/style
调整后的效果 我们其实用不到那么多一级菜单只保留一个导航一即可并且其实我们也不需要elementUI自带的示例里面给出的handleOpen和handleClose方法所以这里再整理一下页面最终的内容和效果如下
templatediv classmenuel-aside width200pxel-menudefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-aside/div
/templatescript
export default {data() {return {};},
};
/script
style langless scoped
.menu{.el-aside{height: 100%;.el-menu{height:100%;}.el-submenu .el-menu-item{min-width: 0;}}
}
/style
最终调整后的效果 5.2.路由
5.2.1自定义菜单内容
菜单最核心的内容自然是点某一项转跳到某一个组件上去。接下来我们要完成的就是菜单的路由转跳。
首先改写一下路由文件
import Vue from vue
import Router from vue-routerVue.use(Router)export default new Router({routes:[{path:/,redirect:/login,component: ()import(/components/Login)},{path:/login,name:Login,component: ()import(/components/Login)},{path:/home,name:学生管理,iconClass:fa fa-users,//默认转跳到学生管理页redirect:/home/student,component: ()import(/components/Home),children:[{path:/home/student,name:学生列表,iconClass:fa fa-list,component: ()import(/components/students/StudentList),},{path:/home/info,name:信息列表,iconClass:fa fa-list-alt,component: ()import(/components/students/InfoList),},{path:/home/info,name:信息管理,iconClass:fa fa-list-alt,component: ()import(/components/students/InfoLists),},{path:/home/work,name:作业列表,iconClass:fa fa-list-ul,component: ()import(/components/students/WorkList),},{path:/home/info,name:作业管理,iconClass:fa fa-list,component: ()import(/components/students/WorkMent),}]},{path:/home/dataview,name:数据分析,iconClass:fa fa-bar-chart,component: ()import(/components/Home),children:[{path:/home/dataview,name:数据概览,iconClass:fa fa-list,component: ()import(/components/dataAnalysis/DataView),},{path:/home/mapview,name:地图概览,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/DataView),},{path:/home/travel,name:旅游地图,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/ScoreMap),},{path:/home/score,name:分数地图,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/TravelMap),}]},{path:/users,name:用户中心,iconClass:fa fa-user,component: ()import(/components/Home),children:[{path:/home/user,name:用户概览,iconClass:fa fa-list,component: ()import(/components/users/User),}]},{path:*,name:NotFound,component:()import(/components/NotFound)}],mode:history
})
在menu中打印一下看能不能取到配置好的index.js的内容
script
export default {data() {return {menus:[]};},created(){console.log(this.$router.options.routes);}
};
/script
可以看到是有数据的有数据那就很好办了 去遍历菜单把数据取出来绑定到菜单栏上去即可
templatediv classmenuel-aside width200pxel-menudefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04btemplate v-for(item,index) in menusel-submenu :indexindex :keyindextemplate slottitlei classel-icon-location/ispan{{item.name}}/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-submenu/template/el-menu/el-aside/div
/templatescript
export default {data() {return {menus:[]};},created(){console.log(this.$router.options.routes);this.menus[...this.$router.options.routes]}
};
/script
style langless scoped
.menu{.el-aside{height: 100%;.el-menu{height:100%;}.el-submenu .el-menu-item{min-width: 0;}}
}
/style
可以看到已经取到我们配置的导航菜单了 会发现还有一个问题Login、用户中心、404页并不是我们想展示出来的这里需要给菜单项加上一个是否隐藏的属性在遍历时去判断该属性从而决定是不是要显示
import Vue from vue
import Router from vue-routerVue.use(Router)export default new Router({routes:[{path:/,redirect:/login,hidden:true,component: ()import(/components/Login)},{path:/login,name:Login,hidden:true,component: ()import(/components/Login)},{path:/home,name:学生管理,iconClass:fa fa-users,//默认转跳到学生管理页redirect:/home/student,component: ()import(/components/Home),children:[{path:/home/student,name:学生列表,iconClass:fa fa-list,component: ()import(/components/students/StudentList),},{path:/home/info,name:信息列表,iconClass:fa fa-list-alt,component: ()import(/components/students/InfoList),},{path:/home/info,name:信息管理,iconClass:fa fa-list-alt,component: ()import(/components/students/InfoLists),},{path:/home/work,name:作业列表,iconClass:fa fa-list-ul,component: ()import(/components/students/WorkList),},{path:/home/info,name:作业管理,iconClass:fa fa-list,component: ()import(/components/students/WorkMent),}]},{path:/home/dataview,name:数据分析,iconClass:fa fa-bar-chart,component: ()import(/components/Home),children:[{path:/home/dataview,name:数据概览,iconClass:fa fa-list,component: ()import(/components/dataAnalysis/DataView),},{path:/home/mapview,name:地图概览,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/DataView),},{path:/home/travel,name:旅游地图,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/ScoreMap),},{path:/home/score,name:分数地图,iconClass:fa fa-line-chart,component: ()import(/components/dataAnalysis/TravelMap),}]},{path:/users,name:用户中心,iconClass:fa fa-user,component: ()import(/components/Home),children:[{path:/home/user,name:用户概览,iconClass:fa fa-list,component: ()import(/components/users/User),}]},{path:*,name:NotFound,hidden:true,component:()import(/components/NotFound)}],mode:history
})
templatediv classmenuel-aside width200pxel-menudefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04btemplate v-for(item,index) in menusel-submenu :indexindex :keyindex v-if!item.hiddentemplate slottitlei classel-icon-location/ispan{{item.name}}/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-submenu/template/el-menu/el-aside/div
/templatescript
export default {data() {return {menus:[]};},created(){console.log(this.$router.options.routes);this.menus[...this.$router.options.routes]}
};
/script
style langless scoped
.menu{.el-aside{height: 100%;.el-menu{height:100%;}.el-submenu .el-menu-item{min-width: 0;}}
}
/style
效果
把二级菜单一起调整出来
templatediv classmenuel-aside width200pxel-menudefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04btemplate v-for(item,index) in menusel-submenu :indexindex :keyindex v-if!item.hiddentemplate slottitlei :classitem.iconClass/ispan{{item.name}}/span/templateel-menu-item-group v-for(child,index) in item.children :keyindexel-menu-item :indexchild.pathi :classchild.iconClass{{child.name}}/i/el-menu-item/el-menu-item-group/el-submenu/template/el-menu/el-aside/div
/templatescript
export default {data() {return {menus:[]};},created(){console.log(this.$router.options.routes);this.menus[...this.$router.options.routes]}
};
/script
style langless scoped
.menu{.el-aside{height: 100%;.el-menu{height:100%;.fa{margin-right: 10px;}}.el-submenu .el-menu-item{min-width: 0;}}
}
/style 5.2.2.开启路由功能
先给meun组件上的elementUI的导航栏开启路由功能这样点击导航栏路径才会对应转跳
el-menurouterdefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04b
然后在home上给出路由出口
templatediv classhomeHeader/el-container classcontentMenu/el-containerel-mainrouter-view/router-view/el-mainel-footerFooter//el-footer/el-container/el-container/div
/template
可以看到路由可以正常工作了 6.面包屑导航
整个首页的架子已经搭好了也完成了菜单的转跳但是还差个细节就是面包屑导航栏 去elementUI官网上找一个面包屑的导航组件 在common下面新建一个面包屑组件调整一下官网上扣下来的内容使得其可以取到我们真实菜单的内容 Home里面引入使用一下即可
templatediv classhomeHeader/el-container classcontentMenu/el-containerel-mainBreadcrumb/router-view/router-view/el-mainel-footerFooter//el-footer/el-container/el-container/div
/templatescript
import Footer from ./common/Footer.vue
import Header from ./common/Header.vue
import Menu from ./common/Menu.vue
import Breadcrumb from ./common/Breadcrumb.vue
export default {components:{Footer,Menu,Header,Breadcrumb},data(){return{}}
}
/scriptstyle langless
.home{width: 100%;height: 100%;.content{position: absolute;width: 100%;top: 60px;bottom: 0;}
}
/style
