file js new 传到后台_牛逼!力挺一套实用的后台管理系统(附源码),摆脱重复制造轮子......

fa9a7b0a21267b081134f4b71bac2c60.png

# 前言

前段时间我们写一个简单的后台模板SpringBoot系列——Security + Layui实现一套权限管理后台模板,今天我们把它完善成一个简单通用的后台管理系统,我把它叫做:Base Admin

这套Base Admin是一套简单通用的后台管理系统,主要功能有:权限管理、菜单管理、用户管理,系统设置、实时日志,实时监控,API加密,以及登录用户修改密码、配置个性菜单等。

# 技术栈

前端:layui

java后端:SpringBoot + Thymeleaf + WebSocket + Spring Security + SpringData-Jpa + MySql

# 工程结构说明

java部分、html、js、css部分都是大目录下面按单表一个子目录存放

a19eab7f0584c1eedc15575474dcbebb.png

f1118af8cc49c61fd54cf0bad4b4d09e.png

之前调整过前端文件结构布局,现在重新更新说明一下

2d028910dd9de5e1c71074cbe5fbf0bb.png

# 运行预览

效果先睹为快,具体介绍在下方,按功能点进行详情介绍

c8d4f5ab8e9e7394e2bfeaadca76a665.png

# 功能演示

登录

(为了方便演示,密码输入框的类型改成text)

配置文件分支选择,dev环境无需输入验证码

d54442c9199e50614c493bd7ada0dd22.gif

64b9e385c7eb35ef24199ae14cb599c5.gif

同时支持多种登录限制

允许/禁止账号多人在线

48a979588b9042b0e9ef716f8f7ed15c.gif

软删除

17a4352c1e63443e6f9bdb63c654b575.gif

限制登录IP地址

5a42f25a93f577adb573bc95b0c60d68.gif

账号过期

8d0a3dc96cfafb72f926c1c839c96ae1.gif

更多登录限制,还可以继续扩展

 # 系统设置

一下简单的系统属性设置,想支持更多的配置可自行扩展(比如这里的:用户管理初始、重置密码)

47fc61b74c66d8cbec51ce7ee18eac5f.png

系统设置新增部分功能,详见文末“补充更新”

菜单管理

菜单管理是一棵layui的Tree

增删改

837bcb55f38ca8b24bddc0db0b87aafa.png

权限管理

增删改查

3ca57db77f69a7aa54373e6ab4cec15c.gif

动态权限加载

权限的加载并不是写死在代码,而是动态从数据库读取,每次调用save方法时更新权限集合

