欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue Element前端應(yīng)用開發(fā)之菜單資源管理

 更新時(shí)間:2021年05月14日 09:25:00   作者:伍華聰  
在權(quán)限管理系統(tǒng)中,菜單也屬于權(quán)限控制的一個(gè)資源,屬于角色控制的一環(huán)。不同角色用戶,登錄系統(tǒng)后,出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合,實(shí)現(xiàn)可訪問路由的過濾,也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問路由的控制。

1、菜單資源及管理界面介紹

前面介紹過,權(quán)限管理一般都會(huì)涉及到用戶、組織機(jī)構(gòu)、角色,以及權(quán)限功能等方面的內(nèi)容,ABP框架的基礎(chǔ)內(nèi)容也是涉及到這幾方面的內(nèi)容,其中它們之間的關(guān)系基本上是多對(duì)多的關(guān)系,它們的關(guān)系如下所示。

加入菜單資源,以及整理它們之間的關(guān)系和表的信息,整理圖示如下。

結(jié)合ABP后端提供的接口,Vue前端我們要實(shí)現(xiàn)基礎(chǔ)的用戶、組織機(jī)構(gòu)、角色、功能權(quán)限等內(nèi)容的管理,以及維護(hù)它們之間的關(guān)系。Vue前端對(duì)于權(quán)限管理模塊的菜單列表如下所示。

菜單列表管理界面如下圖所示,主要包括樹狀列表展示菜單結(jié)構(gòu),以及具體的菜單列表查詢處理。

菜單查看明細(xì)界面如下所示,主要就是簡單展示菜單相關(guān)的屬性數(shù)據(jù)。

而菜單的編輯或新增界面,需要考慮從已有菜單中選擇列表,以及選擇圖標(biāo)信息。

其中的Awesome圖標(biāo),我們封裝了選擇圖標(biāo)的組件,只從Font Awesome圖標(biāo)中選擇,畢竟自帶的Element圖標(biāo)太少,不太滿足要求。

其中的Web圖標(biāo)選擇控件,是根據(jù)e-icon-picker控件進(jìn)行修改,以采用Font Awesome圖標(biāo)集合的處理

// Vue-Awesome圖標(biāo)自動(dòng)加入
const req = require.context('vue-awesome/icons', true, /\.js$/)
const requireAll = requireContext => requireContext.keys()
const re = /\.\/(.*)\.js/
const fontAwesome = requireAll(req).filter((key) => {
  return key.indexOf('index.js') < 0
}).map(i => {
  return i.match(re)[1]
})

菜單的展示我們也根據(jù)配置,從Awesome中選擇構(gòu)建菜單的圖標(biāo)項(xiàng)目即可。

菜單項(xiàng)的組件,是在Layout/Components/Sidebar/Item.vue進(jìn)行修改,以適應(yīng)Awesome圖標(biāo)的處理

render(createElement, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      // vnodes.push(<svg-icon icon-class={icon} />) // 使用自定義svg圖標(biāo)
      // vnodes.push(<i class={icon}/>) // 使用內(nèi)置element圖標(biāo)
      vnodes.push(<v-icon name={icon} scale='1.1' style='padding-right:3px'/>)// 使用awesome圖標(biāo)
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }

通過各個(gè)地方進(jìn)行修改,我們就可以使用Awesome的圖標(biāo)集合了。

2、菜單和路由的結(jié)合管理

前端通過接口動(dòng)態(tài)獲取菜單列表,通過菜單的名稱和路由名稱的對(duì)應(yīng)關(guān)系,我們以菜單集合為對(duì)照,然后過濾本地所有靜態(tài)路由的列表,然后獲得用戶可以訪問的路由列表,設(shè)置動(dòng)態(tài)路由給前端,從而實(shí)現(xiàn)了界面根據(jù)用戶角色/權(quán)限的不同,而變化用戶的菜單界面和可訪問路由集合。

菜單路由處理的大概的操作過程如下所示

前端界面的動(dòng)態(tài)菜單、本地路由、菜單導(dǎo)航和可訪問路由的幾個(gè)概念如下所示。

在前端界面處理中,我們通過Element界面組件的方式展示動(dòng)態(tài)菜單信息,并結(jié)合菜單和路由的關(guān)系,實(shí)現(xiàn)菜單跳轉(zhuǎn)到對(duì)應(yīng)視圖的處理過程。

因此,系統(tǒng)管理里面的菜單信息配置界面中,菜單的Web地址,對(duì)應(yīng)的是系統(tǒng)靜態(tài)路由的名稱,如下界面所示。

