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

Sample code for implementing radar chart with vue+antv

1. Download Dependency npm install @antv/data-set...

MySQL query data by hour, fill in 0 if there is no data

Demand background A statistical interface, the fr...

MySQL 5.6.37 (zip) download installation configuration graphic tutorial

This article shares the download, installation an...

Implementation of nacos1.3.0 built with docker

1. Resume nacos database Database name nacos_conf...

6 Practical Tips for TypeScript Development

Table of contents 1. Determine the entity type be...

Docker - Summary of 3 ways to modify container mount directories

Method 1: Modify the configuration file (need to ...

Sample code for converting video using ffmpeg command line

Before starting the main text of this article, yo...

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker

ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...

MySQL 8.0.20 installation and configuration detailed tutorial

This article shares with you a detailed tutorial ...

Methods and steps to access Baidu Maps API with JavaScript

Table of contents 1. Baidu Map API Access 2. Usin...

A simple method to implement scheduled backup of MySQL database in Linux

Here are the detailed steps: 1. Check the disk sp...

Detailed explanation of JSON.parse and JSON.stringify usage

Table of contents JSON.parse JSON.parse Syntax re...