宿迁档案管理系统开发部署全流程实操手册

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

为了确保系统的高可用性与易维护性，本方案采用前后端分离架构。后端使用 Spring Boot 3.1.5，前端采用 Vue 3 + Element Plus，数据库选用 MySQL 8.0。在开始编码前，请务必在本地配置好以下基础环境。

1.1 后端环境配置

后端开发依赖 JDK 和 Maven。请下载并安装 JDK 17（LTS长期支持版本），配置环境变量 JAVA_HOME。Maven 版本建议使用 3.9.x，并修改 settings.xml 配置阿里云镜像源以加速依赖下载。

验证命令如下：

• Java 验证：在终端执行 java -version，应显示 17.x.x 版本信息。
• Maven 验证：在终端执行 mvn -v，应显示 Apache Maven 3.9.x 及 JDK 17 信息。

1.2 前端环境配置

前端构建依赖 Node.js。请下载并安装 Node.js 18.x LTS 版本。安装完成后，建议将 npm 源切换至淘宝镜像。

执行以下命令进行环境确认与源切换：

node -v
npm config set registry https://registry.npmmirror.com

1.3 数据库安装

安装 MySQL 8.0 Community Server。安装过程中设置 root 密码为 root123（示例密码，生产环境请修改），并选择默认编码为 utf8mb4。安装完成后，开启 MySQL 服务并确保端口 3306 处于监听状态。

二、数据库设计与初始化

针对宿迁档案管理系统的核心需求，我们需要设计一张档案表 t_archive，用于存储档案的基本元数据及文件存储路径。请登录 MySQL 客户端或 Navicat，执行以下 SQL 脚本完成数据库与表的创建。

2.1 建库建表脚本

