# 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**: 10
- **Forks**: 8
- **Created**: 2024-04-14
- **Last Updated**: 2026-07-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
- 文档在线编辑：OnlyOffice Document Server
- 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. 集成 OnlyOffice Document Server，支持在线创建、编辑、协作编辑 Office 文档（Word、Excel、PPT）。
7. 自动生成接口文档，支持在线调试，提升开发效率。

# 接口文档

- `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  |
| OnlyOffice Document Server | 最新版 |

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

  ```sh
  # Mysql
  docker pull mysql:8.0.30
  # Redis
  docker pull redis:latest
  # Minio
  docker pull quay.io/minio/minio
  # OnlyOffice Document Server
  docker pull onlyoffice/documentserver
  ```

# 项目启动

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

# OnlyOffice 文档在线编辑

## 功能说明

集成 OnlyOffice Document Server，支持以下功能：
- 在线创建、编辑、协作编辑 Office 文档（Word、Excel、PPT）
- 支持文档预览模式
- 支持多人实时协作编辑
- 文档自动保存并同步到 MinIO 存储

## 部署 OnlyOffice Document Server

使用 Docker 部署 OnlyOffice Document Server：

```sh
docker run -i -t -d -p 80:80 \
  --name onlyoffice-document-server \
  onlyoffice/documentserver
```

## 配置说明

在 `application-dev.yml` 中配置 OnlyOffice：

```yaml
# OnlyOffice Document Server 配置
onlyoffice:
  # Document Server 地址
  server-url: http://localhost:80
  # JWT 密钥 (用于签发和验证 Token)
  jwt-secret: your-jwt-secret
  # 是否启用 JWT 验证
  jwt-enabled: false

# 后端服务地址（供 OnlyOffice 回调使用）
backend:
  # Docker 可访问的后端地址（用于 OnlyOffice 回调）
  callback-host: http://localhost:8080
```

**配置说明：**
- `onlyoffice.server-url`：OnlyOffice Document Server 的访问地址
- `onlyoffice.jwt-secret`：JWT 密钥，用于签发和验证 Token（生产环境建议启用）
- `onlyoffice.jwt-enabled`：是否启用 JWT 验证
- `backend.callback-host`：后端服务地址，OnlyOffice 回调时使用（Docker 环境下需配置为宿主机 IP）

## API 接口

| 接口 | 方法 | 说明 |
|:---|:---|:---|
| `/api/v1/onlyoffice/config` | GET | 获取文档编辑器配置 |
| `/api/v1/onlyoffice/callback` | POST | OnlyOffice 回调接口（文档保存时调用） |

## 使用示例

前端调用 `/api/v1/onlyoffice/config` 接口获取编辑器配置，然后使用 OnlyOffice API 渲染编辑器：

```javascript
// 获取编辑器配置
const response = await axios.get('/api/v1/onlyoffice/config', {
  params: {
    fileName: 'document.docx',
    fileUrl: 'http://localhost:9000/public/path/to/document.docx',
    editable: true
  }
});

const config = response.data.data;

// 使用 OnlyOffice API 渲染编辑器
new DocsAPI.DocEditor("editor-container", config);
```

# 项目部署(手动部署)

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
      ```
    - 拉取 OnlyOffice Document Server 镜像
      ```sh
      docker pull onlyoffice/documentserver
      ```

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
  ```