基于SpringBoot与Vue3搭建诉讼档案管理系统实战指南

一、技术栈选型与环境准备

本系统采用前后端分离架构。后端使用 Spring Boot 3.2 处理业务逻辑与文件存储，前端使用 Vue 3 结合 Element Plus 实现交互界面，数据库采用 MySQL 8.0。这种组合在档案管理系统中最为成熟，既能保证数据安全性，又能提供流畅的用户体验。

请确保本地已安装以下基础环境：

• JDK 17+：Java开发环境。
• Node.js 18+：前端运行环境。
• MySQL 8.0+：数据存储服务。
• Maven 3.6+：Java项目构建工具。

在MySQL中执行以下SQL脚本，建立数据库并初始化表结构：

```sql CREATE DATABASE lawsuit_system DEFAULT CHARSET utf8mb4; USE lawsuit_system; CREATE TABLE t_archive ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', case_no VARCHAR(50) NOT NULL COMMENT '案号', case_name VARCHAR(100) NOT NULL COMMENT '案件名称', file_name VARCHAR(255) NOT NULL COMMENT '原始文件名', file_path VARCHAR(500) NOT NULL COMMENT '服务器存储路径', upload_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间', INDEX idx_case_no (case_no) ) COMMENT='诉讼档案表'; ```

二、后端项目构建与配置

使用 Spring Initializr (https://start.spring.io/) 生成项目，勾选 Spring Web、Spring Data JPA、MySQL Driver、Lombok 依赖。解压后导入IDE。

1. pom.xml 依赖配置

确保 `pom.xml` 中包含以下核心依赖，版本由Spring Boot父工程管理：

```xml org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa com.mysql mysql-connector-j runtime org.projectlombok lombok true ```

2. application.yml 核心配置

在 `src/main/resources` 下创建或修改配置文件，设置数据库连接及文件上传参数：

```yaml server: port: 8080 spring: application: name: lawsuit-archive-serve datasource: url: jdbc:mysql://localhost:3306/lawsuit_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root 请修改为你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update 自动更新表结构 show-sql: true servlet: multipart: max-file-size: 200MB 单个文件最大限制 max-request-size: 200MB 自定义文件存储路径 file: upload-dir: ./uploads ```

3. 实体类定义

创建 `entity/Archive.java`，使用 Lombok 简化代码：

```java package com.example.lawsuit.entity; import jakarta.persistence.; import lombok.Data; import org.hibernate.annotations.CreationTimestamp; import java.time.LocalDateTime; @Data @Entity @Table(name = "t_archive") public class Archive { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "case_no", nullable = false) private String caseNo; @Column(name = "case_name", nullable = false) private String caseName; @Column(name = "file_name", nullable = false) private String fileName; @Column(name = "file_path", nullable = false) private String filePath; @Column(name = "upload_time") @CreationTimestamp private LocalDateTime uploadTime; } ```

4. 数据层与业务层

创建 `repository/ArchiveRepository.java` 接口，继承 JpaRepository 获得基础CRUD功能：

```java package com.example.lawsuit.repository; import com.example.lawsuit.entity.Archive; import org.springframework.data.jpa.repository.JpaRepository; public interface ArchiveRepository extends JpaRepository { } ```

5. 核心控制器实现

创建 `controller/ArchiveController.java`。这是系统的核心，负责接收前端文件流并存储到本地磁盘，同时将元数据存入数据库：

```java package com.example.lawsuit.controller; import com.example.lawsuit.entity.Archive; import com.example.lawsuit.repository.ArchiveRepository; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.UUID; @RestController @RequestMapping("/api/archive") @CrossOrigin(origins = "") // 允许跨域 public class ArchiveController { @Value("${file.upload-dir}") private String uploadDir; private final ArchiveRepository repository; public ArchiveController(ArchiveRepository repository) { this.repository = repository; // 启动时检查并创建上传目录 new File(uploadDir).mkdirs(); } / 上传诉讼档案 / @PostMapping("/upload") public Map uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("caseNo") String caseNo, @RequestParam("caseName") String caseName) { Map result = new HashMap<>(); try { // 1. 获取原始文件名并生成唯一存储文件名 String originalFilename = file.getOriginalFilename(); String extension = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID() + extension; // 2. 构建存储路径并保存文件 Path path = Paths.get(uploadDir, newFileName); Files.write(path, file.getBytes()); // 3. 构建数据库实体并保存 Archive archive = new Archive(); archive.setCaseNo(caseNo); archive.setCaseName(caseName); archive.setFileName(originalFilename); archive.setFilePath(path.toString()); repository.save(archive); result.put("code", 200); result.put("message", "上传成功"); } catch (IOException e) { result.put("code", 500); result.put("message", "上传失败: " + e.getMessage()); } return result; } / 获取档案列表 / @GetMapping("/list") public List list() { return repository.findAll(); } } ```

三、前端项目构建与实现

在终端执行命令创建 Vue 3 项目：

```bash npm create vue@latest lawsuit-frontend 按提示选择默认配置即可 cd lawsuit-frontend npm install element-plus axios ```

1. main.js 引入组件库

修改 `src/main.js`，全局注册 Element Plus：

```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('app') ```

2. App.vue 实现界面与逻辑

我们将所有逻辑封装在 `App.vue` 中，实现一个包含“案号录入”、“文件上传”和“列表展示”的完整页面：

```html ```

四、运行与验证

1. 启动后端服务

在IDEA中点击运行，或在项目根目录执行：

```bash mvn spring-boot:run ```

看到控制台输出 `Started LawsuitApplication` 表示后端启动成功。

2. 启动前端服务

在新的终端窗口进入前端目录：

```bash npm run dev ```

终端会输出 Local 地址，通常是 `http://localhost:5173`。

3. 功能实操验证

1. 打开浏览器访问前端地址。
2. 在输入框中输入案号：(2023)苏01民终888号。
3. 输入案件名称：某建筑工程合同纠纷案。
4. 点击上传区域，选择本地的一个测试文件（如 `证据材料.pdf`）。

操作完成后，观察下方表格。如果表格立即新增了一条记录，显示刚才输入的案号和文件名，且后端控制台打印了 Hibernate 的 insert 语句，同时项目根目录下生成了 `uploads` 文件夹并存放了该文件，说明系统搭建完全成功。

五、生产环境优化建议

上述代码实现了核心的归档功能。若要投入实际使用，需注意以下三点：

• 文件存储迁移：当前文件存储在本地磁盘。生产环境建议接入 MinIO 或阿里云 OSS，只需修改 `ArchiveController` 中的 `Files.write` 逻辑为对象存储客户端的 `putObject` 方法即可。
• 权限控制：必须在 Spring Boot 中集成 Spring Security 或 Sa-Token，对 `/api/archive` 接口增加鉴权，防止未授权访问敏感诉讼档案。
• 全文检索：当档案数量达到十万级时，数据库 `LIKE` 查询会变慢。建议引入 Elasticsearch，在文件上传成功后提取文本内容并写入索引库，实现毫秒级全文检索。