Vue 2.x + Element后台模板开发教程（三）后台首页模板设计

2024-07-13 21:38| 来源: 网络整理| 查看: 265

最近在学习vue.js开发，想做个简单的管理系统，研究了很长时间，看了很多慕课网的视频教程，教程地址：https://www.imooc.com/new/course/list?c=vuejs，看完教程开始试着做项目，做到后台首页被几个问题困扰了很久。

1、后台模板，模板功能怎么实现，之前都是嵌套iframe，现在怎么处理呢？研究了两天，发现这里的控制使用子路由实现，vue在路由跳转时，跳转到子路由会保留父路由的页面内容。

2、从网上下载了很多代码，都没跑起来，左侧菜单都是动态的，都得配置接口程序。

3、vue后台模板路由也需要根据接口返回权限动态实现，如果访问地址路由里面没有跳转到404页面。

本文实现的后台模板只是静态页面，动态路由、动态菜单会随着学习逐步完善。

先看看效果图：

实现思路：先创建一个主模板文件，home.vue，然后顶部是一个组件header.vue，底部是一个组件footer.vue，左侧菜单栏是一个组件Sidebar.vue，还有个tags.vue组件用于管理打开页面，中间内容部分是一个用于展示具体跳转的页面，新增完目录如下：

home页面代码：

