基于SpringBoot搭建上饶档案管理系统全流程实录

一、开发环境准备与依赖安装

在开始构建上饶档案管理系统之前，必须确保本地开发环境配置准确。本系统采用前后端分离架构，后端基于Spring Boot 2.7，前端使用Vue 3，数据库选用MySQL 8.0。请严格按照以下版本检查环境，避免因版本不兼容导致启动失败。

1. 基础软件版本要求

• JDK：必须安装JDK 17，配置JAVA_HOME环境变量。验证命令：java -version。
• Maven：版本3.6+，配置settings.xml镜像为阿里云源以加速依赖下载。验证命令：mvn -v。
• Node.js：版本16.0+，建议使用LTS版本。验证命令：node -v。
• MySQL：版本8.0+，需提前安装并启动服务。验证命令：mysql -u root -p。

2. 后端项目初始化

打开终端，执行以下命令快速构建Spring Boot项目骨架。为了确保实操落地，我们直接使用curl命令生成项目包，或者直接在IDEA中创建Spring Initializr项目，依赖选择Web、MyBatis Framework、MySQL Driver、Lombok。

手动创建项目目录结构如下：

shangrao-archive
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── shangrao
│   │   │           └── archive
│   │   │               ├── controller
│   │   │               ├── entity
│   │   │               ├── mapper
│   │   │               └── service
│   │   └── resources
│   │       └── application.yml

3. Maven依赖配置 (pom.xml)

这是后端核心依赖文件，直接覆盖原有pom.xml内容，确保包含MyBatis-Plus以简化CRUD操作。

4.0.0

org.springframework.boot
spring-boot-starter-parent
2.7.14
com.shangrao
shangrao-archive
1.0.0

17



org.springframework.boot
spring-boot-starter-web


com.baomidou
mybatis-plus-boot-starter
3.5.3.1


mysql
mysql-connector-java
runtime


org.projectlombok
lombok
true





org.springframework.boot
spring-boot-maven-plugin

二、数据库设计与初始化SQL

上饶档案管理系统的核心在于对档案数据的结构化存储。我们需要设计两张表：t_archive（档案主表）和t_user（用户表）。请在MySQL客户端或Navicat中执行以下SQL脚本，必须先创建数据库。

-- 创建数据库
CREATE DATABASE IF NOT EXISTS shangrao_archive_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE shangrao_archive_db;
-- 档案表
CREATE TABLE t_archive (
id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
archive_no VARCHAR(50) NOT NULL UNIQUE COMMENT '档案编号',
title VARCHAR(200) NOT NULL COMMENT '档案标题',
category VARCHAR(50) COMMENT '档案分类（文书/科技/财务）',
file_path VARCHAR(500) COMMENT '电子档存储路径',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '归档日期',
status TINYINT DEFAULT 1 COMMENT '状态 1:正常 0:销毁'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='上饶档案主表';
-- 用户表
CREATE TABLE t_user (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(100) NOT NULL COMMENT '加密后的密码',
role VARCHAR(20) DEFAULT 'USER' COMMENT '角色 ADMIN/USER'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 插入初始化测试数据
INSERT INTO t_archive (archive_no, title, category, file_path) VALUES
('SR2023001', '上饶市2023年度城市规划档案', '文书', '/uploads/files/sr_plan_2023.pdf'),
('SR2023002', '2023年重点科技项目立项书', '科技', '/uploads/files/tech_project_001.docx');

三、后端核心代码实现

1. 配置文件 (application.yml)

配置数据库连接信息，请将your_password替换为你本地的MySQL root密码。注意时区设置为Asia/Shanghai，防止时间字段相差8小时。

server:
port: 8080
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/shangrao_archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: your_password
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
logic-delete-field: status
logic-delete-value: 0
logic-not-delete-value: 1

2. 实体类 (Archive.java)

使用Lombok注解简化Getter/Setter代码。

package com.shangrao.archive.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.time.LocalDateTime;
@Data
public class Archive {
@TableId(type = IdType.AUTO)
private Long id;
private String archiveNo;
private String title;
private String category;
private String filePath;
private LocalDateTime createTime;
private Integer status;
}

3. 数据访问层 (ArchiveMapper.java)

继承BaseMapper即可获得基础CRUD能力，无需编写XML文件。

package com.shangrao.archive.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.shangrao.archive.entity.Archive;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface ArchiveMapper extends BaseMapper {
}

4. 控制层 (ArchiveController.java)

提供两个接口：查询所有档案列表和新增档案。直接返回JSON数据。

package com.shangrao.archive.controller;
import com.shangrao.archive.entity.Archive;
import com.shangrao.archive.mapper.ArchiveMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
import java.util.List;
@RestController
@RequestMapping("/api/archives")
public class ArchiveController {
@Autowired
private ArchiveMapper archiveMapper;
@GetMapping
public List list() {
return archiveMapper.selectList(null);
}
@PostMapping
public String save(@RequestBody Archive archive) {
int result = archiveMapper.insert(archive);
return result > 0 ? "归档成功" : "归档失败";
}
}

5. 启动类 (ShangraoArchiveApplication.java)

package com.shangrao.archive;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.shangrao.archive.mapper")
public class ShangraoArchiveApplication {
public static void main(String[] args) {
SpringApplication.run(ShangraoArchiveApplication.class, args);
}
}

四、前端页面与接口联调

1. 前端项目初始化

在终端执行以下命令创建Vue 3项目，并安装Element Plus组件库和Axios请求库。

npm create vue@latest shangrao-archive-web
cd shangrao-archive-web
npm install element-plus axios
npm run dev

2. 配置Axios (utils/request.js)

手动创建src/utils/request.js，配置基础URL和拦截器。

import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request

3. 页面组件 (App.vue)

直接修改src/App.vue，实现一个包含表格和新增弹窗的完整页面。这里实现了列表查询和新增功能。

4. 修改入口文件 (main.js)

引入Element Plus样式和组件。

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

五、系统运行与验证

1. 启动后端服务

在IDEA中运行ShangraoArchiveApplication的main方法，或者在项目根目录执行：

mvn clean install
mvn spring-boot:run

看到控制台输出Started ShangraoArchiveApplication即表示后端启动成功，端口监听8080。

2. 启动前端服务

在shangrao-archive-web目录下执行：

npm run dev

终端会输出Local访问地址，通常是http://localhost:5173。使用浏览器访问该地址，如果能看到表格中展示出初始化的SQL数据，且点击“新增档案”能插入数据并刷新列表，则说明上饶档案管理系统搭建成功。