spring boot+iview 前后端分离架构之角色管理布局和列表的实现（十六）

公众号

大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg16】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

角色管理

通过上一章我们已经完成了我们的菜单管理模块的开发了，那么这章我们将开始讲解如何开发我们的角色模块，首先会给大家讲解角色管理的布局和列表，在下一章将会给大家讲解如何实现角色与菜单的权限的关联。
打开我们的基于第十六章的工程然后在sys目录底下创建一个role目录如下：

由于我们的角色列表有需要使用到时间的格式化显示，因此我们需要新增一个全局的时间格式化的方法，我们在main.js中加入以下的代码：

// 格式化时间全局通用方法
Vue.prototype.formatDate = function (date, fmt) {
  let o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'S': date.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
  }
  return fmt
}

接着在我们的role目录底下创建一个roleList.vue文件，该文件实现我们的角色管理的布局和列表的实现，代码如下：

然后我们再打开我们的router目录底下的router.js新增我们的角色管理的router的配置，再菜单管理的后面添加以下的代码：

{
          path: 'roleList',
          name: 'roleList',
          meta: {
            icon: 'ios-cog',
            title: '角色管理',
            code:'system-manage-role',
            requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
          },
          component: resolve => {
            require(['../view/sys/role/roleList.vue'], resolve);
          }
        }

最后我们打开我们的main.vue页面进行改造，改造完成以后的代码如下：

            
              
              数据字典
              菜单管理
              角色管理
            

最后我们运行我们的项目，大家会看到如下的列表页面，则说明我们的角色管理就正常集成完成了。

到此处我们就完成了本章的代码了。
上一篇文章地址：spring boot+iview 前后端分离架构之菜单管理菜单的增删改的实现（十五）
下一篇文章地址：spring boot+iview 前后端分离架构之角色管理增删改的实现（十七）