龙岩档案管理系统开发与部署全流程实操指南

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

在开始构建龙岩档案管理系统之前，必须先配置好标准化的基础开发环境。本系统采用后端Spring Boot + 前端Vue3的经典分离架构，数据库选用MySQL 8.0。

1.1 后端环境配置

JDK 17 安装：前往Oracle官网或使用Adoptium下载JDK 17版本。Windows用户建议下载MSI安装包，双击安装并配置环境变量JAVA_HOME。验证命令如下：

```bash java -version ```

Maven 配置：下载Apache Maven 3.8.6，解压后配置settings.xml，将阿里云镜像加入以加速依赖下载。

```xml aliyunmaven central 阿里云公共仓库 https://maven.aliyun.com/repository/public ```

1.2 前端与数据库环境

Node.js 安装：访问Node.js官网下载LTS版本（推荐v16或v18）。安装完成后，配置npm淘宝镜像源：

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

MySQL 8.0 安装：下载MySQL Community Server 8.0，安装时设置root密码为Longyan@2024（本文后续配置均使用此密码，请保持一致或自行修改配置）。开启MySQL服务：

```bash net start mysql80 ```

二、数据库设计与初始化

创建专用的数据库longyan_archive_db，并设计核心档案表t_archive。该表包含档案编号、标题、分类、存储路径及创建时间等关键字段。

2.1 建库建表SQL脚本

直接在MySQL命令行或Navicat中执行以下SQL语句：

```sql CREATE DATABASE IF NOT EXISTS longyan_archive_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE longyan_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) NOT NULL COMMENT '档案分类', file_path VARCHAR(500) COMMENT '物理存储路径', status TINYINT DEFAULT 1 COMMENT '状态 1:正常 0:归档', 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 t_archive (archive_no, title, category, file_path) VALUES ('LY2023001', '龙岩市2023年度土地规划档案', '国土规划', '/uploads/2023/ly_land_plan.pdf'); ```

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

使用Spring Initializr快速构建项目骨架，集成MyBatis Plus以简化CRUD操作。

3.1 项目依赖配置

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

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

3.2 数据源与跨域配置

在src/main/resources/application.yml中配置数据库连接信息，并编写Web配置类解决前端跨域问题。

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/longyan_archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: Longyan@2024 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 ```

创建config/WebConfig.java：

```java package com.longyan.archive.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/") .allowedOriginPatterns("") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("") .allowCredentials(true); } } ```

3.3 核心业务代码实现

创建实体类entity/Archive.java：

```java package com.longyan.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 Integer status; private LocalDateTime createTime; private LocalDateTime updateTime; } ```

创建Mapper接口mapper/ArchiveMapper.java：

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

创建Service层service/ArchiveService.java：

```java package com.longyan.archive.service; import com.baomidou.mybatisplus.extension.service.IService; import com.longyan.archive.entity.Archive; public interface ArchiveService extends IService { } ```

创建ServiceImpl实现类service/impl/ArchiveServiceImpl.java：

```java package com.longyan.archive.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.longyan.archive.entity.Archive; import com.longyan.archive.mapper.ArchiveMapper; import com.longyan.archive.service.ArchiveService; import org.springframework.stereotype.Service; @Service public class ArchiveServiceImpl extends ServiceImpl implements ArchiveService { } ```

创建Controller层controller/ArchiveController.java，提供增删改查接口：

```java package com.longyan.archive.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.longyan.archive.entity.Archive; import com.longyan.archive.service.ArchiveService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.List; @RestController @RequestMapping("/api/archive") public class ArchiveController { @Autowired private ArchiveService archiveService; @GetMapping("/list") public List list() { return archiveService.list(); } @PostMapping("/save") public boolean save(@RequestBody Archive archive) { return archiveService.saveOrUpdate(archive); } @DeleteMapping("/delete/{id}") public boolean delete(@PathVariable Long id) { return archiveService.removeById(id); } @GetMapping("/page") public Page page(@RequestParam int current, @RequestParam int size) { return archiveService.page(new Page<>(current, size)); } } ```

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

前端使用Vue 3 Composition API，配合Element Plus组件库快速构建管理界面。

4.1 项目构建与依赖安装

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

```bash npm create vue@latest longyan-archive-web 依次选择：Yes (TypeScript), No (JSX), Yes (Router), No (Pinia) cd longyan-archive-web npm install npm install element-plus axios ```

4.2 全局配置与入口文件

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

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

4.3 档案列表页面开发

修改src/App.vue，编写完整的列表展示、新增和删除逻辑。这里将所有逻辑集中在一个文件中以便快速部署。

```html ```

五、系统启动与功能验证

代码编写完毕后，按照以下顺序启动后端和前端服务，并进行实际操作验证。

5.1 启动后端服务

在IDEA中打开项目，找到包含@SpringBootApplication的主类，运行main方法。或者在项目根目录下执行Maven命令打包运行：

```bash mvn clean package -DskipTests java -jar target/your-project-name-0.0.1-SNAPSHOT.jar ```

控制台出现Started ArchiveApplication in X seconds即表示启动成功，端口监听8080。

5.2 启动前端服务

进入前端项目目录，启动开发服务器：

```bash npm run dev ```

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

5.3 功能实操验证

1. 访问系统：打开浏览器访问http://localhost:5173，应能看到“龙岩档案管理系统”标题及表格。
2. 查询数据：表格中应自动加载出数据库初始化时插入的测试数据（LY2023001）。
3. 新增档案：点击“新增档案”按钮，输入编号LY2023002，标题测试档案，分类文书，点击确认。表格应立即刷新显示新数据。
4. 删除档案：点击新增数据的“删除”按钮，确认后该行应从表格中移除。