-- 创建数据库
CREATE DATABASE IF NOT EXISTS suqian_archive_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE suqian_archive_db;
-- 创建档案表
CREATE TABLE IF NOT EXISTS t_archive (
id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
archive_code VARCHAR(50) NOT NULL UNIQUE COMMENT '档案编号，唯一索引',
title VARCHAR(200) NOT NULL COMMENT '档案标题',
category VARCHAR(50) NOT NULL COMMENT '档案分类（如：文书、科技、会计）',
file_url VARCHAR(500) COMMENT '文件存储的物理路径或URL',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '归档时间',
INDEX idx_category (category) COMMENT '分类索引，加速查询'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='宿迁档案管理系统-档案主表';
-- 插入一条测试数据
INSERT INTO t_archive (archive_code, title, category, file_url)
VALUES ('SQ2023001', '宿迁市2023年度城市规划档案', '科技', '/uploads/2023/10/sq_plan.pdf');

三、后端服务开发

后端服务负责提供档案的增删改查接口及文件上传处理。我们将使用 Spring Boot 快速构建 Web 服务。

3.1 项目初始化

访问 start.spring.io，选择 Maven 项目，Java 17。Dependencies 中添加 Spring Web、MyBatis Framework、MySQL Driver、Lombok。生成项目压缩包并解压到 IDE 工作空间。

3.2 配置文件修改

打开 src/main/resources/application.properties，删除默认内容，替换为以下完整配置。这里配置了数据库连接及文件上传的大小限制。

 服务端口
server.port=8080
数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/suqian_archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
spring.datasource.username=root
spring.datasource.password=root123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
MyBatis 配置
mybatis.configuration.map-underscore-to-camel-case=true
文件上传配置
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=100MB
自定义文件存储路径
file.upload-dir=/data/suqian/uploads

3.3 核心代码实现

在 src/main/java/com/example/suqian 目录下创建以下实体类、Mapper 和 Controller。

1. 实体类

package com.example.suqian.entity;
import lombok.Data;
import java.util.Date;
@Data
public class Archive {
private Long id;
private String archiveCode;
private String title;
private String category;
private String fileUrl;
private Date createTime;
}

2. Mapper 接口

package com.example.suqian.mapper;
import com.example.suqian.entity.Archive;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface ArchiveMapper {
@Insert("INSERT INTO t_archive(archive_code, title, category, file_url) VALUES({archiveCode}, {title}, {category}, {fileUrl})")
int insert(Archive archive);
@Select("SELECT  FROM t_archive ORDER BY create_time DESC")
List findAll();
}

3. 控制器

Controller 负责处理 HTTP 请求，包括文件上传和列表查询。特别注意文件上传时的目录创建逻辑。

package com.example.suqian.controller;
import com.example.suqian.entity.Archive;
import com.example.suqian.mapper.ArchiveMapper;
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.Paths;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
@RestController
@RequestMapping("/api/archives")
@CrossOrigin(origins = "")
public class ArchiveController {
@Value("${file.upload-dir}")
private String uploadDir;
private final ArchiveMapper archiveMapper;
public ArchiveController(ArchiveMapper archiveMapper) {
this.archiveMapper = archiveMapper;
}
// 文件上传与档案录入接口
@PostMapping("/upload")
public Map upload(@RequestParam("file") MultipartFile file,
@RequestParam("title") String title,
@RequestParam("category") String category) {
Map result = new HashMap<>();
try {
// 确保上传目录存在
File destDir = new File(uploadDir);
if (!destDir.exists()) destDir.mkdirs();
// 生成唯一文件名
String originalFilename = file.getOriginalFilename();
String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
String newFileName = UUID.randomUUID().toString() + extension;
String filePath = Paths.get(uploadDir, newFileName).toString();
// 保存文件
file.transferTo(new File(filePath));
// 保存数据库记录
Archive archive = new Archive();
archive.setArchiveCode("SQ" + System.currentTimeMillis());
archive.setTitle(title);
archive.setCategory(category);
archive.setFileUrl(filePath);
archiveMapper.insert(archive);
result.put("code", 200);
result.put("msg", "上传成功");
result.put("data", archive);
} catch (IOException e) {
result.put("code", 500);
result.put("msg", "上传失败: " + e.getMessage());
}
return result;
}
// 获取档案列表接口
@GetMapping("/list")
public List list() {
return archiveMapper.findAll();
}
}

四、前端页面开发

前端使用 Vue 3 组合式 API (Composition API) 和 Element Plus 组件库构建用户界面。

4.1 项目初始化与依赖安装

在终端执行以下命令创建 Vue 项目并安装依赖：

npm create vue@latest suqian-archive-frontend
cd suqian-archive-frontend
npm install element-plus axios

4.2 配置 Axios 与 Element Plus

修改 src/main.js，全局引入 Element Plus 样式和组件，并配置 Axios 基础路径。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080'
const app = createApp(App)
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.mount('app')

4.3 档案管理主页面实现

修改 src/App.vue，编写包含文件上传和表格展示的完整代码。这里实现了文件选择、参数传递以及列表的实时刷新。

五、项目部署与运行

代码开发完成后，我们需要将后端打包并在本地启动，同时启动前端开发服务器进行联调。

5.1 后端启动

在后端项目根目录下，打开终端执行 Maven 打包命令：

mvn clean package -DskipTests

打包成功后，执行以下命令启动 Spring Boot JAR 包：

java -jar target/your-project-name-0.0.1-SNAPSHOT.jar

看到控制台输出 Started SuqianApplication in x.xxx seconds 即表示后端启动成功。

5.2 前端启动

在前端项目根目录下，执行：

npm run dev

终端会输出本地访问地址，通常是 http://localhost:5173。使用浏览器访问该地址，即可看到宿迁档案管理系统的操作界面。

5.3 功能验证

1. 录入测试：在表单中输入标题“宿迁市招商引资会议纪要”，选择分类“文书档案”，点击“选择文件”上传一个 PDF 或图片，点击“提交归档”。
2. 列表验证：提交成功后，下方表格应立即刷新，显示刚才录入的档案信息。
3. 数据库验证：查看 MySQL 数据库 t_archive 表，确认新增了一条记录，且 file_url 字段包含正确的文件路径。