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

【JAVA】Java项目实战—项目选择(Web应用、命令行工具等)

在Java开发中,选择合适的项目类型是成功的关键之一。Java是一种通用的编程语言,能够支持多种类型的应用程序开发,包括Web应用、命令行工具、桌面应用、移动应用等。每种项目类型都有其特定的应用场景、技术栈和开发模式。因此,理解…

力扣每日一题 - 1812. 判断国际象棋棋盘中一个格子的颜色

题目 还需要你前往力扣官网查看详细的题目要求 地址 1.给你一个坐标 coordinates ,它是一个字符串,表示国际象棋棋盘中一个格子的坐标。下图是国际象棋棋盘示意图。2.如果所给格子的颜色是白色,请你返回 true,如果是黑色&#xff…

教程|使用Conda安装AlphaFold3-个人记录以及遇到的问题

如果有用,感谢收藏、点赞、转发。 经过两天修改使用终于完成af3的安装以及样例测试。 !在clone之前可以看一下自己的编译版本比如:gxx_linux-64和gcc_linux-64 如果不行就利用conda更新 conda install gxx_linux-64 gxx_impl_linux-64 gcc_linux-64 gcc_impl_linux-64=13…

小程序给元素设置line-height为0引起页面更新无效

问题 在小程序中使用setData更新,数据更新完毕,页面却没有更新值,甚至出现渲染错乱现象; 发现 但当点击相应事件的时候,视图又更新了。 思考 开始认为是没有在dom渲染后进行数据更新产生的问题,换了方法执行…

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

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

MySQL Group Replication

参考文档: https://dev.mysql.com/doc/refman/8.4/en/group-replication-configuring-instances.html MySQL版本: mysql> select version(); ----------- | version() | ----------- | 8.4.3 | ----------- 1 row in set (0.00 sec)mysql> …

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;每…

代码随想录第五十五天

并查集理论基础 并查集的本质是一种维护不相交集合的数据结构。其核心思想是用树形结构来表示集合&#xff0c;每个集合是一棵树。 基本概念 并查集维护了一个由不同元素构成的不相交集合每个集合用一棵树来表示&#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、…

力扣刷题TOP101: 27.BM34 判断是不是二叉搜索树

目录&#xff1a; 目的 思路 复杂度 记忆秘诀 python代码 目的&#xff1a; 给定一个二叉树根节点&#xff0c;请判断这棵树是不是二叉搜索树。 二叉搜索树满足每个节点的左子树上的所有节点均小于当前节点且右子树上的所有节点均大于当前节点。 思路 什么是二叉搜索树&am…

linux-12 关于shell(十一)ls

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

视觉语言模型 Qwen2-VL

视觉语言模型 Qwen2-VL flyfish from PIL import Image import requests import torch from torchvision import io from typing import Dict from transformers import Qwen2VLForConditionalGeneration, AutoTokenizer, AutoProcessor from modelscope import snapshot_dow…