vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟
近期在搞一個(gè)會(huì)議健康申報(bào)系統(tǒng)時(shí),要搞一個(gè)后臺(tái),用到了vue-element-admin模板,使用的是PanJianChen(源碼地址:https://github.com/PanJiaChen/vue-admin-template)
第一步:當(dāng)前是下載源碼了,下載地址:https://github.com/PanJiaChen/vue-admin-template
第二步:修改登錄頁(yè)面,登錄接口(/store/modules/admin.js/login()),根據(jù)實(shí)際情況修改用戶信息接口(/store/modules/admin.js/getInfo())
第三步:修改權(quán)限路由
1.刪減路由文件中的配置,export const constantRoutes保留基本的/login、/404
2.動(dòng)態(tài)路由清空,export const asyncRoutes=[]
3./store/modules/permission.js下定義生成路由方法
/** * 后臺(tái)查詢的菜單數(shù)據(jù)拼裝成路由格式的數(shù)據(jù) * @param routes */ export function generaMenu(routes, data) { data.forEach(item => { let menu = { path: item.url, children: [], name: 'menu_' + item.id, meta: { title: item.name, id: item.id ,icon:item.icon} } // console.log(item.url.indexOf('dashboard')) // console.log(item.children) if (item.children) { // console.log(item.children.length) if (item.children.length > 0) { menu.redirect = item.children[0].url menu.component = Layout } else { // menu.component = () => import(`@/views${item.url}/index`) menu.component = () => Promise.resolve(require(`@/views${item.url}`).default) } if (item.url && item.url.indexOf('dashboard') != -1) { menu = { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: '控制臺(tái)', icon: 'dashboard' } }] } } generaMenu(menu.children, item.children) } else { console.log('沒(méi)有children') } routes.push(menu) }) }
actions中根據(jù)后臺(tái)的接口加載動(dòng)態(tài)路由
actions: { GenerateRoutes({ commit }, data) { return new Promise(resolve => { const loadMenuData = [] getAuthMenu().then(res => { let data = res.data console.log('menu=>', data) console.log('asyncRoutes=>>', asyncRoutes) let newRoutes = []//此處清空之前的路由 Object.assign(loadMenuData, data) generaMenu(newRoutes, loadMenuData) newRoutes.push({ path: '*', redirect: '/404', hidden: true }) let accessedRouters = newRoutes || [] console.log('accessedRouters', accessedRouters) commit('SET_ROUTERS', accessedRouters) resolve() }) }) }, reset_routers({ commit }) { return new Promise(resolve => { commit('RESET_ROUTERS') resolve() }) } }
第四步、在/permission.js中添加動(dòng)態(tài)路由
router.beforeEach(async (to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() } else { const hasGetUserInfo = store.getters.name if (hasGetUserInfo) { next() } else { try { // get user info await store.dispatch('admin/getInfo') store.dispatch('GenerateRoutes', {}).then(() => { // 生成可訪問(wèn)的路由表 router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問(wèn)路由表 console.log('to=',store.getters.addRouters) next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record NProgress.done() }) // next() } catch (error) { // remove token and go to login page to re-login await store.dispatch('admin/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } })
然后你就可心情地玩了。
到此這篇關(guān)于vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue-element-admin搭建后臺(tái)管理系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中使用JsonView來(lái)展示Json樹的實(shí)例代碼
這篇文章主要介紹了Vue之使用JsonView來(lái)展示Json樹的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案
這篇文章主要為大家介紹了前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn)
本文主要介紹了Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-06-06基于Vue技術(shù)實(shí)現(xiàn)遞歸組件的方法
這篇文章主要為大家詳細(xì)介紹了基于Vue技術(shù)實(shí)現(xiàn)遞歸組件的方法 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08解決VUEX兼容IE上的報(bào)錯(cuò)問(wèn)題
下面小編就為大家分享一篇解決VUEX兼容IE上的報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開(kāi)始是由最具體的元素接收,然后逐層向上級(jí)傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下2023-12-12vue keep-alive多層級(jí)路由支持問(wèn)題分析
這篇文章主要介紹了vue keep-alive多層級(jí)路由支持,在文章開(kāi)頭給大家介紹了keep-alive使用問(wèn)題,解決使用keep-alive include屬性問(wèn)題,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài)
這篇文章主要介紹了vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12