H5 Admin后台管理系统、用户权限管理设计、按钮级别、数据级别、html+bootstrap后台管理前端界面设计
东方剑来 2024-10-24 15:03:03 阅读 60
一、前言
一个高颜值后台管理模板,Light Year Admin后台管理系统模板是一个基于Bootstrap v3.3.7的纯HTML模板,目前也已经更新了基于Bootstrap 4.4.1的版本。都有iframe以及非iframe的两种不同的形式供大家选择使用。简洁而清新的后台模板,功能满足后台功能,也能够快速上手。 Bootstrap 3是一个强大的前端框架,具备响应式设计、栅格系统、丰富的CSS组件和JavaScript插件等特点。无论是初学者还是有经验的开发人员,都可以通过学习和使用Bootstrap 3来创建出高颜值漂亮的、可访问的、用户友好的网页应用程序。本文主要是使用其 Bootstrap 3的iframe版本做后台管理系统界面设计、用户权限管理设计。当然用户权限管理功能也已经完全实现。
二、使用
代码下载下来是这样的,将文件夹css、fonts、images、js拷贝到项目中静态资源目录下即可,想要什么样的界面参考模板提供html页面如下图将html页面内容拿过去修改。这里需要注意头部尾部引用的css、js文件顺序,可以抽取出来作为一个单独的公共文件,按需引入到业务页面文件头部尾部使用。
三、用户权限管理系统界面
首页
可以看到首页和Light Year Admin后台管理系统模板的首页一样。左侧菜单数据是根据用户角色权限动态从后台获取的,右上角用户信息也是动态获取展示。
登录页
登录界面也和模板的登录页面一样。登录会判断账号是否存在、密码是否正确、验证码是否正确。三者都正确才能登录成功。
退出登录
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 登录日志
其他功能界面(省略)
四、内置功能
用户管理:用户是系统操作者,该功能主要完成系统用户配置。
部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。
岗位管理:配置系统用户所属担任职务。
菜单管理:配置系统菜单,操作权限,按钮权限标识等。
角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。
字典管理:对系统中经常使用的一些较为固定的数据进行维护。
参数管理:对系统动态配置常用参数。
通知公告:系统通知公告信息发布维护。
操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。
登录日志:系统登录日志记录查询包含登录异常。
在线用户:当前系统中活跃用户状态监控。
定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。
代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。
系统接口:根据业务代码自动生成相关的api接口文档。
在线构建器:拖动表单元素生成相应的HTML代码。
服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。
缓存监控:对系统的缓存查询,删除、清空等操作。
连接池监视:监视当前系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。
五、技术选型
1、系统环境
Java EE 8Servlet 3.0Apache Maven 3
2、主框架
Spring Boot 2.2.xSpring Framework 5.2.xApache Shiro 1.7
3、持久层
Apache MyBatis 3.5.xHibernate Validation 6.0.xAlibaba Druid 1.2.x
4、视图层
Bootstrap 3.3.7Thymeleaf 3.0.x
六、结语
本人使用Light Year Admin后台管理系统模板来设计的用户权限管理系统界面。H5 Admin项目简洁美观、优秀实用、功能强大,可扩展功能多。是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。
weixin: jinzhaozui_9
上一篇: Nuxt.js 应用中的 builder:watch 事件钩子详解
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。