升职加薪 Admin！一个开源 RBAC 中背景框架！

大家好，我是 Java陈序员。
今天，给大家介绍一款开源的 RBAC 中背景框架，资助你在工作中升职加薪！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

Sz-Admin —— 意为升职Admin（升职加薪节节高），一个基于 SpringBoot3、Vue3 和 Element-Plus 的开源中背景管理框架，致力于为您提供一个流通、直观且功能强盛的开发框架。

功能特色：

• 账户管理：负责管理系统用户的创建、配置及权限分配，确保用户身份的合法性和操作的合规性
  
• 角色管理：实现角色与权限的精致绑定，通过角色分配简化用户权限管理，进步系统安全性和灵活性
  
• 菜单管理：定制化系统导航结构，通过权限细分确保用户仅访问授权的操作界面，增强操作的直观性和可控性
  
• 字典管理：维护系统内静态数据字典，如配置项、枚举值等，以统一管理和优化数据的划一性
  
• 参数管理：动态调解系统运行参数，无需重启即可实时见效，提升系统相应速度和运维效率
  
• 客户端管理：监管客户端接入，确保客户端的合法性和安全性，维护系统的整体稳定性
  
• 部门管理：构建构造架构，通过树状结构展示，支持数据权限的层级化管理，加强信息的有序性和安全性
  
• 代码天生器：自动化天生前后端代码模板，支持 CRUD 操作，加快开发周期，提升开发效率
  
• WebSocket：提供 WebSocket 支持
  

技能栈：

• SpringBoot3.x
  
• Sa-Token
  
• Mybatis Flex
  
• Flyway
  
• Knife4j
  
• Minio
  
• HikariCP
  
• Vue3.4
  
• Vite5
  
• TypeScript
  
• Pinia
  
• Element-Plus
  

系统截图

登录

暗黑模式

账号管理

角色管理

菜单管理

字典管理

部门管理

代码天生

布局设置

快速上手

底子环境

• JDK21
  
• MySQL8.0.34+
  
• Maven3.8+
  
• Node16.x+
  

后端运行

1、下载源码

1. git clone https://github.com/feiyuchuixue/sz-boot-parent.git

复制代码

2、以 Maven 项目标形式导入到 IDEA
3、目录结构

1. sz-boot-parent/
2. ├── sz-build                                    # sz-boot-parent版本管理
3. ├── sz-dependencies                             # 全局依赖版本管理
4. ├── sz-common                                   # 通用模块集合
5. │   ├── sz-common-core                          # 核心通用模块
6. │   ├── sz-common-db-mongodb                    # MongoDB 数据库操作模块
7. │   ├── sz-common-db-mysql                      # MySQL 数据库操作模块
8. │   ├── sz-common-db-redis                      # Redis 数据库操作模块
9. │   ├── sz-common-excel                         # Excel 工具模块
10. │   ├── sz-common-generator                     # 代码生成器模块
11. │   ├── sz-common-log                           # 日志模块
12. │   ├── sz-common-minio                         # Minio 对象存储模块
13. │   ├── sz-common-mq                            # 消息队列模块
14. │   └── sz-common-security                      # 鉴权模块
15. │   └── sz-common-wechat                        # 微信相关功能模块
16. │   ...
17. └── sz-service                                        # 服务模块
18.     ├── sz-service-admin                        # sz-admin 核心服务模块
19.     └── sz-service-websocket                        # websocket 服务模块
20.     └── ...

复制代码

4、创建数据库 sz_admin_preview

1. CREATE DATABASE `teriteri` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;

复制代码

无需导入数据脚本，项目启动会自动查抄并创建！

5、修改配置文件

• 打开 sz-service/sz-service-admin/resources/local 目录
  
• 打开 mysql.yml 和 redis.yml，修改配置 MySQL、Redis 的毗连信息
  

6、运行 com.sz.AdminApplication 主启动类，启动项目
7、启动成功后，访问在线 API 文档地址

