抚州档案管理系统从零搭建SpringBoot+Vue实战教程

一、开发环境准备

在开始构建抚州档案管理系统之前，需要确保本地开发环境已配置好以下基础软件。请严格按照版本要求安装，以避免兼容性问题。

1. 基础软件安装

JDK 17： 后端开发核心环境。下载地址：https://www.oracle.com/java/technologies/downloads/java17。安装后配置JAVA_HOME环境变量。

MySQL 8.0： 数据存储服务。下载地址：https://dev.mysql.com/downloads/mysql/。安装时请牢记root用户密码，后续配置需要用到。

Node.js 18： 前端运行环境。下载地址：https://nodejs.org/。安装完成后，在终端输入node -v验证版本。

Maven 3.8+： Java项目构建工具。下载地址：https://maven.apache.org/download.cgi。配置settings.xml镜像为阿里云镜像以加速依赖下载。

IntelliJ IDEA： 推荐使用的集成开发环境（IDE），社区版即可，Ultimate版功能更全。

二、数据库设计与初始化

档案管理系统的核心在于对档案数据的结构化存储。我们将在MySQL中创建一个名为fuzhou_archive_db的数据库，并设计一张核心档案表t_archive。

1. 建库建表脚本

打开MySQL客户端（如Navicat或命令行），执行以下SQL脚本。该脚本包含了数据库创建、表结构设计以及初始数据的插入。

```sql -- 创建数据库 CREATE DATABASE IF NOT EXISTS fuzhou_archive_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; USE fuzhou_archive_db; -- 创建档案表 CREATE TABLE IF NOT EXISTS t_archive ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', archive_no VARCHAR(64) NOT NULL COMMENT '档案编号，唯一标识', title VARCHAR(255) NOT NULL COMMENT '档案标题', category VARCHAR(50) NOT NULL COMMENT '档案分类（如：文书、科技、会计）', file_path VARCHAR(500) COMMENT '电子文件存储路径', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', status TINYINT DEFAULT 1 COMMENT '状态：1-正常，0-删除' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='抚州档案管理系统-档案表'; -- 插入测试数据 INSERT INTO t_archive (archive_no, title, category, file_path) VALUES ('FZ2023001', '抚州市2023年度政务公开工作总结', '文书', '/uploads/2023/summary.pdf'), ('FZ2023002', '市中心医院扩建工程图纸', '科技', '/uploads/2023/hospital_blueprint.dwg'); ```

注意事项：建表时使用了utf8mb4字符集，这是为了完美支持抚州本地可能出现的生僻字或特殊符号。请确保执行成功后再进行后续步骤。

三、后端服务搭建（Spring Boot）

后端采用Spring Boot 3.1版本结合MyBatis Plus框架，提供RESTful API接口。使用Spring Initializr快速生成项目骨架。

1. 项目初始化与依赖配置

访问 https://start.spring.io/，选择Maven项目，Java版本17，Dependencies添加：Spring Web、MySQL Driver、MyBatis Framework。生成项目并导入IDEA。

修改pom.xml，引入MyBatis Plus和Lombok依赖以简化开发：

```xml org.springframework.boot spring-boot-starter-web com.mysql mysql-connector-j runtime com.baomidou mybatis-plus-boot-starter 3.5.3.1 org.projectlombok lombok true ```

2. 数据源配置

在src/main/resources/application.yml中配置数据库连接信息。请将password替换为你安装MySQL时设置的密码。

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/fuzhou_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 开发环境打印SQL日志 global-config: db-config: logic-delete-field: status 逻辑删除字段 logic-delete-value: 0 删除后的值 logic-not-delete-value: 1 未删除的值 ```

3. 核心代码编写

为了快速落地，我们采用经典的Entity-Mapper-Controller结构。

(1) 实体类 Entity
创建包com.example.fuzhou.entity，编写Archive.java：

```java package com.example.fuzhou.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.time.LocalDateTime; @Data @TableName("t_archive") 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 LocalDateTime updateTime; private Integer status; } ```

(2) Mapper接口
创建包com.example.fuzhou.mapper，编写ArchiveMapper.java，继承BaseMapper即可获得CRUD功能：

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

3) 控制器 Controller
创建包com.example.fuzhou.controller，编写ArchiveController.java，提供查询和新增接口：

```java package com.example.fuzhou.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.fuzhou.entity.Archive; import com.example.fuzhou.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("/list") public List list() { return archiveMapper.selectList(null); } // 分页查询档案 @GetMapping("/page") public Page page(@RequestParam(defaultValue = "1") int current, @RequestParam(defaultValue = "10") int size) { return archiveMapper.selectPage(new Page<>(current, size), null); } // 新增档案 @PostMapping("/add") public String add(@RequestBody Archive archive) { int result = archiveMapper.insert(archive); return result > 0 ? "添加成功" : "添加失败"; } // 根据ID删除档案 @DeleteMapping("/{id}") public String delete(@PathVariable Long id) { int result = archiveMapper.deleteById(id); return result > 0 ? "删除成功" : "删除失败"; } } ```

注意：在主启动类上添加@MapperScan("com.example.fuzhou.mapper")注解，确保Mapper能被Spring容器扫描到。

四、前端界面开发（Vue 3 + Element Plus）

前端使用Vue 3组合式API（Composition API）和Element Plus组件库，实现档案的列表展示和新增功能。

1. 项目初始化

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

```bash npm create vue@latest fuzhou-archive-web cd fuzhou-archive-web npm install npm install element-plus axios ```

安装完成后，在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. 档案管理页面开发

新建文件src/components/ArchiveManager.vue。该组件包含表格展示、分页条和新增弹窗。

```vue ```

修改App.vue引入该组件：

```vue ```

五、系统运行与验证

至此，抚州档案管理系统的核心代码已编写完成。按照以下步骤启动前后端服务进行验证。

1. 启动后端服务

在IDEA中找到FuzhouArchiveApplication.java（主启动类），右键点击Run。观察控制台日志，看到Started FuzhouArchiveApplication字样即表示启动成功，端口为8080。

2. 启动前端服务

在终端进入前端项目目录fuzhou-archive-web，执行命令：

```bash npm run dev ```

终端会输出访问地址，通常是 http://localhost:5173。使用浏览器访问该地址。

3. 功能验证

• 列表展示： 页面加载后，应能看到数据库中预置的两条测试数据（政务公开总结、医院扩建图纸）。
• 新增功能： 点击“新增档案”按钮，输入编号“FZ2023003”，标题“测试档案”，选择分类“文书”，点击确定。页面应提示“新增成功”并刷新列表。
• 删除功能： 点击列表某行的“删除”按钮，确认后该行数据应消失。

如果以上功能均正常，说明抚州档案管理系统的基础框架已成功搭建。后续可根据实际业务需求，增加文件上传、权限控制（Spring Security）等高级模块。