若依框架 -------- vue3+element-plus(一)

不念不忘少年蓝@ 2023-09-24 00:17 54阅读 0赞

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