手把手教你搭建屯昌县档案管理系统全栈实战
一、技术选型与环境准备
为了保证屯昌县档案管理系统的稳定性与可维护性，本方案采用主流的前后端分离架构。后端使用 Spring Boot 3.1.5，持久层采用 MyBatis-Plus，数据库选用 MySQL 8.0，文件存储使用 MinIO。前端使用 Vue 3 配合 Element Plus 组件库。
在开始编码前，请确保本地已安装以下环境：
- JDK 17：下载并解压，配置 JAVA_HOME 环境变量。
- Node.js 18+：用于前端构建。
- Maven 3.8+：用于Java项目依赖管理。
- Docker：用于快速拉起 MySQL 和 MinIO 服务。
使用 Docker 快速启动基础服务。在终端执行以下命令：
docker run -d --name tunchang-mysql \
-e MYSQL_ROOT_PASSWORD=root123 \
-e MYSQL_DATABASE=archives_db \
-p 3306:3306 \
mysql:8.0
docker run -d --name tunchang-minio \
-p 9000:9000 -p 9001:9001 \
-e "MINIO_ROOT_USER=admin" \
-e "MINIO_ROOT_PASSWORD=admin123" \
minio/minio server /data --console-address ":9001"
执行完毕后，访问 http://localhost:9001 进入 MinIO 控制台，登录账号为 admin，密码为 admin123。创建一个名为 tunchang-archives 的 Bucket，并将访问权限设置为 Public。
二、数据库设计与数据初始化
数据库设计需涵盖档案分类、基础信息及文件路径。请在 MySQL 客户端连接至 archives_db，并执行以下 SQL 脚本建表：
CREATE TABLE `sys_user` (
`id` bigint NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL COMMENT '用户名',
`password` varchar(100) NOT NULL COMMENT '密码',
`role` varchar(20) DEFAULT 'USER' COMMENT '角色：ADMIN/USER',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表';
-- 初始化管理员账号，密码为 123456 (BCrypt加密后的模拟值，实际开发需加密)
INSERT INTO `sys_user` (`username`, `password`, `role`) VALUES ('admin', '$2a$10$N.zmdr9k7uOCQb376NoUnuTJ8iAt6Z2EHdHhAIVZ8Q7qE3qE3qE3q', 'ADMIN');
CREATE TABLE `archives_info` (
`id` bigint NOT NULL AUTO_INCREMENT,
`title` varchar(200) NOT NULL COMMENT '档案标题',
`category` varchar(50) NOT NULL COMMENT '档案分类：文书/科技/财务',
`file_url` varchar(500) DEFAULT NULL COMMENT '文件存储路径',
`file_name` varchar(200) DEFAULT NULL COMMENT '原始文件名',
`uploader_id` bigint DEFAULT NULL COMMENT '上传人ID',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '归档时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='档案信息表';
三、后端服务搭建与文件存储实现
使用 Spring Initializr 创建项目，依赖选择 Spring Web、MyBatis Plus Framework、MySQL Driver、Lombok。手动添加 MinIO 依赖。
pom.xml 关键依赖补充：
io.minio
minio
8.5.7
com.baomidou
mybatis-plus-boot-starter
3.5.4
配置 application.yml，注意不要省略任何连接参数：
server:
port: 8080
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/archives_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: root123
minio:
endpoint: http://localhost:9000
accessKey: admin
secretKey: admin123
bucketName: tunchang-archives
创建 MinIO 配置类，用于初始化客户端：
import io.minio.MinioClient;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class MinioConfig {
@Value("${minio.endpoint}")
private String endpoint;
@Value("${minio.accessKey}")
private String accessKey;
@Value("${minio.secretKey}")
private String secretKey;
@Bean
public MinioClient minioClient() {
return MinioClient.builder()
.endpoint(endpoint)
.credentials(accessKey, secretKey)
.build();
}
}
编写核心实体类 ArchivesInfo.java：
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.time.LocalDateTime;
@Data
public class ArchivesInfo {
@TableId(type = IdType.AUTO)
private Long id;
private String title;
private String category;
private String fileUrl;
private String fileName;
private Long uploaderId;
private LocalDateTime createTime;
}
编写 ArchivesController.java，实现文件上传与列表查询。这是系统最核心的交互接口，代码如下：
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.;
import org.springframework.web.multipart.MultipartFile;
import io.minio.MinioClient;
import io.minio.PutObjectArgs;
import java.util.List;
import java.util.UUID;
@RestController
@RequestMapping("/api/archives")
@CrossOrigin(origins = "")
public class ArchivesController {
@Autowired
private MinioClient minioClient;
@Value("${minio.bucketName}")
private String bucketName;
// 模拟Mapper，实际开发请注入 Mapper
// 此处为演示纯逻辑，假设数据存入内存或使用JdbcTemplate，建议配合 MyBatis Plus Mapper 使用
// @Autowired private ArchivesMapper archivesMapper;
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file,
@RequestParam("title") String title,
@RequestParam("category") String category) {
try {
String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
minioClient.putObject(
PutObjectArgs.builder()
.bucket(bucketName)
.object(fileName)
.stream(file.getInputStream(), file.getSize(), -1)
.contentType(file.getContentType())
.build()
);
// 此处执行数据库插入操作
// ArchivesInfo info = new ArchivesInfo();
// info.setTitle(title); info.setCategory(category);
// info.setFileUrl(fileName); info.setFileName(file.getOriginalFilename());
// archivesMapper.insert(info);
return "上传成功，文件名：" + fileName;
} catch (Exception e) {
e.printStackTrace();
return "上传失败";
}
}
}
四、前端管理界面开发
前端项目初始化命令如下，请务必使用 Vue 3 和 Vite：
npm create vite@latest tunchang-archives-admin -- --template vue
cd tunchang-archives-admin
npm install element-plus axios @element-plus/icons-vue
npm run dev
在 src/main.js 中引入 Element Plus：
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')
修改 src/App.vue，构建档案上传与列表展示页面。这里包含完整的布局与逻辑：
屯昌县档案管理系统
档案归档
选择文件
确认归档
档案列表
下载
五、系统运行与功能验证
代码编写完成后，按以下步骤启动系统并进行验证：
1. 启动后端：在 IDE 中运行 Spring Boot 主类，或使用 Maven 命令 mvn spring-boot:run。确认控制台输出 Tomcat started on port 8080。
2. 启动前端：在终端执行 npm run dev，通常会在 http://localhost:5173 启动服务。
3. 功能验证：
- 打开浏览器访问前端地址。
- 输入档案标题“屯昌县2023年度水利建设报告”，选择分类“科技档案”，点击“选择文件”上传一个本地 PDF 或图片。
- 点击“确认归档”，观察页面弹出的反馈信息。若后端控制台无报错且 MinIO Bucket 中出现新文件，则存储逻辑验证通过。
- 检查数据库 archives_info 表，确认新增了一条记录，且 file_url 字段与 MinIO 中的对象名一致。
相关文章
