• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-element-admin搭建后台管理系统的实现步骤

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

近期在搞一个会议健康申报系统时,要搞一个后台,用到了vue-element-admin模板,使用的是PanJianChen(源码地址:https://github.com/PanJiaChen/vue-admin-template)

第一步:当前是下载源码了,下载地址:https://github.com/PanJiaChen/vue-admin-template

第二步:修改登录页面,登录接口(/store/modules/admin.js/login()),根据实际情况修改用户信息接口(/store/modules/admin.js/getInfo())

第三步:修改权限路由

1.删减路由文件中的配置,export const constantRoutes保留基本的/login、/404

2.动态路由清空,export const asyncRoutes=[]

3./store/modules/permission.js下定义生成路由方法

/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @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: '控制台', icon: 'dashboard' }
                    }]
                }
            }
            generaMenu(menu.children, item.children)
        } else {
            console.log('没有children')
        }
        routes.push(menu)
    })
}

actions中根据后台的接口加载动态路由

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中添加动态路由

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(() => { // 生成可访问的路由表
                        router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
                        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()
        }
    }
})

然后你就可心情地玩了。

到此这篇关于vue-element-admin搭建后台管理系统的实现步骤的文章就介绍到这了,更多相关vue-element-admin搭建后台管理系统内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript仿小米轮播图效果发布时间:2022-02-05
下一篇:
利用Vue3 (一)创建Vue CLI 项目发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap