SpringBoot3 JDK21 Vue3开源后台RBAC管理系统 | 2024年好用的开源RBAC管理系统 | Sz-Admin快速开始

序言

项目现已全面开源，商业用途完全免费！

当前版本：v0.6.3。

如果喜欢这个项目或支持作者，欢迎Star、Fork、Watch
一键三连 🚀！！

在构建此代码框架的过程中，我已投入了大量精力，力求使其功能完善、结构清晰。然而，鉴于个人技术水平和经验的限制，框架中可能存在一些问题或可以改进的地方。对于任何可能的缺陷或不足，我在此表示诚挚的歉意，并恳请各位给予谅解。 我非常期待收到您的反馈和建议，您的每一条意见都是帮助我改进框架、提升技术水平的宝贵资源。让我们共同协作，不断优化和完善这个框架。 感谢您的使用与支持，期待与您的交流和合作！

简介

接触了很多优秀的开源和闭源项目，在使用过程中也发现一些问题，不甘满足的我遂产生了想法：于是利用休息时间编写了一套后台管理系统，它灵活、简洁、高效，拥抱最新的技术，因此Sz-Admin便诞生了，也意为升职Admin，升职加薪节节高。

Sz Admin ，一个基于 Spring Boot 3、Vue 3 和 Element-Plus 的开源中后台管理框架，致力于为您提供一个流畅、直观且功能强大的开发框架。它不仅融合了最新的技术趋势，而且通过精心设计，确保了系统的简洁性和高效，让使用者可以专注业务。

在线体验

• 官网地址：https://szadmin.cn
• 文档地址：https://szadmin.cn/md/Help/doc/start.html
• 预览地址：https://preview.szadmin.cn
• 代码仓库：
  • 前端：
    • Github：sz-admin
    • Gitee：sz-admin
  • 后端：
    • Github：sz-boot-parent
    • Gitee：sz-boot-parent
  • 部署：
    • Github：sz-deploy
    • Gitee：sz-deploy

---

快速开始

基础环境：

• JDK 21 ：这里使用的是azul
• MySQL 8.0.34：官网
• Maven 3.8：官网
• Redis 7.2.1：官网
• Node 20.12.2：推荐使用nvm管理node版本 nvm-windows | nvm

后端运行

服务运行非常简单！！

第一步：源码下载

::: code-group

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

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

:::

第二步：导入项目

这里使用的是idea

第三步：依赖安装

maven依赖导入。为了加快下载速度，在根pom配置了aliyu镜像加速，建议根据各自的网络环境灵活处置（如不需要注释即可）。

    <repositories>
        <repository>
            <id>public</id>
            <url>https://maven.aliyun.com/repository/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>

        <!-- 配置官方Maven中央仓库 -->
        <repository>
            <id>central</id>
            <url>https://repo1.maven.org/maven2</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled> <!-- 通常中央仓库不包含snapshots -->
            </snapshots>
        </repository>

    </repositories>

第四步：修改配置文件

[!IMPORTANT]重要提示！

在resources/config 路径下，我们发现存在多个文件目录，它们分别是：

name	描述
dev	开发环境
local	本地环境
preview	预览/测试环境
prod	正式环境

详见配置。

• 打开sz-service -> sz-service-admin -> resources -> local 目录
• 打开mysql.yml 和 redis.yml， 修改配置。

在这里需要先创建数据库[如：创建数据库sz_admin_preview]（无需导入数据脚本，项目启动会自动检查并创建），推荐使用utf8mb4字符集。而后根据数据库信息修改jdbc配置。

修改mysql连接信息：

## mysql.yml
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/sz_admin_preview?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8&useSSL=false&allowPublicKeyRetrieval=true // [!code highlight]   // [!code focus] // [!code warning]
    username: root // [!code highlight]   // [!code focus] // [!code warning]
    password: Yanfa2023@ // [!code highlight]   // [!code focus] // [!code warning]
    hikari:
      #连接池名
      pool-name: HikariCP
      #最小空闲连接数
      minimum-idle: 5
      # 空闲连接存活最大时间，默认10分钟
      idle-timeout: 600000
      # 连接池最大连接数，默认是10
      maximum-pool-size: 10
      # 此属性控制从池返回的连接的默认自动提交行为,默认值：true
      auto-commit: true
      # 此属性控制池中连接的最长生命周期，值0表示无限生命周期，默认30分钟
      max-lifetime: 1800000
      # 数据库连接超时时间,默认30秒
      connection-timeout: 30000
      # 连接测试query
      connection-test-query: SELECT 1

修改redis连接信息：

## redis.yml
spring:
  data:
    redis:
      #单机配置
      host: 127.0.0.1 // [!code highlight]   // [!code focus] // [!code warning]
      port: 6379 // [!code highlight]   // [!code focus] // [!code warning]
      # 数据索引
      database: 0
      # 连接超时时间（毫秒）
      timeout: 50000
      ###连接池配置###
      jedis:
        pool:
          # 连接池最大连接数（使用负值表示没有限制）
          max-active: 100
          # 连接池最大阻塞等待时间（使用负值表示没有限制）
          max-wait: -1
          # 连接池中的最大空闲连接
          max-idle: 30
          # 连接池中的最小空闲连接
          min-idle: 10
      password: 123456 // [!code highlight]   // [!code focus] // [!code warning]

# 开启redis监听
redis:
  listener:
    enable: true

至此，已经完成全部准备工作！

第五步：启动!

运行com.sz.AdminApplication.java启动文件

启动成功信息如下：

2024-05-14 19:42:10.871  INFO 31360 ---  [admin-service] [           main] c.sz.platform.listener.AppStartListener  :  ===================== app is running finish ... =====================
                                   __                _
                                  |  ]              (_)
 .--.   ____  ______  ,--.    .--.| |  _ .--..--.   __   _ .--.
( (`\] [_   ]|______|`'_\ : / /'`\' | [ `.-. .-. | [  | [ `.-. |
 `'.'.  .' /_        // | |,| \__/  |  | | | | | |  | |  | | | |
[\__) )[_____]       \'-;__/ '.__.;__][___||__||__][___][___||__]
------------------https://szadmin.cn  (v0.6.0 Beta)-------------------

验证

访问 http://127.0.0.1:9991/api/admin/doc.html#/home，展示如下页面，搭建完成！！！

---

前端运行

第一步：源码下载

::: code-group

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

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

:::

第二步：导入项目

同上

第三步：依赖安装

# 安装pnpm
npm install pnpm -g
# 进入到项目根路径，运行以下命令，安装依赖
pnpm install

第四步：创建local环境

在项目根目录下创建 .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

第五步：启动！

打开命令行，执行 pnpm dev，项目很快启动，并弹出窗口！！ 你没看错，它只用了834ms！！！这就是vite！！

  VITE v4.5.2  ready in 834 ms

  ➜  Local:   http://localhost:9848/
  ➜  Network: http://10.255.0.1:9848/
  ➜  Network: http://192.168.100.176:9848/
  ➜  Network: http://192.168.56.1:9848/
  ➜  press h to show help

输入账号密码admin/sz123456，进入home页。

注：常用命令

# 运行dev环境
pnpm dev

# 打包
pnpm build

# ts类型检查
pnpm type-check

# es-lint 检查
pnpm lint

# 格式化
pnpm format