基于SpringBoot的档案信访管理系统全栈开发实操

一、开发环境准备与工具安装

在开始构建档案信访管理系统之前，必须确保本地开发环境已经配置好以下基础工具。请严格按照版本要求安装，避免因版本不兼容导致编译失败。

• JDK 17+: 后端运行基础环境。
• Maven 3.8+: 项目依赖管理工具。
• Node.js 18+: 前端运行环境。
• MySQL 8.0+: 数据存储服务。
• IntelliJ IDEA: 推荐使用的集成开发环境。

如果尚未安装MySQL，可以使用Docker快速启动一个实例，执行以下命令：

```bash docker run --name mysql-petition -e MYSQL_ROOT_PASSWORD=root123 -p 3306:3306 -d mysql:8.0 ```

二、数据库设计与初始化脚本

数据库设计是系统的核心。我们需要创建一个专门的数据库db_petition，并建立一张核心表t_petition_record用于存储信访件的详细信息，包括信访人、标题、内容、状态及归档时间。

请在MySQL客户端或Navicat中执行以下SQL脚本进行初始化：

```sql CREATE DATABASE IF NOT EXISTS db_petition CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE db_petition; CREATE TABLE t_petition_record ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', petitioner_name VARCHAR(50) NOT NULL COMMENT '信访人姓名', phone VARCHAR(20) NOT NULL COMMENT '联系电话', id_card VARCHAR(18) COMMENT '身份证号', title VARCHAR(200) NOT NULL COMMENT '信访标题', content TEXT NOT NULL COMMENT '信访详细内容', type VARCHAR(20) DEFAULT 'GENERAL' COMMENT '类型：GENERAL-普通,URGENT-紧急', status VARCHAR(20) DEFAULT 'PENDING' COMMENT '状态：PENDING-待处理,PROCESSING-处理中,ARCHIVED-已归档', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', is_deleted TINYINT DEFAULT 0 COMMENT '逻辑删除标识' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='信访档案记录表'; ```

三、后端项目搭建与核心配置

使用Spring Initializr创建项目，选择Maven构建工具，语言为Java，打包方式为Jar。添加以下依赖：Spring Web、MyBatis Plus Framework、MySQL Driver、Lombok。

1. 配置pom.xml依赖

为了确保功能完整，请在标签内补充以下依赖版本管理：

```xml com.baomidou mybatis-plus-boot-starter 3.5.3.1 mysql mysql-connector-java 8.0.33 ```

2. 编写application.yml配置

在src/main/resources目录下创建或修改配置文件。这里必须配置数据库连接信息以及MyBatis Plus的日志输出，方便调试SQL语句。

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

3. 实体类与Mapper层开发

创建包结构com.example.petition。首先编写实体类PetitionRecord.java，使用Lombok简化Getter/Setter代码：

```java package com.example.petition.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_petition_record") public class PetitionRecord { @TableId(type = IdType.AUTO) private Long id; private String petitionerName; private String phone; private String idCard; private String title; private String content; private String type; private String status; private LocalDateTime createTime; private LocalDateTime updateTime; private Integer isDeleted; } ```

接着编写Mapper接口，继承MyBatis Plus提供的BaseMapper即可获得基础CRUD功能：

```java package com.example.petition.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.petition.entity.PetitionRecord; import org.apache.ibatis.annotations.Mapper; @Mapper public interface PetitionRecordMapper extends BaseMapper

{ } ```

4. 业务层与控制层实现

创建PetitionService.java接口和其实现类，但在本示例中为了简化，我们直接在Controller层调用Mapper。创建PetitionController.java，实现信访登记和列表查询接口：

```java package com.example.petition.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.petition.entity.PetitionRecord; import com.example.petition.mapper.PetitionRecordMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("/api/petition") @CrossOrigin(origins = "") public class PetitionController { @Autowired private PetitionRecordMapper petitionRecordMapper; @PostMapping("/add") public Map addPetition(@RequestBody PetitionRecord record) { record.setStatus("PENDING"); petitionRecordMapper.insert(record); Map result = new HashMap<>(); result.put("code", 200); result.put("message", "登记成功"); return result; } @GetMapping("/list") public Map listPetition(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(required = false) String keyword) { Page pageInfo = new Page<>(page, size); QueryWrapper wrapper = new QueryWrapper<>(); if (keyword != null && !keyword.isEmpty()) { wrapper.like("title", keyword).or().like("petitioner_name", keyword); } wrapper.orderByDesc("create_time"); petitionRecordMapper.selectPage(pageInfo, wrapper); Map result = new HashMap<>(); result.put("code", 200); result.put("data", pageInfo.getRecords()); result.put("total", pageInfo.getTotal()); return result; } @PutMapping("/archive/{id}") public Map archivePetition(@PathVariable Long id) { PetitionRecord record = new PetitionRecord(); record.setId(id); record.setStatus("ARCHIVED"); petitionRecordMapper.updateById(record); Map result = new HashMap<>(); result.put("code", 200); result.put("message", "归档成功"); return result; } } ```

四、前端页面交互开发

前端采用Vue 3配合Element Plus组件库，实现一个可视化的管理界面。在终端执行以下命令初始化项目：

```bash npm create vue@latest petition-admin cd petition-admin npm install element-plus axios ```

1. 配置main.js引入组件库

修改src/main.js，全局引入Element Plus样式和组件，以及Axios用于HTTP请求：

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

2. 开发主页面App.vue

这是系统的核心交互页面，包含顶部的搜索栏、新增按钮、数据表格和分页组件。将以下代码完整复制到src/App.vue中：

```vue ```

五、系统启动与功能验证

代码编写完成后，按照以下顺序启动服务并进行功能验证。

1. 启动后端服务
在IDEA中找到PetitionApplication.java（包含main方法的类），右键点击运行。或者在项目根目录执行Maven命令：

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

看到控制台输出Started PetitionApplication in x.xxx seconds即表示后端启动成功，端口监听在8080。

2. 启动前端服务
在终端进入前端项目目录petition-admin，执行开发服务器启动命令：

```bash npm run dev ```

终端会输出一个本地访问地址，通常是http://localhost:5173。

3. 功能实操验证
打开浏览器访问前端地址。点击“新增信访登记”按钮，在弹窗中输入测试数据（姓名：张三，电话：13800000000，档案查询请求，内容：需要查询个人档案），点击提交。观察列表是否实时刷新出现新数据，且状态默认为“待处理”。点击列表中的“归档”按钮，状态应变为绿色的“已归档”，且按钮消失。在搜索框输入“张三”，点击搜索，列表应仅显示匹配的记录。至此，系统全流程开发与测试完成。