关键词:
组件封装
为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。
组件结构
组件封装重构后,试图组件结构如下图所示
代码一览
Home组件被简化,包含导航、头部和主内容三个组件。
Home.vue
<template> <div class="container"> <!-- 导航菜单栏 --> <MenuBar></MenuBar> <!-- 头部区域 --> <HeadBar></HeadBar> <!-- 主内容区域 --> <Main></Main> </div> </template> <script> import HeadBar from "./HeadBar/HeadBar" import MenuBar from "./MenuBar/MenuBar" import Main from "./Main/Main" export default components: HeadBar, MenuBar, Main ; </script> <style scoped lang="scss"> .container position:absolute; top: 0px; left: 0px; right: 0px; background: #4b5f6e; </style>
HeadBar.vue
<template> <div class="container"> <!-- 导航菜单隐藏显示切换 --> <span class="collapse-switcher" @click.prevent="collapse"> <i class="el-icon-menu"></i> </span> <!-- 导航菜单 --> <span class="nav-bar"> <el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar()"> <el-menu-item index="1" @click="$router.push(‘/‘)">$t("common.home")</el-menu-item> <el-menu-item index="2">$t("common.doc")</el-menu-item> <el-menu-item index="3">$t("common.msgCenter")</el-menu-item> </el-menu> </span> <span class="tool-bar"> <!-- 主题切换 --> <ThemePicker class="theme-picker"></ThemePicker> <!-- 语言切换 --> <LangSelector class="lang-selector"></LangSelector> <!-- 用户信息 --> <el-dropdown class="user-info-dropdown" trigger="hover"> <span class="el-dropdown-link"><img :src="this.userAvatar" /> username</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>$t("common.myMsg")</el-dropdown-item> <el-dropdown-item>$t("common.config")</el-dropdown-item> <el-dropdown-item divided @click.native="logout">$t("common.logout")</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </span> </div> </template> <script> import mock from "@/mock/index.js"; import ThemePicker from "@/components/ThemePicker" import LangSelector from "@/components/LangSelector" export default components: ThemePicker, LangSelector , data() return isCollapse: false, username: "Louis", userAvatar: "", activeIndex: ‘1‘ ; , methods: selectNavBar(key, keyPath) console.log(key, keyPath) , // 语言切换 handleCommand(command) let array = command.split(‘:‘) let lang = array[0] === ‘‘ ? ‘zh_cn‘ : array[0] let label = array[1] document.getElementById("language").innerHTML = label this.$i18n.locale = lang , //折叠导航栏 collapse: function() this.isCollapse = !this.isCollapse; , //退出登录 logout: function() var _this = this; this.$confirm("确认退出吗?", "提示", type: "warning" ) .then(() => sessionStorage.removeItem("user"); this.$router.push ("/login"); ) .catch(() => ); , mounted() this.sysName = "I like Kitty"; var user = sessionStorage.getItem("user"); if (user) this.userName = user; this.userAvatar = require("@/assets/user.png"); ; </script> <style scoped lang="scss"> .container position: absolute; left: 200px; right: 0px; height: 60px; line-height: 60px; .collapse-switcher width: 40px; float: left; cursor: pointer; border-color: rgba(111, 123, 131, 0.8); border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid; color: white; background: #504e6180; .nav-bar margin-left: auto; float: left; .el-menu background: #504e6180; .tool-bar float: right; .theme-picker padding-right: 10px; .lang-selector padding-right: 10px; font-size: 15px; color: #fff; cursor: pointer; .user-info-dropdown font-size: 20px; padding-right: 20px; color: #fff; cursor: pointer; img width: 40px; height: 40px; border-radius: 10px; margin: 10px 0px 10px 10px; float: right; </style>
MenuBar.vue
<template> <div class="menu-bar-container"> <!-- logo --> <div class="logo" :class="isCollapse?‘menu-bar-collapse-width‘:‘menu-bar-width‘"> <img :src="this.logo" /> <div>isCollapse?‘‘:sysName</div> </div> <!-- 导航菜单 --> <el-menu default-active="1-1" :class="isCollapse?‘menu-bar-collapse-width‘:‘menu-bar-width‘" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">$t("sys.sysMng")</span> </template> <el-menu-item index="1-1" @click="$router.push(‘user‘)">$t("sys.userMng")</el-menu-item> <el-menu-item index="1-2" @click="$router.push(‘dept‘)">$t("sys.deptMng")</el-menu-item> <el-menu-item index="1-3" @click="$router.push(‘role‘)">$t("sys.roleMng")</el-menu-item> <el-menu-item index="1-4" @click="$router.push(‘menu‘)">$t("sys.menuMng")</el-menu-item> <el-menu-item index="1-5" @click="$router.push(‘log‘)">$t("sys.logMng")</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">$t("sys.sysMonitor")</span> </template> </el-submenu> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">$t("sys.nav3")</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">$t("sys.nv4")</span> </el-menu-item> </el-menu> </div> </template> <script> export default data() return isCollapse: false, sysName: "", logo: "", ; , methods: handleopen() console.log(‘handleopen‘); , handleclose() console.log(‘handleclose‘); , handleselect(a, b) console.log(‘handleselect‘); , mounted() this.sysName = "I like Kitty"; this.logo = require("@/assets/logo.png"); ; </script> <style scoped lang="scss"> .menu-bar-container .el-menu position:absolute; top: 60px; bottom: 0px; text-align: left; .logo position:absolute; top: 0px; height: 60px; line-height: 60px; background: #4b5f6e; img width: 40px; height: 40px; border-radius: 0px; margin: 10px 10px 10px 10px; float: left; div font-size: 22px; color: white; text-align: left; .menu-bar-width width: 200px; .menu-bar-collapse-width width: 65px; </style>
Main.vue
<template> <div class="container"> <el-breadcrumb separator="/" class="breadcrumb"> <el-breadcrumb-item v-for="item in $route.matched" :key="item.path"> <a href="www.baidu.com"> item.name </a> </el-breadcrumb-item> </el-breadcrumb> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </div> </template> <script> export default data() return ; , methods: , mounted() ; </script> <style scoped lang="scss"> .container position: absolute; top: 60px; bottom: 0px; left: 200px; right: 0px; .breadcrumb padding: 10px; border-color: rgba(38, 86, 114, 0.2); border-bottom-width: 1px; border-bottom-style: solid; background: rgba(138, 158, 170, 0.2); </style>
国际化语言切换也被封装成为了组件 LangSelector
LangSelector/index.js
<template> <el-dropdown class="lang-selector" @command="handleCommand"> <span class="el-dropdown-link"> <span id="language">中文</span><i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="zh_cn:中文">中文</el-dropdown-item> <el-dropdown-item command="en_us:English">English</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default methods: // 语言切换 handleCommand(command) let array = command.split(‘:‘) let lang = array[0] === ‘‘ ? ‘zh_cn‘ : array[0] let label = array[1] document.getElementById("language").innerHTML = label this.$i18n.locale = lang </script>
组件封装重构之后,同步修改路由配置
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Login from ‘@/views/Login‘ import NotFound from ‘@/views/404‘ import Home from ‘@/views/Home‘ import Intro from ‘@/views/Intro‘ import User from ‘@/views/SysMng/User‘ import Dept from ‘@/views/SysMng/Dept‘ import Role from ‘@/views/SysMng/Role‘ import Menu from ‘@/views/SysMng/Menu‘ import Log from ‘@/views/SysMng/Log‘ Vue.use(Router) const router = new Router( routes: [ path: ‘/‘, name: ‘首页‘, component: Home, children: [ path: ‘‘, component: Intro, name: ‘系统介绍‘ , path: ‘/user‘, component: User, name: ‘用户管理‘ , path: ‘/dept‘, component: Dept, name: ‘机构管理‘ , path: ‘/role‘, component: Role, name: ‘角色管理‘ , path: ‘/menu‘, component: Menu, name: ‘菜单管理‘ , path: ‘/log‘, component: Log, name: ‘日志管理‘ ] , path: ‘/login‘, name: ‘登录‘, component: Login , path: ‘/404‘, name: ‘notFound‘, component: NotFound ] ) router.beforeEach((to, from, next) => // 登录界面登录成功之后,会把用户信息保存在会话 // 存在时间为会话生命周期,页面关闭即失效。 let user = sessionStorage.getItem(‘user‘); if (to.path == ‘/login‘) // 如果是访问登录界面,如果用户会话信息存在,代表已登录过,跳转到主页 if(user) next( path: ‘/‘ ) else next() else // 如果访问非登录界面,且户会话信息不存在,代表未登录,则跳转到登录界面 if (!user) next( path: ‘/login‘ ) else next() ) export default router
测试效果
封装重构之后,启动界面,效果跟之前差别不大。
源码下载
码云:https://gitee.com/liuge1988/kitty-ui.git
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
vue+element搭建后台管理系统(代码片段)
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。组件结构组件封装重构后,试图组件结构如下图所示代码一览Home组件被简化,包含导航、头部和主内容三个组件。Home.vue<templ... 查看详情
vue+element搭建后台管理系统(代码片段)
接口请求格式定义前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。接口定义遵循几个规范:1.接口按功能模块划分。系统登录:登录相关接口用户管理:用户管理相关接口机构... 查看详情
vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)
...cli,项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案,致力于打造一... 查看详情
vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇2(代码片段)
...对应的接口(proxy多代理配置) vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效 查看详情
vuejs和element搭建的一个后台管理界面(代码片段)
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术: vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。 element:基于vuejs2.0的ui组件库。 vue-router:一般单页面应用spa... 查看详情
vue+elementui搭建后台项目(代码片段)
...言之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做;看过一个不错的... 查看详情
vue2.0+element+node+webpack搭建的一个简单的后台管理界面(代码片段)
1.检查本地是否安装node:node-v   查看详情
从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)
...言之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做;看过一个不错的... 查看详情
vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)
封装一个ECharts组件的一点思路有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui... 查看详情
vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)
封装一个ECharts组件的一点思路有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui... 查看详情
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情
用vue做网站后台(代码片段)
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术: vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。 element:基于vuejs2.0的ui组件库。 vue-router:一般单页面应用spa... 查看详情
vue后台管理系统模板(代码片段)
推荐一些Vue常用后台管理系统模板前言Vue.js是一个目前比较流行的前端框架,已经到了前端人人都会的地步,今天这里为大家罗列一下基于Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vu... 查看详情
vue-element-admin后台管理系统(代码片段)
文章目录前言一、vue-element-admin是什么?二、使用步骤下载和部署浏览模板项目代码官网启动三.技术提炼1.vue全家桶都有什么2.vuex什么时候用文件,什么时候直接写vue页面导航守卫3.组件之间的通信4.请求/响应式拦截器5.vu... 查看详情
vue项目实战:电商后台管理系统(vue+vuerouter+axios+element)(代码片段)
目录电商后台管理系统1.功能开发模式技术选型登录用户管理权限管理角色列表权限列表商品管理商品列表分类参数商品分类订单管理数据统计2.技术问题登录功能保存token路由导航守卫控制访问权限退出功能通过axios请求拦截器... 查看详情
vue搭建后台项目(代码片段)
参考:https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.mdhttps://juejin.im/post/59097cd7a22b9d0065fb61d21、当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用alias了。//webpack.base.config.jsalias: 查看详情
vue3.0+ts+element-plus实现(若依版后台管理系统)(代码片段)
附上源码地址:Vue3.0+TS+Element-plus后台管理系统模板准备工作安装vue3.0,npmcreatevue3-project选中这几项即可,不需要vuex,我们自己封装状态管理。setup函数使用在.vue文件中,script标签下代码都必须带有lang=“ts”。关于se... 查看详情