后端管理系统，前后端分离的框架若依管理后台，来看下vue3+element-plus版本。
项目目录
project public 开放资源 src api 接口请求定义 assets 静态资源 components 组件 directive 自定义指令 权限校验 layout 布局 plugins 插件 router 路由 store utils 工具 views 业务页面 vite 编译工具
main.js 入口函数，引入组件：自定义App，store、router、directive，图标，自定义分页组件Pagination、表格工具RightToolbar、标签组件DictTag、树选择组件TreeSelect。
app.mount('#app')将App挂载到index.html页面。
动态路由
1、自定义router
router/index.js中引入了vue-router，定义了默认的路由 constantRoutes
2、应用router
main.js 中引入router
import router from './router' app.use(router)
3、动态获取路由
Permission.js 通过router的拦截器
router.beforeEach获取用户信息后GetInfo，获取路由信息GenerateRoutes。
getRouters从后台获取数据。
GenerateRoutes({ commit }) { return new Promise(resolve => { // 向后端请求路由数据 getRouters().then(res => { const sdata = JSON.parse(JSON.stringify(res.data)) const rdata = JSON.parse(JSON.stringify(res.data)) const defaultData = JSON.parse(JSON.stringify(res.data)) const sidebarRoutes = filterAsyncRouter(sdata) const rewriteRoutes = filterAsyncRouter(rdata, false, true) const defaultRoutes = filterAsyncRouter(defaultData) commit('SET_ROUTES', rewriteRoutes) commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) commit('SET_DEFAULT_ROUTES', sidebarRoutes) commit('SET_TOPBAR_ROUTES', defaultRoutes) resolve(rewriteRoutes) }) }) } }
4、更新路由
通过store的方式更新路由
constantRoutes.concat(routes)在默认路由的基础上追加动态路由
导航菜单
组件Sidebar根据
sidebarRoutes生成菜单。
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false" mode="vertical" > <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" /> </el-menu> </el-scrollbar> </div> //从store获取数据 const sidebarRouters = computed(() => store.getters.sidebarRouters);
按钮权限
1、自定义指令
import hasRole from './permission/hasRole' import hasPermi from './permission/hasPermi' export default function directive(app){ app.directive('hasRole', hasRole) app.directive('hasPermi', hasPermi) }
2、判断当前的权限值value是否在store的权限列表permissions中
export default { mounted(el, binding, vnode) { const { value } = binding const all_permission = "*:*:*"; const permissions = store.getters && store.getters.permissions if (value && value instanceof Array && value.length > 0) { const permissionFlag = value const hasPermissions = permissions.some(permission => { return all_permission === permission || permissionFlag.includes(permission) }) if (!hasPermissions) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error(`请设置操作权限标签值`) } } }
3、页面按钮权限
<el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" >修改</el-button>
总结： 梳理了项目的目录结构，app的加载过程，动态路由及页面权限控制。