1、妲己是ROLE_USER权限,权限内容为空,无权访问/sys/下面的路径(http://localhost:8888/sys/sysUser/get/1)

2、使用sa超级管理员进行权限管理编辑,给ROLE_USER的权限内容添加 /sys/**,妲己立即有权限访问(http://localhost:8888/sys/sysUser/get/1)

df225426cd5aec1192e14a453ed2c415.gif

用户管理

主要包括用户信息、登录限制的维护,菜单、权限的分配等

961407414113f8df35c24789c8aef8a0.png

修改用户权限是下一次登录生效

19697045fa01aaea1e38a97595ecb71d.gif

修改用户菜单是刷新系统即可生效

b3c00328c1718fba59e73a1474ae8b4c.gif

用户管理新增“当前在线用户”管理,详见文末“补充更新”

# 登录用户信息

基本信息

登录用户只能修改部分信息,例如名称、修改密码

07aa0bd14457751060f62760fdde6a3b.png

修改密码

密码使用的是MD5加密并转换为16进制字符串存储,用户除了能主动修改密码外,还能叫管理员重置密码

3670df82d805654147068321c173f0a5.png16c205f77a4e3397c40f125730ef02ae.png

7f010c8c9bc088d7f00138a18b91a71f.png

 0ee1d3e9221afba22a6e4cb0075955e1.gif

个性菜单

用户可以自行配置自己的个性化快捷菜单

9077f97556168a066600485d8afc5512.png

实时日志

使用websocket,实时将日志输出到web页面,1秒刷新一次

注意:这里的日志配置只配置了dev环境,prod环境尚未为空,发布生产环境前记得先配置,否则生成的日志文件将不会输入日志内容!

实时监控

实时监控的是系统硬件环境、以及jvm运行时内存,使用websocket,实时将数据输出到web页面,1秒刷新一次

windows环境

b11f4bbc5ba0d0d5907cea58ea8d1564.gif

Linux环境

d2826e448068cc03ddeb10d6a18c28cc.png

API加密

请求参数加密

ca32ce7de4bc9e5d564639bff957aeb9.png

响应数据加密

d0061e7294e006f63bfccefc6c47be36.png

1、系统设置新增API加密开关,可一键关闭、开启API加密;

开启API加密9562b1bf2e638f38620712a09fbac4d4.png

关闭API加密

8399ba7f17be872045afb8b0febdfd2d.png

# 关键点讲解

1、定制url访问权限,动态权限读取,需要自定义配置认证数据源、认证管理器、拦截器。

2、API加密中,由于登录校验是Spring Security做的,因此我们要在UsernamePasswordAuthenticationFilter获取账号、密码之前完成解密操作,正好我们的校验验证码操作就是在它之前,同时要做响应数据的加密操作,所以登录部分的API加密光按照我们之前的博客来还是不够的,需要在CaptchaFilterConfig进行解密操作,解密后new一个自定义RequestWrapper设置Parameter,并将这个新对象传到doFilter交由下一步处理

3、还是API加密问题,我们是在程序启动的时候生成后端RSA秘钥对,正常来说我们在访问登录页面进行登录的时候前端获取一下就可以了,但在开发环境中,我们通常开启热部署功能,改完代码程序可能会自动重启,但登录用户信息仍然保持在本地线程,系统依旧处于登录状态没有跳转到登录页面,导致后端公钥已经改变,但前端依旧用的是旧的后端公钥,所有导致加解密失败;解决:在访问index首页时也获取一下后端公钥,这样在开发的时候idea热部署后刷新页面就可以了(已提交最新代码,解决热部署后刷新页面还是API加解密失败问题;现在热部署后刷新页面即可)

4、好多人都不知道,项目有工具类CodeDOM.java可以生成一套单表的完整增删改查后台代码,具体详情可以看之前的博客:SpringBoot系列——Spring-Data-JPA(究极进化版) 自动生成单表基础增、删、改、查接口

配置好数据库,指定代码生成父位置

59d79efcc8660a70eb738a42a1571818.png

运行main函数即可一键生成一套单表增删改查后台代码

3c6ae85c18db4c32f4dc339625caa693.png

a6529ebd4343482a6a4564c758f42f89.png

# 后记

这个只是一个比较简单通用的后台系统,如果加入工作流,就可以升级成基础平台,为简化业务开发,将部分通用系统功能整理成独立项目,具体业务功能通过iframe嵌入

1、新增百度富文本的使用,但还没配置上传接口:UEditor文档

对应字段类型,mysql要改成longtext

b5354a59d6dff6d5554f941516bcbddd.png

2、新增“”记住我“”功能,也就是rememberMe,原理以及源码探究请看这位大佬的博客:https://blog.csdn.net/qq_37142346/article/details/80114609

0642509fc09d734216e575e9c4065d4c.png

eaa49f16ced449320c2d6e7774a096a3.png

需要新增一张表,SQL文件我也以及更新了

8882d241ab17d687fabbe93e09d51c9c.png

3、修复若干bug,使其系统越来越完善

1)系统设置新增系统颜色,头部、左侧菜单的颜色可按心情切换(SQL文件已同步更新)

b3f120f59e867340225074df9b63a26d.png

2)用户管理模块新增“当前在线用户”管理,可实时查看当前在线用户,以及对当前在线用户进行强制下线操作

e76b5be3057846f76437a97dc484a1ab.gif

源码地址:

https://github.com/huanzi-qch/base-admin

作者:huanzi-qch

出处:https://www.cnblogs.com/huanzi-qch/

 往期推荐 

?

  • 当我们遇到100亿次请求?该如何设计后端架构?
  • GitHub 热门:动漫生成器让照片秒变手绘日漫风,实测好用
  • 华为鸿蒙2.0,即将发布

31190c324c9ca819c716b7d8bff658e6.png

fc1d8b628dc6f7f15477f89e4b372731.gif 

点击

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值