从零搭建台州档案管理系统全流程实操技术指南

发布时间: 2026年09月12日 07:05:01 来源: 安答联动浏览量: 0

一、技术栈选型与环境初始化

本系统采用Spring Boot 3 + Vue 3 + MySQL 8的经典前后端分离架构。首先确保服务器环境已安装JDK 17、Node.js 18和Docker。以下是具体的初始化命令，请在终端直接执行：

1. 安装JDK 17与Maven

在Ubuntu/CentOS环境下，执行以下命令安装Java环境：

```bash 更新源并安装JDK 17 sudo apt-get update sudo apt-get install -y openjdk-17-jdk 验证安装 java -version 安装Maven (若未安装) sudo apt-get install -y maven mvn -version ```

2. 安装Node.js 18与pnpm

前端构建工具我们选用pnpm以提高安装速度：

```bash 使用NodeSource仓库安装Node.js 18 curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs 全局安装pnpm npm install -g pnpm ```

3. 启动MySQL 8数据库

为了保证环境一致性，我们使用Docker直接拉起MySQL服务：

```bash docker run -d \ --name taizhou-archive-mysql \ -e MYSQL_ROOT_PASSWORD=Taizhou@2024 \ -e MYSQL_DATABASE=taizhou_archive \ -p 3306:3306 \ mysql:8.0 ```

二、数据库表结构设计与初始化

数据库设计是系统的核心。针对台州档案管理需求，我们需要建立档案主表和分类表。请连接到刚才启动的MySQL数据库，执行以下SQL脚本完成建表：

```sql -- 创建档案分类表 CREATE TABLE IF NOT EXISTS `archive_category` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID', `category_name` varchar(100) NOT NULL COMMENT '分类名称', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='档案分类表'; -- 插入初始分类数据 INSERT INTO `archive_category` (`category_name`) VALUES ('文书档案'), ('科技档案'), ('会计档案'); -- 创建档案主表 CREATE TABLE IF NOT EXISTS `archive_info` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID', `archive_no` varchar(50) NOT NULL COMMENT '档案编号', `title` varchar(200) NOT NULL COMMENT '档案标题', `category_id` bigint NOT NULL COMMENT '所属分类ID', `file_path` varchar(500) DEFAULT NULL COMMENT '文件存储路径', `status` tinyint DEFAULT '1' COMMENT '状态 1:归档 0:暂存', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '归档时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_archive_no` (`archive_no`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='档案信息主表'; ```

三、Spring Boot后端核心代码实现

1. 项目构建与依赖配置

创建名为taizhou-archive-backend的Maven项目，并在pom.xml中引入以下关键依赖。请确保版本号与JDK 17兼容：

```xml org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa com.mysql mysql-connector-j runtime org.projectlombok lombok true ```

2. 数据库连接配置

在src/main/resources/application.yml中配置数据库连接信息，账号密码需与Docker启动时一致：

```yaml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/taizhou_archive?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: Taizhou@2024 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update show-sql: true ```

3. 实体类与Repository层

创建ArchiveInfo实体类，对应数据库表结构：

```java package com.taizhou.archive.entity; import jakarta.persistence.; import lombok.Data; import java.time.LocalDateTime; @Data @Entity @Table(name = "archive_info") public class ArchiveInfo { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "archive_no", unique = true, length = 50) private String archiveNo; @Column(name = "title", nullable = false, length = 200) private String title; @Column(name = "category_id") private Long categoryId; @Column(name = "file_path", length = 500) private String filePath; @Column(name = "status") private Integer status; @Column(name = "create_time") private LocalDateTime createTime; } ```

创建对应的Repository接口：

```java package com.taizhou.archive.repository; import com.taizhou.archive.entity.ArchiveInfo; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; @Repository public interface ArchiveRepository extends JpaRepository { } ```

从零搭建台州档案管理系统全流程实操技术指南

4. 业务逻辑与控制层

编写ArchiveController提供档案的增删改查接口。为了演示方便，Service层逻辑直接合并至Controller中：

```java package com.taizhou.archive.controller; import com.taizhou.archive.entity.ArchiveInfo; import com.taizhou.archive.repository.ArchiveRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.time.LocalDateTime; import java.util.List; @RestController @RequestMapping("/api/archives") @CrossOrigin(origins = "") // 允许跨域 public class ArchiveController { @Autowired private ArchiveRepository archiveRepository; // 新增档案 @PostMapping public ArchiveInfo create(@RequestBody ArchiveInfo archiveInfo) { archiveInfo.setCreateTime(LocalDateTime.now()); archiveInfo.setStatus(1); return archiveRepository.save(archiveInfo); } // 查询所有档案 @GetMapping public List list() { return archiveRepository.findAll(); } // 根据ID查询 @GetMapping("/{id}") public ArchiveInfo getById(@PathVariable Long id) { return archiveRepository.findById(id).orElse(null); } // 删除档案 @DeleteMapping("/{id}") public void delete(@PathVariable Long id) { archiveRepository.deleteById(id); } } ```

四、Vue 3前端管理界面开发

1. 项目初始化

在终端执行以下命令创建Vue项目并安装Element Plus组件库：

```bash pnpm create vue taizhou-archive-frontend cd taizhou-archive-frontend pnpm install pnpm add element-plus axios ```

2. 配置API请求

在src/utils/request.js中封装axios实例，统一设置baseURL：

```javascript import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8080/api', timeout: 5000 }) export default request ```

3. 档案列表页面开发

修改src/App.vue，直接在此文件中编写完整的档案管理界面，包含表格展示和新增对话框：

```html ```

在src/main.js中引入Element Plus样式：

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