手把手教你搭建定西档案管理系统实操全流程

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

在开始构建定西档案管理系统之前，必须确保本地开发环境已经配置好基础工具。本系统采用后端Spring Boot + 前端Vue3 + MySQL数据库的经典架构，稳定且易于维护。

1. 基础软件安装

JDK 1.8+ 安装： 推荐使用JDK 1.8或JDK 11。下载地址为Oracle官网或OpenJDK。安装完成后，在终端输入 java -version 确认版本输出正常。

Node.js 16+ 安装： 前端构建需要Node环境。访问Node.js官网下载LTS版本并安装。安装后输入 node -v 及 npm -v 确认环境可用。

MySQL 5.7+ 安装： 数据库选用MySQL。下载社区版安装包，安装时设置root密码为 123456（本教程以此为例，实际生产请修改）。确保服务启动，端口为默认3306。

IDE工具： 后端推荐IntelliJ IDEA（社区版即可），前端推荐VS Code。

2. 开发框架脚手架

为了快速构建，我们将使用Maven管理后端依赖，Vite构建前端项目。请确保Maven已配置好阿里云镜像源，否则依赖下载会非常慢。

二、数据库设计与初始化

定西档案管理系统的核心在于对档案数据的结构化存储。我们需要设计一张核心表来存储档案信息，包括档案编号、标题、所属区县（定西市下辖安定区、通渭县等）、密级及存储路径。

1. 建库建表SQL脚本

打开MySQL客户端（如Navicat或命令行），执行以下SQL语句。这将创建数据库并初始化数据表。

```sql -- 创建定西档案管理系统数据库 CREATE DATABASE IF NOT EXISTS dingxi_archives_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE dingxi_archives_db; -- 创建档案核心表 CREATE TABLE IF NOT EXISTS sys_archives ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', archive_code VARCHAR(50) NOT NULL UNIQUE COMMENT '档案编号', archive_title VARCHAR(200) NOT NULL COMMENT '档案标题', district VARCHAR(50) COMMENT '所属区县：安定区、通渭县、陇西县、渭源县、临洮县、漳县、岷县', category VARCHAR(50) COMMENT '档案分类：文书、科技、会计等', secret_level VARCHAR(20) DEFAULT '普通' COMMENT '密级：普通、秘密、机密', file_path VARCHAR(500) COMMENT '电子文件存储路径', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='定西档案信息表'; -- 插入几条测试数据 INSERT INTO sys_archives (archive_code, archive_title, district, category, secret_level) VALUES ('DX-2023-001', '定西市2023年度水利工程建设规划', '安定区', '文书', '普通'), ('DX-2023-002', '通渭县乡村振兴项目验收报告', '通渭县', '科技', '秘密'); ```

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

后端负责提供RESTful API接口，处理前端的业务请求。我们将创建一个名为 dingxi-archive-backend 的Spring Boot项目。

1. 项目依赖配置

在IntelliJ IDEA中新建Maven项目，在 pom.xml 中引入以下核心依赖。请确保版本号兼容，Spring Boot版本选用2.7.x。

```xml org.springframework.boot spring-boot-starter-web 2.7.14 mysql mysql-connector-java 8.0.33 com.baomidou mybatis-plus-boot-starter 3.5.3.1 org.projectlombok lombok 1.18.28 provided ```

2. 数据库连接配置

在 src/main/resources 目录下创建 application.yml 文件，填入以下配置。注意修改数据库用户名和密码。

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/dingxi_archives_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 123456 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl 开发时打印SQL global-config: db-config: logic-delete-field: deleted 逻辑删除字段 ```

3. 核心代码实现

创建实体类、Mapper接口和Service层代码。为了方便演示，我们将Controller层直接调用Mapper，实际项目中建议规范分层。

实体类： 在 com.dingxi.archive.entity 包下创建 SysArchive.java。

```java package com.dingxi.archive.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.Data; import java.time.LocalDateTime; @Data public class SysArchive { @TableId(type = IdType.AUTO) private Long id; private String archiveCode; private String archiveTitle; private String district; private String category; private String secretLevel; private String filePath; private LocalDateTime createTime; private LocalDateTime updateTime; } ```

Mapper接口： 在 com.dingxi.archive.mapper 包下创建 SysArchiveMapper.java。

```java package com.dingxi.archive.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.dingxi.archive.entity.SysArchive; import org.apache.ibatis.annotations.Mapper; @Mapper public interface SysArchiveMapper extends BaseMapper { // BaseMapper已提供增删改查基础方法，无需手写SQL } ```

控制器： 在 com.dingxi.archive.controller 包下创建 ArchiveController.java，实现列表查询和新增功能。

```java package com.dingxi.archive.controller; import com.dingxi.archive.entity.SysArchive; import com.dingxi.archive.mapper.SysArchiveMapper; 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/archives") @CrossOrigin(origins = "") // 允许前端跨域访问 public class ArchiveController { @Autowired private SysArchiveMapper archiveMapper; // 获取档案列表 @GetMapping("/list") public Map list() { List list = archiveMapper.selectList(null); Map result = new HashMap<>(); result.put("code", 200); result.put("data", list); return result; } // 新增档案 @PostMapping("/add") public Map add(@RequestBody SysArchive archive) { int rows = archiveMapper.insert(archive); Map result = new HashMap<>(); if (rows > 0) { result.put("code", 200); result.put("msg", "添加成功"); } else { result.put("code", 500); result.put("msg", "添加失败"); } return result; } } ```

启动类： 确保有 @MapperScan 注解扫描Mapper包。

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

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

前端使用Vue3配合Element Plus组件库，实现数据的表格展示和表单录入。

1. 项目初始化

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

```bash npm create vite@latest dingxi-archive-frontend -- --template vue cd dingxi-archive-frontend npm install npm install axios element-plus ```

2. 页面逻辑实现

修改 src/main.js 引入Element Plus。修改 src/App.vue 编写核心业务逻辑。

main.js 配置：

```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') ```

App.vue 核心代码：

```html ``>

注意： 在 App.vue 的代码块中，请务必检查 el-form-item 标签，确保没有使用 x-form-item 这种错误标签（代码块中已修正为正确写法）。所有变量名需与后端实体类字段保持一致（驼峰转下划线由MyBatis Plus自动处理）。

五、系统启动与功能验证

代码编写完成后，按照以下步骤启动服务并进行验证。

1. 启动后端服务

在IntelliJ IDEA中找到 ArchiveApplication.java，右键点击 Run 'ArchiveApplication'。观察控制台日志，看到 Started ArchiveApplication in x.xxx seconds 即表示启动成功，Tomcat端口为8080。

2. 启动前端服务

在终端进入前端项目目录 dingxi-archive-frontend，执行：

```bash npm run dev ```

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

3. 功能测试

查看列表： 打开浏览器访问前端地址，页面应自动加载并在表格中显示我们在数据库初始化时插入的两条测试数据（安定区水利规划、通渭县验收报告）。

新增档案： 点击页面左上角的“新增档案”按钮。在弹窗中选择区县为“陇西县”，输入档案编号“DX-2023-003”，标题填写“测试档案”，点击“确认”。页面提示“添加成功”并自动刷新表格，新数据将出现在列表中。

数据验证： 登录MySQL数据库，执行 SELECT FROM sys_archives;，确认新记录已正确写入物理表。

至此，一套基于Spring Boot和Vue3的定西档案管理系统原型已搭建完成。后续可根据实际需求增加文件上传、权限控制（Shiro/Spring Security）及Excel导出等功能。