Ace Admin后台管理系统模板、用户权限管理设计、按钮级别

一、前言

最近有时间研究了一下做后台管理系统的模板界面，开源的比较知名很早之前就用过EasyUI。Vue+ElementUI，Layui，Bootstrap等。

EasyUI个人感觉功能强大，帮助web开发者更轻松的打造出功能丰富的UI界面，通过编写一些简单HTML标记，就可以定义用户界面，只是呢本人感觉界面没那么好看。

Vue是很不错的开源框架，目前比较火，ElementUI界面也好看，只是要花多点时间学习，我发现Vue+ElementUI做前后端分离的，前端打包发布部署后，如果要修改一点样式又要重新打包部署，不能单个文件修改发布上去，这点感觉不方便，如果有知道可以解决这个问题的朋友可以评论区留言告知下。

Layui遵循原生的开发方式。极易上手，开箱即用，非常适合网页界面的快速开发，更多是面向于后端开发者，做后台管理界面，最近研究过Layui做后台管理，虽然功能做出来了，只是在使用过程中一些细节上不太顺畅。

说回今天的主题，Ace Admin是评价较高的一套UI框架，是一款轻量且功能丰富的管理模板，干净且易于使用，是一个基于Twitter bootstrap3开发的后台模板。Ace Admin就不过多说明了，这里主要是使用Ace Admin做后台管理系统界面、用户权限管理界面设计。当然用户权限管理功能也已经完全实现。

Ace Admin官网地址：Dashboard - Ace Admin

Ace Admin Git地址： https://github.com/bopoda/ace 

二、使用

代码下载下来是这样的，将文件夹assets拷贝到项目中即可，想要什么样的界面参考ace提供html页面如下图将html页面内容拿过去修改。这里需要注意头部引用的js、css文件顺序，可以抽取出来作为一个单独的公共文件，引入到页面文件头部使用即可。

三、用户权限管理系统界面

首页

可以看到首页和Ace Admin官网的首页一样。左侧菜单数据是根据用户角色权限动态从后台获取的，右上角用户信息也是动态获取展示。

登录页

登录页也和Ace Admin官网的登录页面一模一样。登录会判断账号是否存在、密码是否正确、验证码是否正确。三者都正确才能登录成功。

退出登录

3.1 权限管理（重点）

3.1.1 用户管理

用户查询

说明：使用Ace Admin的jqGrid plugin模板、Widget Box模板和Buttons & Icon。Widget Box作为查询条件框，jqGrid作为展示数据表格，Buttons & Icon 作为操作的按钮。Ace Admin官方的jqGrid plugin表格的表头、表中、分页边框颜色不一致，有点违和感，我在外部加了淡蓝色边框。分页功能已经实现。查询条件部门是从后台获取的数据，树形展示。

 添加用户

修改用户

要选中记录，进入修改界面

删除用户

要选中记录，进入删除确认界面

修改密码

分配角色（重点）

选中某条用户记录进入分配角色界面，展示的是角色数据。选中左侧角色点击【分配】按钮到右侧中，如选择错了，可选中右侧角色点击【移除】按钮移除，没有数据会提示，确定没问题点击【保存分配的角色】按钮提交数据。数据保存成功后也会提示。

3.1.2 角色管理

角色查询

这里定义了样式，使用自定义的样式如下图，查询条件框、表格的 背景为白色面板。添加角色、修改角色、删除角色和用户管理的界面一样，这里不截图展示了。

 分配菜单权限（重点）

选择某条角色记录进入分配权限界面，界面展示的是资源数据，资源有目录、菜单、按钮。选中需要分配的菜单、按钮即可。权限可以控制到按钮级别。

3.1.3 资源管理

资源查询

资源有目录、菜单、按钮。权限可以控制到按钮级别。查询条件上级资源作为树形展示。资源有自己编号、上级编号、资源名称、资源地址、资源图标、资源类别。

资源添加

资源修改

资源删除（略）

3.2 部门管理

3.3 字典管理

静态字典

系统中都会有一些静态数据，比如性别、身份证类型、状态等等。这里界面是使用bootstrap的面板，界面提供可选择行多一些。

字典类型

字典类型还可以自定义sql，如果自定义为空则从静态字典表中获取数据，有时候我们需要获取的数据可能在其他表中，则可以编写自定义sql获取，有自定义sql则从sql中获取数据。

3.4 日志管理

结语

本人使用的是ssm框架(spring+springmvc+mybatis)和mysql数据库。oracle的版本也有。这里不介绍Ace Admin的使用方法、不介绍权限管理相关概念、不介绍后台框架。只是展示用Ace Admin模板来设计的用户权限管理系统界面。

项目简单优秀实用，可以用来做公司中小型后台管理系统或者毕业设计。如果有需要。

weixin : jinzhaozui_9