近期在搞一个会议健康申报系统时,要搞一个后台,用到了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搭建的更多相关文章

  1. 后台管理系统:vue&node&MongoDB(一)

    后台管理系统 使用工具: Vue    Node     Mongodb   Element-ui 一.后台(Node+Mongodb) 前期准备: 需要下载的包: mongooes -------- ...

  2. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  3. laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...

  4. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  5. 如何使用Vue.js来搭建一个后台管理系统

    目录 使用的技术 基础但不好版 1.初始化项目 2.实现初始页内容自定义 3.使用路由 原始代码 自建页面 修改路由 4.测试路由跳转 补充 子路由版 嵌套router-view 定义子路由 修改菜单 ...

  6. 从零开始搭建vue+element-ui后台管理系统项目到上线

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  7. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  8. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  9. vue从入门到女装??:从零开始搭建后台管理系统(二)用vue-docute生成线上文档

    教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...

  10. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...

随机推荐

  1. 剑指offer 计划1(栈与队列)---java

    1.1.题目1 剑指 Offer 09. 用两个栈实现队列 1.2.解法 解法如题目所说.定义两个栈.这里假设第一个栈为a,第二个栈为b. 实现两个函数增加尾和删除头. 增加即直接push入第一个栈. ...

  2. Python中的变量以及变量的命名

    1.变量的定义 在 python 中,每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建 等号(=)用来给变量赋值 =左边是一个变量名 =右边是存储在变量中的值 变量名=值 变量定义之后,后续就 ...

  3. os用法总结:python中必须掌握的内置模块os,实现与计算机操作系统的常规交互!

    os模块说明 ''' os 模块 Os库是python标准库,包含几百个函数 常用路径操作.进程管理.环境参数等几类 路径操作:os.path子库,处理文件路径及信息 进程管理:启动系统中其他程序 环 ...

  4. zigzag走线原理及应用

    电路板上弯弯扭扭的走线有什么用 往期文章: 一文读懂高速互联的阻抗及反射(上) 一文读懂高速互联的阻抗及反射(中) 前面几篇文章有部分读者反馈太深奥,不好懂,要求来一点轻松易懂的.这不,它来了!本期文 ...

  5. vue js 手写 正则判断 手机号码 和 密码

    const phoneOrEmails = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/             if(this.ruleForms.phoneOrEmail  ==  ...

  6. React Native startReactApplication 方法简析

    在 React Native 启动流程简析 这篇文章里,我们梳理了 RN 的启动流程,最后的 startReactApplication 由于相对复杂且涉及到最终执行前端 js 的流程,我们单独将其提 ...

  7. elsa-core:4.ASP.NET Core Server with Elsa Dashboard

    在本快速入门中,我们将了解一个最小的 ASP.NET Core 应用程序,该应用程序承载 Elsa Dashboard 组件并将其连接到 Elsa Server. ElsaDashboard + Do ...

  8. Docker私有镜像仓库Harbor

    一.安装Harbor(离线安装包的方式安装) 1.解压离线包 2.进入harbor目录中编辑harbor.yml 3.安装docker-compose yum -y install docker-co ...

  9. 硕盟SM-T54|type-c转接头HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞接口功能说明

    硕盟SM-T54是一款 TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞,支持四口同时使用,您可以将含有USB 3.1协议的电脑主机,通过此产品连接到具有HDMI或VGA的显 ...

  10. 在 Docker 的 CentOS7 镜像 中安装 mysql

    在 Docker 的 CentOS7 镜像 中安装 mysql 本来以为是个很简单的过程居然折腾了这么久,之前部署云服务器时也没有好好地记录,因此记录下. 特别提醒:本文的操作环境是在 Docker ...