后端管理系统,前后端分离的框架若依管理后台,来看下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 }" :>
<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的加载过程,动态路由及页面权限控制。