升職加薪 Admin！一個開源 RBAC 中後臺框架！

Java陈序员發表於2024-10-28
框架

大家好，我是 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、下載原始碼

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

2、以 Maven 專案的形式匯入到 IDEA

3、目錄結構

sz-boot-parent/
├── sz-build                                    # sz-boot-parent版本管理
├── sz-dependencies                             # 全域性依賴版本管理
├── sz-common                                   # 通用模組集合
│   ├── sz-common-core                          # 核心通用模組
│   ├── sz-common-db-mongodb                    # MongoDB 資料庫操作模組
│   ├── sz-common-db-mysql                      # MySQL 資料庫操作模組
│   ├── sz-common-db-redis                      # Redis 資料庫操作模組
│   ├── sz-common-excel                         # Excel 工具模組
│   ├── sz-common-generator                     # 程式碼生成器模組
│   ├── sz-common-log                           # 日誌模組
│   ├── sz-common-minio                         # Minio 物件儲存模組
│   ├── sz-common-mq                            # 訊息佇列模組
│   └── sz-common-security                      # 鑑權模組
│   └── sz-common-wechat                        # 微信相關功能模組
│   ...
└── sz-service                            # 服務模組
    ├── sz-service-admin            # sz-admin 核心服務模組
    └── sz-service-websocket            # websocket 服務模組
    └── ...

4、建立資料庫 sz_admin_preview

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 文件地址

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

前端執行

1、下載原始碼

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

2、目錄結構

sz-admin/
├── public                                      # 靜態資原始檔（該資料夾不會被打包）
│   └── favicon.ico
├── src
│   ├── api                                        # API 介面管理
│   ├── assets                                    # 靜態資原始檔                
│   ├── components                                # 全域性元件
│   ├── config                                    # 全域性配置項    
│   ├── directives                                # 全域性指令檔案
│   ├── hooks                                    # 常用 Hooks 封裝
│   ├── languages                                # 語言國際化 i18n
│   ├── layouts                                    # 框架佈局模組    
│   ├── router                                    # 路由管理
│   ├── stores                                    # pinia store
│   ├── styles                                    # 全域性樣式檔案
│   ├── typings                                    # 全域性 ts 宣告
│   ├── utils                                    # 常用util工具庫
│   ├── views                                    # 專案所有頁面
│   ├── App.vue                                    # 專案主元件
│   └── main.ts                                    # 專案入口檔案
├── env.d.ts                                    # 指定 ts 識別 vue
├── index.html                                    # 入口 html
├── package.json                                # 依賴包管理
├── pnpm-lock.yaml                                # pnpm依賴包版本鎖
├── tsconfig.app.json                            # 應用程式程式碼的特定配置，用於瀏覽器環境。
├── tsconfig.json                                # typescript 全域性配置
├── tsconfig.node.json                            # Node.js 環境的特定配置，用於伺服器端程式碼或構建指令碼。
├── vite.config.mts                                # vite 全域性配置檔案
└── README.md
在業務開發中，重點關注 /src/api 和 /src/views 路徑即可。

3、安裝依賴

# 安裝pnpm
npm install pnpm -g

# 進入到專案根路徑，執行以下命令，安裝依賴
pnpm install

# 也可以直接使用 npm 安裝依賴
npm install

4、在專案根目錄下建立 .env.development.local 配置檔案，並新增如下內容

# 本地環境
VITE_USER_NODE_ENV=development
# 公共基礎路徑
VITE_PUBLIC_PATH=/
# 開發環境介面地址
VITE_API_URL=http://127.0.0.1:9991/api
# 授權的clientID
VITE_APP_CLIENT_ID ="195da9fcce574852b850068771cde034"

## 啟用WebSocket連線
## 若需啟用WebSocket，請設定VITE_SOCKET_URL為有效的WebSocket地址
## 若不設定或留空，WebSocket功能將不會啟用。例：
# VITE_SOCKET_URL=ws://127.0.0.1:9993/socket

5、啟動執行

pnpm dev

# 也可以直接使用 npm 啟動
npm run dev

6、瀏覽器訪問

http://localhost:9848/
預設賬號密碼：admin/sz123456

Sz-Admin 靈活、簡潔、高效，基於最新的技術構建，提供一個流暢、直觀且功能強大的開發框架。無論是個人開發，還是工作使用，都是一款十分優秀好用的框架~

專案地址：https://github.com/feiyuchuixue/sz-boot-parent

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

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

或者訪問網站，進行線上瀏覽：

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

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章