1. http://127.0.0.1:9991/api/admin/doc.html#/home

复制代码

前端运行

1、下载源码

1. git clone https://github.com/feiyuchuixue/sz-admin.git

复制代码

2、目录结构

1. sz-admin/
2. ├── public                                      # 静态资源文件（该文件夹不会被打包）
3. │   └── favicon.ico
4. ├── src
5. │   ├── api                                                                                # API 接口管理
6. │   ├── assets                                                                        # 静态资源文件                               
7. │   ├── components                                                                # 全局组件
8. │   ├── config                                                                        # 全局配置项       
9. │   ├── directives                                                                # 全局指令文件
10. │   ├── hooks                                                                        # 常用 Hooks 封装
11. │   ├── languages                                                                # 语言国际化 i18n
12. │   ├── layouts                                                                        # 框架布局模块       
13. │   ├── router                                                                        # 路由管理
14. │   ├── stores                                                                        # pinia store
15. │   ├── styles                                                                        # 全局样式文件
16. │   ├── typings                                                                        # 全局 ts 声明
17. │   ├── utils                                                                        # 常用util工具库
18. │   ├── views                                                                        # 项目所有页面
19. │   ├── App.vue                                                                        # 项目主组件
20. │   └── main.ts                                                                        # 项目入口文件
21. ├── env.d.ts                                                                        # 指定 ts 识别 vue
22. ├── index.html                                                                        # 入口 html
23. ├── package.json                                                                # 依赖包管理
24. ├── pnpm-lock.yaml                                                                # pnpm依赖包版本锁
25. ├── tsconfig.app.json                                                        # 应用程序代码的特定配置，用于浏览器环境。
26. ├── tsconfig.json                                                                # typescript 全局配置
27. ├── tsconfig.node.json                                                        # Node.js 环境的特定配置，用于服务器端代码或构建脚本。
28. ├── vite.config.mts                                                            # vite 全局配置文件
29. └── README.md

复制代码

在业务开发中，重点关注 /src/api 和 /src/views 路径即可。

3、安装依靠

1. # 安装pnpm
2. npm install pnpm -g
4. # 进入到项目根路径，运行以下命令，安装依赖
5. pnpm install
7. # 也可以直接使用 npm 安装依赖
8. npm install

复制代码

4、在项目根目录下创建 .env.development.local 配置文件，并添加如下内容

1. # 本地环境
2. VITE_USER_NODE_ENV=development
3. # 公共基础路径
4. VITE_PUBLIC_PATH=/
5. # 开发环境接口地址
6. VITE_API_URL=http://127.0.0.1:9991/api
7. # 授权的clientID
8. VITE_APP_CLIENT_ID ="195da9fcce574852b850068771cde034"
10. ## 启用WebSocket连接
11. ## 若需启用WebSocket，请设置VITE_SOCKET_URL为有效的WebSocket地址
12. ## 若不设置或留空，WebSocket功能将不会启用。例：
13. # VITE_SOCKET_URL=ws://127.0.0.1:9993/socket

复制代码

5、启动运行

1. pnpm dev
3. # 也可以直接使用 npm 启动
4. npm run dev

复制代码

6、欣赏器访问

1. http://localhost:9848/

复制代码

默认账号密码：admin/sz123456

Sz-Admin 灵活、简洁、高效，基于最新的技能构建，提供一个流通、直观且功能强盛的开发框架。无论是个人开发，还是工作使用，都是一款十分良好好用的框架~

1. 项目地址：https://github.com/feiyuchuixue/sz-boot-parent

复制代码

最后

保举的开源项目已经收录到 GitHub 项目，欢迎 Star：

1. https://github.com/chenyl8848/great-open-source-project

复制代码

大概访问网站，进行在线欣赏：

1. https://chencoding.top:8090/#/

复制代码

大家的点赞、收藏和评论都是对作者的支持，如文章对你有资助还请点赞转发支持下，谢谢！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。