H5 Admin后台管理系统、用户权限管理设计、按钮级别、数据级别、html+bootstrap后台管理前端界面设计

一、前言

一个高颜值后台管理模板,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文件顺序,可以抽取出来作为一个单独的公共文件,按需引入到业务页面文件头部尾部使用。

9e3862c742e04959a43e9fe6b9219e99.png

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

  • 首页

可以看到首页和Light Year Admin后台管理系统模板的首页一样。左侧菜单数据是根据用户角色权限动态从后台获取的,右上角用户信息也是动态获取展示。

9bedaca232ce4c6ca9ad6bcd84ab561d.png

  • 登录页

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

1a46ecf95d144f5baa84c754bb75d744.pngedd441ef8d1e4412883c0c53fb918e89.png

b8522fb0066c4d098b4a38041cf40093.png

  • 退出登录

a7804a2b914f44ae8fed0913ef05c242.png

3.1 系统管理-权限管理(重点)

3.1.1 用户管理
  • 用户查询

c22fe522f34a4dc8ab59e2a5e0a93225.png

4f615361c23a47a5a123ebda640e6950.png0e67d2bbfcae4cbfbda62463f4951538.png

  • 添加用户

bef4799421ef491f96034f79a32056e0.png

c1c3603de9394656ac44676530f23a0b.png

  • 修改用户

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

07c178664677449bb4b9c9f91e012216.png

99f3abdccd724832bfaa8e7833ca66b5.png

  • 删除用户

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

34fbae15324c42d68b92c91fd10d7cc6.png

50d5dba6944a443ea73fad95179615b2.png

  • 重置密码

8ab002cdac934a5cb55b6600a5348790.png

  • 分配角色(重点)

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

dac67566abdd493a91cda8129ddedbf5.png

  • 数据权限

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

a4240816f8034494b270e96f99b8eabe.png

  • 导出

5a2e6193ed6e4e779077d69c32d42d8a.png958ded207d47422686e7466bd25d8dd9.png

3.1.2 角色管理
  • 角色查询

69288940a48a421bbd85492b7bb63f1e.png

  • 分配菜单权限(重点)

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

ae65581d955245a6a7751f00d088fe62.png

  • 角色删除(略)
3.1.3 菜单管理
  • 资源查询

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

c39b809213de45e6b7d89ce236f000f1.png

  • 资源添加

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

c24e31f32742473ea35b6691614ca780.pnga96650829ff740fd95ced3982fa86af2.png

  • 资源修改

65563d377f1b42bcab2e5ba59b98582e.png

  • 资源删除(略)

3.2部门管理

f7c84c3b09084fe49573cbd70ba6a741.pnga0ba6135d3ed4ae3a66f0deebf7ce719.png

3.3 字典管理

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

  • 字典类型

c5e457c664e74e8496fa65a2e7e48786.png00f8423412cb4fa4b438ddc30a94145d.png

  • 字典数据

e0b25f4aa2b64bbd85ba3e0a88574726.png6b63b69a542949b7a05e8c46afda3aef.png

3.4 参数设置

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

9765f00cdb4e4286b2d1cc4b382052a4.png41f2cfe240ad405398723749a0311549.png

3.5 通知公告

f5abbf3bca064a208e49272be106a684.pngd418dd0b097e4d4fa8f1fd56fc4e3e9a.png

3.6 日志管理

3.6.1操作日志
4825a50c567e41dd9d313bf52f6a6e19.pngca9c7c0e64a942e5b74db8a77d14751c.png
3.6.2 登录日志

eaec098714ad46a39482f85afa297659.png

其他功能界面(省略)

四、内置功能

