一、环境准备与工具安装
在开始构建机关单位档案管理系统之前，必须先配置好基础开发环境。请严格按照以下版本进行安装，以避免兼容性问题。
- JDK 17：后端运行基础，下载并安装后配置JAVA_HOME环境变量。
- Node.js 18+：前端运行环境，建议使用LTS版本。
- Maven 3.8+：Java项目依赖管理工具。
- MySQL 8.0：数据存储服务。
- IntelliJ IDEA：推荐的全栈开发IDE。
安装完成后，在终端分别输入java -version、node -v、mvn -v确认环境生效。
二、数据库设计与初始化
打开MySQL客户端或命令行工具，执行以下SQL脚本创建数据库及核心档案表。该表包含了机关档案管理最基础的字段：档案编号、标题、密级、归档日期及存储路径。
在MySQL中执行以下命令：
```sql
CREATE DATABASE IF NOT EXISTS archive_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE 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) 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='档案信息表';
```
三、后端服务搭建（Spring Boot）
1. 项目构建与依赖配置
使用Spring Initializr（https://start.spring.io/）生成项目，选择Maven项目，Java版本17，引入以下Dependencies：
- Spring Web
- Spring Data JPA
- MySQL Driver
- Lombok
生成项目并解压，用IDEA打开。修改pom.xml确保依赖完整（主要版本号示例）：
```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中配置数据库连接信息及JPA格式化输出：
```yaml
server:
port: 8080
spring:
datasource:
url: jdbc:mysql://localhost:3306/archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
username: root
password: 123456 请替换为本地MySQL密码
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
hibernate:
ddl-auto: update 自动更新表结构
show-sql: true
open-in-view: false
```
3. 实体类与数据层开发
创建包结构com.example.archive.entity，编写实体类Archive.java：
```java
package com.example.archive.entity;
import jakarta.persistence.;
import lombok.Data;
import java.time.LocalDateTime;
@Data
@Entity
@Table(name = "t_archive")
public class Archive {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, unique = true, length = 50)
private String archiveNo;
@Column(nullable = false, length = 200)
private String title;
private String category;
@Column(length = 20)
private String secretLevel;
@Column(length = 500)
private String filePath;
@Column(name = "create_time", updatable = false)
private LocalDateTime createTime;
@Column(name = "update_time")
private LocalDateTime updateTime;
}
```
创建包com.example.archive.repository，编写Repository接口：
```java
package com.example.archive.repository;
import com.example.archive.entity.Archive;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface ArchiveRepository extends JpaRepository
{
}
```
4. 业务控制层开发
创建包com.example.archive.controller，编写ArchiveController.java，实现增删改查接口：
```java
package com.example.archive.controller;
import com.example.archive.entity.Archive;
import com.example.archive.repository.ArchiveRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
import java.util.List;
@RestController
@RequestMapping("/api/archives")
@CrossOrigin(origins = "") // 允许跨域，方便前端调试
public class ArchiveController {
@Autowired
private ArchiveRepository archiveRepository;
// 查询所有档案
@GetMapping
public List getAllArchives() {
return archiveRepository.findAll();
}
// 新增档案
@PostMapping
public Archive createArchive(@RequestBody Archive archive) {
return archiveRepository.save(archive);
}
// 删除档案
@DeleteMapping("/{id}")
public void deleteArchive(@PathVariable Long id) {
archiveRepository.deleteById(id);
}
}
```
启动主类ArchiveApplication.java，确认控制台无报错，Tomcat运行在8080端口。
四、前端界面开发（Vue 3 + Element Plus）
1. 项目初始化
在终端执行以下命令创建Vue项目：
```bash
npm create vue@latest archive-frontend
按提示选择：Yes (TypeScript), No (JSX), Yes (Router), No (Pinia)
cd archive-frontend
npm install
npm install axios element-plus
```
2. 配置Element Plus与Axios
打开src/main.js，全局引入Element Plus样式和组件：
```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'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('app')
```
3. 封装API请求
创建src/api/archive.js，封装后端接口调用：
```javascript
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 5000
})
export const getArchiveList = () => {
return request.get('/archives')
}
export const addArchive = (data) => {
return request.post('/archives', data)
}
export const deleteArchive = (id) => {
return request.delete(`/archives/${id}`)
}
```
4. 页面组件开发
修改src/App.vue，编写档案管理的主界面，包含表格展示和新增表单弹窗：
```html
机关单位档案管理系统
新增档案
{{ scope.row.secretLevel }}
删除
取消
确定
```
五、系统运行与验证
完成上述代码编写后，按以下步骤启动系统进行验证。
- 启动后端：在IDEA中运行
ArchiveApplication，观察控制台输出，确认Tomcat启动在8080端口，且成功连接MySQL数据库。
- 启动前端：在
archive-frontend目录下打开终端，运行npm run dev。
- 访问系统：终端会输出本地访问地址，通常是
http://localhost:5173。使用浏览器打开该地址。
此时，你应该能看到一个简洁的档案管理列表。点击“新增档案”，输入编号（如GW-2023-001）、标题、选择密级并提交。数据将立即保存至MySQL数据库并刷新显示在表格中。至此，一个基于Spring Boot与Vue 3的机关单位档案管理系统基础原型已成功落地。
微信咨询
电话联系
QQ客服
微信咨询一对一服务