Implementation steps of vue-element-admin to build a backend management system

Implementation steps of vue-element-admin to build a backend management system

Recently, when I was working on a conference health declaration system, I needed to build a backend and used the vue-element-admin template. I used PanJianChen (source code address: https://github.com/PanJiaChen/vue-admin-template)

The first step: Download the source code, download address: https://github.com/PanJiaChen/vue-admin-template

Step 2: Modify the login page, login interface (/store/modules/admin.js/login()), and modify the user information interface (/store/modules/admin.js/getInfo()) according to the actual situation

Step 3: Modify the permission routing

1. Delete the configuration in the routing file, export const constantRoutes to retain the basic /login, /404

2. Dynamic routing is cleared, export const asyncRoutes=[]

3. Define the generated routing method in /store/modules/permission.js

/**
 * The menu data queried in the background is assembled into data in routing format* @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: 'Dashboard', icon: 'dashboard' }
                    }]
                }
            }
            generaMenu(menu.children, item.children)
        } else {
            console.log('no children')
        }
        routes.push(menu)
    })
}

Load dynamic routing in actions according to the background interface

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 = [] //Clear the previous routes hereObject.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()
            })
        }
    }

Step 4. Add dynamic routing in /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(() => { // Generate an accessible routing table router.addRoutes(store.getters.addRouters) // Dynamically add an accessible routing table console.log('to=',store.getters.addRouters)
                        next({ ...to, replace: true }) // hack method to ensure that addRoutes is completed, 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()
        }
    }
})

Then you can play as you like.

This is the end of this article about the implementation steps of vue-element-admin to build a backend management system. For more relevant vue-element-admin to build a backend management system, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue-Element-Admin integrates its own interface to realize login jump
  • How to set the default language in vue-element-admin
  • How to convert vue-element-admin into Chinese
  • vue-element-admin global loading waiting
  • vue-element-admin login full process sharing

<<:  Solve the problem of not finding NULL from set operation to mysql not like

>>: 

Recommend

Solution to the problem of var in for loop

Preface var is a way to declare variables in ES5....

In-depth study of MySQL composite index

A composite index (also called a joint index) is ...

CentOS7.5 installation tutorial of MySQL

1. First check whether the system has mysql insta...

Vue Beginner's Guide: Creating the First Vue-cli Scaffolding Program

1. Vue--The first vue-cli program The development...

What are the new CSS :where and :is pseudo-class functions?

What are :is and :where? :is() and :where() are p...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

Tutorial on installing mysql8 on linux centos7

1. RPM version installation Check if there are ot...

Solution to ElementUI's this.$notify.close() call not working

Table of contents Requirement Description Problem...

Common rule priority issues of Nginx location

Table of contents 1. Location / Matching 2. Locat...

Docker win ping fails container avoidance guide

Using win docker-desktop, I want to connect to co...

In-depth understanding of the use of CSS clear:both

clear:both is used to清除浮動This is the impression I...

7 skills that great graphic designers need to master

1》Be good at web design 2》Know how to design web p...