用户管理:用户是系统操作者,该功能主要完成系统用户配置。
部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。
岗位管理:配置系统用户所属担任职务。
菜单管理:配置系统菜单,操作权限,按钮权限标识等。
角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。
字典管理:对系统中经常使用的一些较为固定的数据进行维护。
参数管理:对系统动态配置常用参数。
通知公告:系统通知公告信息发布维护。
操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。
登录日志:系统登录日志记录查询包含登录异常。
在线用户:当前系统中活跃用户状态监控。
定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。
代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。
系统接口:根据业务代码自动生成相关的api接口文档。
在线构建器:拖动表单元素生成相应的HTML代码。
服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。
缓存监控:对系统的缓存查询,删除、清空等操作。
连接池监视:监视当前系统数据库连接池状态,可进行分析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 3.3.7
  • Thymeleaf 3.0.x

六、结语

本人使用Light Year Admin后台管理系统模板来设计的用户权限管理系统界面。H5 Admin项目简洁美观、优秀实用、功能强大,可扩展功能多。是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。

微微: jinzhaozui_9

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows环境基于ecplise的spring boot框架新建spring start project

SpringToolSuite4 新建项目实例 前言Windows基于ecplise 工具的spring boot 架构 前言 使用Spring boot 框架向前端传输数据 Windows基于ecplise 工具的spring boot 架构 spring-tool-suite-4官网下载链接spring tool,下载太慢的话可以使用迅雷加速,右…

理解 CAP 理论:分布式系统中的权衡与选择 | 常用组件中的CP和AP

CAP定理是分布式系统设计中的一个基本定理,它指出在一个分布式计算系统中,一致性(Consistency)、可用性(Availability)、分区容忍性(Partition Tolerance)三者不可同时实现&#xff…

AttributeError: module ‘cv2.dnn‘ has no attribute ‘DictValue‘如何解决?

AttributeError: module cv2.dnn has no attribute DictValue如何解决? 出现场景出错原因解决方案 出现场景 当在代码中导入opencv的时候:import cv2,出现: 出错原因 查看大家出现的错误,发现是因为opencv版本问题…

Java Class类文件结构

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…

ThinkPHP开发的原生微信小程序二手物品回收小程序管理系统源码

二手物品回收小程序 一款基于ThinkPHP开发的原生微信小程序二手物品回收小程序管理系统。支持线上下单、免费上门取件、评估价格等功能。提供全部无加密源码,支持私有化部署。

分布式专题(1)之Redis持久化、主从与哨兵架构详解

一、Redis持久化 1.1 RDB快照(snapshot) 在默认的情况下,Redis将内存数据快照保存名字为:dump.rdb的二进制文件中,当然你在配置文件redis.conf中修改对应的二进制文件名。 redis开启RDB快照,可以在redis中…

day1:ansible

ansible-doc <module_name>&#xff08;如果没有网&#xff0c;那这个超级有用&#xff09; 这个很有用&#xff0c;用来查单个模块的文档。 ansible-doc -l 列出所有模块 ansible-doc -s <module_name> 查看更详细的模块文档。 ansible-doc --help 使用 --help …

unity 2D像素种田游戏学习记录(自用)

一、透明度排序轴 改变sprite的排序方式&#xff0c;默认按照z轴进行排序&#xff08;离摄像机的远近&#xff09;。可以将其改变成y轴的排序方式&#xff0c;这样可以使2D人物走在草丛的下方就不被遮挡&#xff0c;走在草丛上方就被遮挡&#xff0c;如下图。 在项目设置-图形…

关于GaussDB

一、GaussDB的层级关系 &#xff0c;关于schemas的定位&#xff0c;到底是个什么&#xff0c;其实就可以理解为一个文件夹 数据库服务器 --> databases --> schemas --> tables schema类似于文件夹&#xff0c;一个数据库database里面可以有多个文件夹&#xff0c;每…

【CKA】Kubernetes(k8s)认证之CKA考题讲解

CKA考题讲解 0.考试101 0.1 kubectl命令⾃动补全 在 bash 中设置当前 shell 的⾃动补全&#xff0c;要先安装 bash-completion 包。 echo "source <(kubectl completion bash)" >> ~/.bashrc还可以在补全时为 kubectl 使⽤⼀个速记别名&#xff1a; al…

