H5 MorvinAdmin后台管理系统、用户权限管理设计、按钮级别、数据级别、html+bootstrap高颜值后台管理界面设计

一、前言

一个高颜值的应用模板，Morvin是一个基于Bootstrap5实现的后台管理系统模板。基于简单的和模块化的设计，这使得它很容易定制。这套后台模板有大量的可重用的和漂亮的UI元素，小部件等。响应布局(台式电脑、平板电脑、移动设备)，光明与黑暗主题模式，帮助你的团队移动更快，节约开发成本，可以创建任何网站的后台数据管理，或者WEB应用系统的界面，网站界面。文章主要是使用Morvin模板做后台管理系统界面、用户权限管理界面设计。当然用户权限管理功能也已经完全实现。MorvinAdmin是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。支持集群，支持多数据源，支持分布式事务。

二、使用

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

三、用户权限管理系统

• 首页

可以看到首页和Morvin模板的首页一样。左侧菜单数据是根据用户角色权限动态从后台获取的，右上角用户信息也是动态获取的，这里光明主题和黑暗主题展示如下。

• 登录页

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

• 退出登录

3.1 系统管理-权限管理（重点）

3.1.1 用户管理

• 用户查询

•  添加用户

• 修改用户

点击表格左上角【修改】要选中记录才能进入修改界面。表格行数据操作点击【编辑】直接进入修改界面。

• 删除用户

点击表格左上角【删除】要选中记录，进入删除确认界面

•  重置密码

• 分配角色（重点）

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

• 数据权限

选中记录，点击【数据权限】按钮进入数据权限控制界面，可选有全部数据权限、自定义数据权限、本部门数据权限、本部门及以下数据权限、仅本人数据权限。

• 导出

3.1.2 角色管理

• 角色查询

• 分配菜单权限（重点）

新增修改角色界面，界面有展示资源数据，资源有目录、菜单、按钮。选中需要分配的菜单、按钮即可。权限可以控制到按钮级别。

•  角色删除（略）

3.1.3 菜单管理

• 资源查询

这里是叫资源比较贴切，资源有目录、菜单、按钮。权限可以控制到按钮级别、数据级别。查询条件上级资源作为树形展示。资源有自己编号、上级编号、资源名称、资源地址、资源图标、资源类型、资源排序、权限标识。

• 资源添加 

点击菜单类型 目录/菜单/按钮， 表单会跟着变化，比如按钮没有请求地址，请求地址输入框就会隐藏。上级菜单弹出另一个modal模态框树形展示供选择。

•  资源修改

• 资源删除（略）

3.2 部门管理

 3.3 字典管理

系统中都会有一些静态数据，比如性别、身份证类型、状态等等。字典数据在系统中是比较常见的，可以不用重复加载获取，获取一次存在缓存中即可。

 3.4 参数设置

参数设置可以用来动态设置系统的部分功能，如显示验证码不，显示页脚不等等。

3.5 通知公告

3.6 日志管理

3.6.1 操作日志

3.6.2 登录日志

3.7 在线用户

3.8 数据监控

3.9 服务监控

3.10 缓存监控

3.11 其他界面

404页面

500页面

403页面（略）

这里是根据用户角色权限分配菜单的，正常情况下，没有该菜单权限就不应该分配有该菜单，不会显示在左侧页面上。

数据的权限（略）

同理，没有相关按钮的权限，页面上按钮就不会显示。

个人中心

修改密码

 其他功能界面（省略）

四、内置功能

1. 用户管理：用户是系统操作者，该功能主要完成系统用户配置。
2. 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
3. 岗位管理：配置系统用户所属担任职务。
4. 菜单管理：配置系统菜单，操作权限，按钮权限标识等。
5. 角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
6. 字典管理：对系统中经常使用的一些较为固定的数据进行维护。
7. 参数管理：对系统动态配置常用参数。
8. 通知公告：系统通知公告信息发布维护。
9. 操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
10. 登录日志：系统登录日志记录查询包含登录异常。
11. 在线用户：当前系统中活跃用户状态监控。
12. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。
13. 代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
14. 系统接口：根据业务代码自动生成相关的api接口文档。
15. 在线构建器：拖动表单元素生成相应的HTML代码。
16. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
17. 缓存监控：对系统的缓存查询，删除、清空等操作。
18. 连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。

五、技术选型

1、系统环境

• Java EE 8
• Servlet 3.0
• Apache Maven 3

2、主框架

• Spring Boot 2.2.x
• Spring Framework 5.2.x
• Apache Shiro 1.7

3、持久层

• Apache MyBatis 3.5.x
• Hibernate Validation 6.0.x
• Alibaba Druid 1.2.x

4、视图层

• Bootstrap 5.0
• Thymeleaf 3.0.x
• html5
• Morvin

六、结语

本人使用Morvin模板来设计的用户权限管理系统。MorvinAdmin项目简洁美观、高颜值、优秀实用、功能强大，可扩展功能多。MorvinAdmin是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置；智能代码生成；支持集群，支持多数据源，支持分布式事务。

微微:  jinzhaozui_9