# vue3-template-server

**Repository Path**: lyDevelop/vue3-template-server

## Basic Information

- **Project Name**: vue3-template-server
- **Description**: 基于 JDK17、SpringBoot3、Spring Security 6、JWT、Redis、Mybatis-Plus、Knife4j、Vue 3、Element-Plus 构建的前后端分离单体权限管理系统。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 5
- **Created**: 2024-04-14
- **Last Updated**: 2025-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Java, SpringBoot, SpringSecurity, MybatisPlus, Redis

## README

# 项目简介

基于 JDK 17、Spring Boot 3、Spring Security 6、JWT、Redis、Mybatis-Plus、Knife4j、Vue 3、Element-Plus 构建的前后端分离单体权限管理系统。

- 开发框架：Spring Boot 3
- 安全框架：Spring Security 6
- 认证方式：JWT
- 缓存：Redis
- 数据库：MySQL
- ORM 框架：Mybatis-Plus
- 对象存储服务：MinIO
- API 文档：Knife4j
- 前端框架：Vue 3
- UI 框架：Element-Plus

# 项目特点

1. 采用当前主流技术栈，项目结构清晰，代码注释详细，便于学习。
2. 采用前后端分离架构，前端使用 Vue 3 框架，后端使用 Spring Boot 3 框架，实现前后端分离开发。
3. 使用 Redis 缓存提升性能，JWT 实现用户认证， Mybatis-Plus 简化数据库操作，使用 Knife4j 实现 API 文档。
4. 基于 RBAC 模型，实现用户角色权限管理，支持动态菜单权限管理，涵盖接口方法和按钮级别。
5. 集成 MinIO 存储服务，实现文件上传、下载、删除，支持在线预览图片、视频、文档。
6. 自动生成接口文档，支持在线调试，提升开发效率。

# 接口文档

- `knife4j` : http://localhost:8080/doc.html
- `swagger` : http://localhost:8080/swagger-ui/index.html  
  **注意:** 项目启动之后才可以访问

# 准备工作(本地需要具备的开发环境)

| 环境    | 版本     |
|:------|:-------|
| JDK   | 17     |
| MySQL | 8.0.30 |
| Redis | 最新版    |
| Minio | 8.5.2  |

推荐使用 Docker 镜像(节省了繁杂的下载安装过程、部署简单)

  ```sh
  # Mysql
  docker pull mysql:8.0.30
  # Redis
  docker pull redis:latest
  # Minio
  docker pull quay.io/minio/minio
  ```

# 项目启动

1. **数据库初始化**  
   执行项目目录`sql`文件夹中的`vue3-admin.sql`脚本完成数据库的创建、表结构以及基础数据的初始化。
2. **修改配置文件**  
   `application-dev.yml`修改 MySQL、Redis 的连接配置；
3. **启动项目**  
   执行`SystemApplication.java`的`main`方法完成后端项目启动；

# 项目部署(手动部署)

1. **打包项目**  
   执行`mvn clean package`命令完成项目的打包；

2. **Docker 环境 中的前期准备**

    - 安装 Docker
    - 安装 Docker-compose
    - 拉取 MySQL 镜像
      ```sh
      docker pull mysql:8.0.30
      ```
    - 拉取 Redis 镜像
      ```sh
      docker pull redis:latest
      ```
    - 拉取 MinIO 镜像
      ```sh
      docker pull quay.io/minio/minio
      ```

3. **将打包好的项目部署到 Docker 上**

    - 首先在项目根目录下执行`docker build -t server-image .`将当前工程构建为 Docker 镜像
      ```sh
      # 查看打包镜像是否成功
      liuyang@MacBook-Pro vue3-admin-server % docker images server-image
      REPOSITORY     TAG       IMAGE ID       CREATED      SIZE
      server-image   latest    24458eb5f462   4 days ago   590MB
      liuyang@MacBook-Pro vue3-admin-server %
      ```
    - 编写`docker-compose.yml`文件  
      详细参照当前工程目录下的`docker-compose.yml`文件

    - 执行`docker-compose up -d`命令完成项目的一键启动
    - 执行`docker-compose ps`命令查看项目是否启动成功
    - 执行`docker-compose logs -f`命令查看项目日志
    - 执行`docker-compose down`命令一键停止项目

4. **访问项目**  
   访问`http://localhost:8080/doc.html`看是否成功。

# 项目部署(自动部署)

- 执行项目根目录下的`build.sh`脚本完成项目的打包和部署
  ```sh
  ./build.sh
  ```