之前定義系統(tǒng)的路由信息格式如下所示

// 定義本系統(tǒng)的所有路由,具體路由呈現(xiàn)經(jīng)過菜單數(shù)據(jù)過濾
export const asyncRoutes = {
  'dashboard': {
    path: '/dashboard',
    component: Layout,
    children: [{
      path: 'dashboard',
      name: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },
  'product': {
    path: '/product',
    component: Layout,
    children: [{
      path: '/product',
      name: 'product',
      component: () => import('@/views/Product/index')
    }]
  },

  .............................. //省略部分

  'icon': {
    path: '/icon',
    component: Layout,
    children: [{
      path: '/icon',
      name: 'icon',
      component: () => import('@/views/icons/index')
    }]
  },

  'external-link': {
    path: 'http://www.iqidi.com',
    name: 'external-link'
  }
}

有了這些準(zhǔn)備,我們?cè)谟脩舻卿浵到y(tǒng)后,就從后臺(tái)獲取對(duì)應(yīng)的菜單列表。

在系統(tǒng)登錄處理過程中,考慮到初始化的時(shí)候,如果用戶是管理員admin,并且獲取用戶菜單為空,可以考慮使用預(yù)設(shè)的靜態(tài)菜單資源,可以讓用戶先配置好權(quán)限菜單。

// 系統(tǒng)靜態(tài)菜單
    var staticmenus = await GetStaticMenus()
    // console.log(menus)

    // 如果用戶是admin 并且角色集合中沒有菜單,則使用靜態(tài)菜單
    var username = store.getters.name // 用戶名
    if (username === 'admin') {
      if (!menus || typeof (menus) === 'undefined' || menus.length === 0) {
        menus = staticmenus // 系統(tǒng)管理員,初始化的時(shí)候使用靜態(tài)菜單
      }
    }

由于之前開發(fā)了一個(gè)基于Winform的ABP前端應(yīng)用,因此我們菜單為了整合兩個(gè)應(yīng)用,在菜單表示增加一個(gè)一個(gè)Tag標(biāo)簽,用來區(qū)分是Winform界面的菜單還是Web的菜單,畢竟兩者菜單的處理方式是不同的。

addForm: { // 添加表單
        id: this.guid(),
        pid: '',
        name: '',
        url: '',
        seq: '001',
        isTop: false,
        expand: 1,
        visible: 1,
        webIcon: '',
        tag: 'web'// Web專用
      },

WInform客戶端的菜單也是從服務(wù)器端請(qǐng)求數(shù)據(jù),并動(dòng)態(tài)構(gòu)建的,Winform端的菜單展示效果如下所示。

以上就是Vue Element前端應(yīng)用開發(fā)之菜單資源管理的詳細(xì)內(nèi)容,更多關(guān)于Vue Element之菜單資源管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue.js的模板語法詳解

    Vue.js的模板語法詳解

    Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。這篇文章重點(diǎn)給大家介紹Vue.js的模板語法,感興趣的朋友跟隨小編一起看看吧
    2020-02-02
  • vue組件是如何解析及渲染的?

    vue組件是如何解析及渲染的?

    這篇文章主要介紹了vue組件是如何解析及渲染的?,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2021-01-01
  • Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼

    Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼

    本篇文章主要介紹了Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • elementui源碼學(xué)習(xí)仿寫el-collapse示例

    elementui源碼學(xué)習(xí)仿寫el-collapse示例

    這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫el-collapse示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用

    Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)控制商品數(shù)量組件的封裝及使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue引用echarts超詳細(xì)步驟(附圖文)

    Vue引用echarts超詳細(xì)步驟(附圖文)

    這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下
    2023-08-08
  • vue定義全局變量和全局方法的方法示例

    vue定義全局變量和全局方法的方法示例

    這篇文章主要介紹了vue定義全局變量和全局方法的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue服務(wù)端渲染緩存應(yīng)用詳解

    vue服務(wù)端渲染緩存應(yīng)用詳解

    vue緩存分為頁面緩存、組建緩存、接口緩存,這里我主要說到了頁面緩存和組建緩存。接下來通過本文給大家介紹vue服務(wù)端渲染緩存應(yīng)用 ,需要的朋友可以參考下
    2018-09-09
  • vue中v-for加載本地靜態(tài)圖片方法

    vue中v-for加載本地靜態(tài)圖片方法

    下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼

    Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼

    這篇文章主要介紹了Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-09-09

最新評(píng)論