近期在搞一个会议健康申报系统时,要搞一个后台,用到了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. Stream流用于按照对象中某一属性来对集合去重+简单数据类型集合的去重

    上次对Stream流来进行分组的文章很多人看,想看的可以来这: Stream流来进行集合分组 这次小编又带来Stream的去重,话不多数,直接上代码: 这是对简单数据类型的去重 //字符串集合进行简单 ...

  2. [考试总结]noip模拟42

    开始给了一个简单的题目,但我还是没有珍惜. 一个简简单单的树形 \(dp\),然而因为取模却不知道该如何比较大小.. 其实可以取 \(log\),然后我就梦中惊坐起,然后想到了魔法少女lbw 淦 然后 ...

  3. MongoDB(2)- 安装 MongoDB

    MacOS 安装 MongoDB 博主目前都用 mac 电脑练习,所以这里重点讲 MacOS 安装方式 系统要求 MongoDB 4.4 社区版支持 macOS 10.13 或更高版本 安装 Home ...

  4. Docker(41)- Portainer 可视化面板安装

    Portainer docker run -d -p 8080:9000 \ --restart=always -v /var/run/docker.sock:/var/run/docker.sock ...

  5. GoLang设计模式06 - 对象池模式

    这次介绍最后一个创建型模式--对象池模式.顾名思义,对象池模式就是预先初始化创建好多个对象,并将之保存在一个池子里.当需要的时候,客户端就可以从池子里申请一个对象使用,使用完以后再将之放回到池子里.池 ...

  6. 多Host情况下IDEA无法启动Tomcat的问题

    学习Java Web,学到将WAR包部署到Tomcat中时,遇到一个问题. 部署WAR包的过程本身没什么问题,把.war文件放在<Tomcat安装目录>/webapps/中,然后修改< ...

  7. MySQL查询结果集字符串操作之多行合并与单行分割

    前言 我们在做项目写sql语句的时候,是否会遇到这样的场景,就是需要把查询出来的多列,按照字符串分割合并成一列显示,或者把存在数据库里面用逗号分隔的一列,查询分成多列呢,常见场景有,文章标签,需要吧查 ...

  8. this关键字的理解

    this理解为:当前对象 或 当前正在创建的对象 this代表所在类的当前对象的引用(地址值),即对象对自己的引用. 备注:意思方法被那个对象调用,方法中的this就代表那个对象.即谁调用,this就 ...

  9. eclipes常见操作总结及项目2和3经验总结

    eclipes常见操作总结及项目2经验总结 eclipes提示: 打开eclipes 选择window->perference->java->editor->content a ...

  10. Spring Boot 2.x 之 H2 数据库

    1. Spring Boot下H2数据库的常用配置项 # 指定数据库的类型 spring.datasource.platform=h2 # 数据库连接地址(文件模式) ## AUTO_SERVER=T ...