六盘水档案系统从零开发到部署实战指南

一、环境准备与依赖安装

在开始构建六盘水档案软件之前，必须先配置好本地开发环境。请严格按照以下版本进行安装，以避免兼容性问题。

1. 安装JDK 17

后端采用Java开发，需要JDK环境。前往Oracle官网或使用AdoptOpenJDK。

下载地址：https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

配置环境变量：

```bash JAVA_HOME=C:\Program Files\Java\jdk-17 PATH=%JAVA_HOME%\bin ```

验证安装：打开CMD输入 java -version，确保输出版本号。

2. 安装Node.js 18

前端框架需要Node环境。

下载地址：https://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi

安装完成后，配置npm镜像源以加速依赖下载：

```bash npm config set registry https://registry.npmmirror.com ```

3. 安装MySQL 8.0

档案数据需要持久化存储。

下载地址：https://dev.mysql.com/downloads/mysql/

安装时设置root密码为 Liupanshui@2024，并选择默认字符集为 utf8mb4。

二、数据库设计与初始化

创建专用数据库并设计档案表结构。打开MySQL Workbench或命令行工具，执行以下SQL脚本。

1. 创建数据库

```sql CREATE DATABASE liupanshui_archive DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE liupanshui_archive; ```

2. 创建档案信息表

该表用于存储档案的基础元数据及文件路径。

```sql CREATE TABLE archive_info ( 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) NOT NULL COMMENT '档案分类（如：文书、科技、会计）', file_path VARCHAR(500) COMMENT '文件物理存储路径', department VARCHAR(100) COMMENT '归属部门', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '归档日期', status TINYINT DEFAULT 1 COMMENT '状态：1-正常，0-销毁' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='六盘水档案管理主表'; ```

三、后端服务搭建

使用Spring Boot 3.x构建后端服务，提供档案的增删改查接口。

1. 初始化项目

访问 https://start.spring.io/ 生成项目骨架，配置如下：

• Project: Maven
• Language: Java
• Spring Boot: 3.1.5
• Group: com.liupanshui
• Artifact: archive-system
• Dependencies: Spring Web, MyBatis Framework, MySQL Driver, Lombok

生成压缩包并解压到IDEA中打开。

2. 配置数据库连接

编辑 src/main/resources/application.properties，替换为以下完整配置：

```properties 服务端口 server.port=8080 数据源配置 spring.datasource.url=jdbc:mysql://localhost:3306/liupanshui_archive?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false spring.datasource.username=root spring.datasource.password=Liupanshui@2024 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver MyBatis配置 mybatis.configuration.map-underscore-to-camel-case=true mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl 文件上传配置 spring.servlet.multipart.max-file-size=100MB spring.servlet.multipart.max-request-size=100MB ```

3. 编写实体类

在 com.liupanshui.archive.entity 包下创建 ArchiveInfo.java：

```java package com.liupanshui.archive.entity.entity; import lombok.Data; import java.time.LocalDateTime; @Data public class ArchiveInfo { private Long id; private String archiveNo; private String title; private String category; private String filePath; private String department; private LocalDateTime createTime; private Integer status; } ```

4. 编写Mapper接口

在 com.liupanshui.archive.mapper 包下创建 ArchiveMapper.java：

```java package com.liupanshui.archive.mapper; import com.liupanshui.archive.entity.ArchiveInfo; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Select; import java.util.List; @Mapper public interface ArchiveMapper { @Insert("INSERT INTO archive_info(archive_no, title, category, file_path, department) " + "VALUES({archiveNo}, {title}, {category}, {filePath}, {department})") int insert(ArchiveInfo archiveInfo); @Select("SELECT FROM archive_info WHERE status = 1 ORDER BY create_time DESC") List selectAll(); } ```

5. 编写Controller接口

在 com.liupanshui.archive.controller 包下创建 ArchiveController.java，实现文件上传和列表查询：

```java package com.liupanshui.archive.controller; import com.liupanshui.archive.entity.ArchiveInfo; import com.liupanshui.archive.mapper.ArchiveMapper; 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 java.io.File; import java.io.IOException; import java.nio.file.Paths; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.UUID; @RestController @RequestMapping("/api/archive") @CrossOrigin(origins = "") public class ArchiveController { @Autowired private ArchiveMapper archiveMapper; @Value("${spring.servlet.multipart.location}") private String uploadPath; // 模拟文件上传根目录，实际生产请配置在application.properties private final String STORAGE_ROOT = "D:/liupanshui_files/"; @PostMapping("/upload") public Map uploadArchive(@RequestParam("file") MultipartFile file, @RequestParam("title") String title, @RequestParam("category") String category, @RequestParam("department") String department) { Map result = new HashMap<>(); if (file.isEmpty()) { result.put("code", 400); result.put("msg", "文件为空"); return result; } try { // 创建存储目录 File destDir = new File(STORAGE_ROOT); if (!destDir.exists()) destDir.mkdirs(); // 生成唯一文件名 String originalFilename = file.getOriginalFilename(); String extension = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + extension; String fullPath = Paths.get(STORAGE_ROOT, newFileName).toString(); // 保存文件 file.transferTo(new File(fullPath)); // 保存数据库记录 ArchiveInfo archive = new ArchiveInfo(); archive.setArchiveNo("LPS-" + System.currentTimeMillis()); archive.setTitle(title); archive.setCategory(category); archive.setDepartment(department); archive.setFilePath(fullPath); archiveMapper.insert(archive); result.put("code", 200); result.put("msg", "归档成功"); result.put("data", archive); } catch (IOException e) { e.printStackTrace(); result.put("code", 500); result.put("msg", "文件存储失败: " + e.getMessage()); } return result; } @GetMapping("/list") public Map list() { Map result = new HashMap<>(); List list = archiveMapper.selectAll(); result.put("code", 200); result.put("data", list); return result; } } ```

四、前端界面开发

使用Vue 3和Element Plus构建管理界面。

1. 创建Vue项目

在命令行执行：

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

2. 配置Main入口

修改 src/main.js 引入Element Plus：

```javascript import { createApp } from 'vue' import './style.css' 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') ```

3. 编写主页面组件

修改 src/App.vue，实现档案上传和列表展示功能：

```html ```

五、项目运行与部署

完成代码编写后，进行本地运行测试。

1. 启动后端服务

在IDEA中找到 ArchiveSystemApplication.java（包含main方法的类），右键点击 Run 'ArchiveSystemApplication'。

观察控制台日志，确认Tomcat started on port(s): 8080。

2. 启动前端服务

在命令行进入前端项目目录：

```bash npm run dev ```

控制台会输出Local访问地址，通常是 http://localhost:5173/。

3. 功能验证

1. 打开浏览器访问 http://localhost:5173/。
2. 输入“六盘水市2023年度水利建设规划”。
3. 选择分类：“科技档案”。
4. 输入部门：“水利局”。
5. 点击“选择文件”上传任意PDF或图片文件。
6. 点击“确认归档”，若上方提示“归档成功”且下方列表刷新出数据，则系统部署成功。

此时，文件已保存在 D:/liupanshui_files/ 目录下，元数据已存入MySQL数据库。通过查看数据库表 archive_info 可验证数据一致性。