第4章:颜色和背景 --[CSS零基础入门]

在 CSS 中,颜色和背景属性是用于美化网页元素的重要工具。你可以通过多种方式定义颜色,并且可以设置元素的背景颜色、图像、渐变等。以下是关于如何在 CSS 中使用颜色和背景的一些关键点和示例。 1.颜色表示法 当然!以下是使用不同颜色表示法的 CSS 示例,包括 RGB、RGBA、…

linux-12 关于shell(十一)ls

登录系统输入用户名和密码以后&#xff0c;会显示给我们一个命令提示符&#xff0c;就意味着我们在这里就可以输入命令了&#xff0c;给一个命令&#xff0c;这个命令必须要可执行&#xff0c;那问题是我的命令怎么去使用&#xff0c;命令格式有印象吗&#xff1f;在命令提示符…

java+ssm+mysql校园物品租赁网

项目介绍&#xff1a; 使用javassmmysql开发的校园物品租赁网&#xff0c;系统包含管理员、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;用户管理&#xff1b;物品管理&#xff08;物品种类、物品信息、评论信息&#xff09;&#xff1b;订单管理&#xff1…

肝了半年,我整理出了这篇云计算学习路线(新手必备,从入门到精通)

大家好&#xff01;我是凯哥&#xff0c;今天给大家分享一下云计算学习路线图。这是我按照自己最开始学习云计算的时候的学习路线&#xff0c;并且结合自己从业多年所涉及的知识精心总结的云计算的思维导图。这是凯哥精心总结的&#xff0c;花费了不少精力哦&#xff0c;希望对…

31.下一个排列 python

下一个排列 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;题目链接 题解解题思路python实现代码解释&#xff1a;提交结果 题目 题目描述 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3…

【OpenCV】平滑图像

二维卷积(图像滤波) 与一维信号一样&#xff0c;图像也可以通过各种低通滤波器&#xff08;LPF&#xff09;、高通滤波器&#xff08;HPF&#xff09;等进行过滤。LPF 有助于消除噪音、模糊图像等。HPF 滤波器有助于在图像中找到边缘。 opencv 提供了函数 **cv.filter2D()**&…

springSecurity自定义登陆接口和JWT认证过滤器

下面我会根据该流程图去自定义接口&#xff1a; 我们需要做的任务有&#xff1a; 登陆&#xff1a;1、通过ProviderManager的方法进行认证&#xff0c;生成jwt&#xff1b;2、把用户信息存入redis&#xff1b;3、自定义UserDetailsService实现到数据库查询数据的方法。 校验&a…

PowerShell install 一键部署postgres17

postgres 前言 PostgreSQL 是一个功能强大的开源对象关系数据库系统,拥有超过 35 年的积极开发经验 这为其赢得了可靠性、功能稳健性和性能的良好声誉。 通过官方文档可以找到大量描述如何安装和使用 PostgreSQL 的信息。 开源社区提供了许多有用的地方来熟悉PostgreSQL, 了…

如何在 IntelliJ IDEA 中为 Spring Boot 应用实现热部署

文章目录 1. 引言2. 准备工作3. 添加必要的依赖4. 配置 IntelliJ IDEA4.1 启用自动编译4.2 开启热部署策略 5. 测试热部署6. 高级技巧7. 注意事项8. 总结 随着现代开发工具的进步&#xff0c;开发者们越来越重视提高生产力的特性。对于 Java 开发者来说&#xff0c;能够在不重启…

Spring Boot中实现JPA多数据源配置指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文详细介绍了在Spring Boot项目中配置和使用JPA进行多数据源管理的步骤。从引入依赖开始&#xff0c;到配置数据源、创建DataSource bean、定义实体和Repository&#xff0c;最后到配置事务管理器和使用多数据…