.content_wrapper { display: flex; flex-direction: column; height: 100%; .content_inner { // background: #fff; height: 100%; } } import vHead from './Header.vue'; import vSidebar from './Sidebar.vue'; import vTags from './Tags.vue'; import vFooter from './Footer.vue'; import bus from './bus'; export default { data() { return { tagsList: [], collapse: false } }, components: { vHead, vSidebar, vTags, vFooter }, created() { bus.$on('collapse', msg => { this.collapse = msg; }) // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 bus.$on('tags', msg => { let arr = []; for (let i = 0, len = msg.length; i vHead, vSidebar, vTags, vFooter },

以上代码引用各个子组件。

Header.vue代码如下：

孔子人才网后台管理系统 getlev}} --> admin 用户名关于作者项目仓库赞助作者切换中文切换英文退出登录 import bus from './bus'; export default { data() { return { collapse: false, fullscreen: false, name: 'merciqiao', lev:'青铜级', message: 2 } }, computed:{ username(){ let username = this.$common.getSessionStorage('username'); return username ? username : this.name; }, getlev(){ let levList = this.$common.getSessionStorage('lev',true); let lev=''; if(levList){ for(var i=0;i // 用户名下拉菜单选择事件 handleCommand(command) { if(command == 'loginout'){ this.$common.removeSessionStorage('token'); this.$router.push('/login'); } else if(command == 'changeZh'){ this.$i18n.locale = 'zh_CN'; } else if(command == 'changeEn'){ this.$i18n.locale = 'en_US'; } }, // 侧边栏折叠 collapseChage(){ this.collapse = !this.collapse; bus.$emit('collapse', this.collapse); }, // 全屏事件 handleFullScreen(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; } }, mounted(){ if(document.body.clientWidth position: relative; box-sizing: border-box; width: 100%; height: 70px; font-size: 22px; color: #fff; background-color: #07c4a8; } .collapse-btn{ float: left; padding: 0 21px; cursor: pointer; line-height: 70px; } .header .logo{ float: left; width:250px; line-height: 70px; } .header-right{ float: right; padding-right: 50px; } .header-user-con{ display: flex; height: 70px; align-items: center; } .btn-fullscreen{ transform: rotate(45deg); margin-right: 5px; font-size: 24px; } .btn-bell, .btn-fullscreen{ position: relative; width: 30px; height: 30px; text-align: center; border-radius: 15px; cursor: pointer; } .btn-bell-badge{ position: absolute; right: 0; top: -2px; width: 8px; height: 8px; border-radius: 4px; background: #f56c6c; color: #fff; } .btn-bell .el-icon-bell{ color: #fff; } .user-name{ margin-left: 10px; } .user-avator{ margin-left: 20px; } .user-avator img{ display: block; width:40px; height:40px; border-radius: 50%; } .el-dropdown-link{ color: #fff; cursor: pointer; } .el-dropdown-menu__item{ text-align: center; }

footer.vue组件代码如下：

$t("footer.title")}}--> footer{ border-top:1px solid #ddd; flex: 0 0 auto; .footer_content{ width: 340px; margin: 0 auto; text-align: center; line-height: 60px; height: 60px; color:#606266; .qq{ font-size: 9px; } } }

Siderbar.vue组件代码如下：

导航一分组一选项1 选项2 选项3 选项4 选项1 导航二导航三导航四 item.title }} {{ subItem.title }} --> import bus from './bus'; import { mapGetters } from 'vuex' export default { data() { return { collapse: false, items: [{ icon: 'el-icon-setting', index: 'index', title: '系统首页', }, { icon: 'el-icon-tickets', index: 'table', title: '基础模块', subs: [{ index: 'searchinput', title: '查询输入页' }, { index: 'tabpage', title: '标签选项卡' }, { index: 'tablepage', title: '综合表格页' }, { index: 'formpage', title: '表单页' }, { index: 'treepage', title: '树组件页' } ] }, { icon: 'el-icon-setting', index: '3', title: '系统管理', subs: [{ index: 'organizationTree', title: '机构管理' }, { index: 'sysUser', title: '用户管理' }, { index: 'sysRole', title: '角色管理' }, { index: 'sysAcl', title: '角色资源授权' }, { index: 'sysResource', title: '资源管理' }, { index: 'sysMenu', title: '菜单管理' } ] }, // { // icon: 'el-icon-message', // index: 'tabs', // title: 'tab选项卡' // }, // { // icon: 'el-icon-date', // index: '3', // title: '表单相关', // subs: [ // { // index: 'form', // title: '基本表单' // }, // { // index: 'editor', // title: '富文本编辑器' // }, // { // index: 'markdown', // title: 'markdown编辑器' // }, // { // index: 'upload', // title: '文件上传' // } // ] // }, // { // icon: 'el-icon-star-on', // index: 'charts', // title: 'schart图表' // }, // { // icon: 'el-icon-rank', // index: 'drag', // title: '拖拽列表' // }, // { // icon: 'el-icon-warning', // index: 'permission', // title: '权限测试' // }, { icon: 'el-icon-error', index: '404', title: '404页面' } ] } }, computed: mapGetters({ menuList: 'getMenuList', onRoutes() { return this.$route.path.replace('/', ''); } }), created() { // 通过 Event Bus 进行组件间通信，来折叠侧边栏 bus.$on('collapse', msg => { this.collapse = msg; }) } } .sidebar { display: block; position: absolute; left: 0; top: 70px; bottom: 0; overflow-y: scroll; } .sidebar::-webkit-scrollbar { width: 0; } .sidebar-el-menu:not(.el-menu--collapse) { width: 250px; } .sidebar>ul { height: 100%; }

Tags.vue组件代码如下：

{{item.title}} 标签选项关闭其他关闭所有 import bus from './bus'; export default { data() { return { tagsList: [] } }, methods: { isActive(path) { return path === this.$route.fullPath; }, // 关闭单个标签 closeTags(index) { const delItem = this.tagsList.splice(index, 1)[0]; const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; if (item) { delItem.path === this.$route.fullPath && this.$router.push(item.path); }else{ this.$router.push('/'); } }, // 关闭全部标签 closeAll(){ this.tagsList = [{ name: "index", path: "/index", title: "系统首页" }]; this.$router.push('/'); }, // 关闭其他标签 closeOther(){ const curItem = this.tagsList.filter(item => { return item.path === this.$route.fullPath; }) this.tagsList = curItem; }, // 设置标签 setTags(route){ const isExist = this.tagsList.some(item => { return item.path === route.fullPath; }) !isExist && this.tagsList.push({ title: route.meta.title, path: route.fullPath, // name: route.matched[1].components.default.name name: route.name }) bus.$emit('tags', this.tagsList); }, handleTags(command){ command === 'other' ? this.closeOther() : this.closeAll(); } }, computed: { showTags() { return this.tagsList.length > 0; } }, watch:{ $route(newValue, oldValue){ this.setTags(newValue); } }, created(){ this.setTags(this.$route); } } $tag_height:34px;//tab高度变量 .tags { position: relative; height: $tag_height; overflow: hidden; background: #fff; padding-right: 120px; flex: 0 0 auto; } .tags ul { box-sizing: border-box; width: 100%; height: 100%; } .tags-li { float: left; margin: 3px 5px 2px 3px; border-radius: 3px; font-size: 12px; overflow: hidden; cursor: pointer; height: $tag_height - 8px; line-height: $tag_height - 8px; border: 1px solid #e9eaec; background: #fff; padding: 0 5px 0 12px; vertical-align: middle; color: #666; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; transition: all .3s ease-in; } .tags-li:not(.active):hover { background: #f8f8f8; } .tags-li.active { color: #fff; } .tags-li-title { float: left; max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 5px; color: #666; } .tags-li.active .tags-li-title { color: #fff; } .tags-close-box { position: absolute; right: 0; top: 0; box-sizing: border-box; padding-top: 1px; text-align: center; width: 110px; height: $tag_height; background: #fff; box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); z-index: 10; }

最后修改路由配置文件，代码如下：

const routes = [{ path: '/', name: 'Login', component: Login }, { name: 'Home', path: '/Home', component: Home, meta: { title: '系统首页' } } ]

项目创建是用的vue cli3脚手架创建的。

【本文地址】

公司简介

联系我们