零基础搭建婚姻数字档案馆系统纯干货实操指南
一、环境准备与依赖安装
在开始构建婚姻数字档案馆系统之前，必须确保本地开发环境已配置好JDK、Maven、Node.js以及MySQL数据库。本文采用Spring Boot 3.x作为后端框架，Vue 3作为前端框架，MySQL 8.0作为数据存储。
1. 安装JDK 17
请确保系统环境变量中已配置JAVA_HOME。对于Windows用户，建议下载Oracle JDK 17或OpenJDK 17 MSI包直接安装；对于macOS用户，执行以下命令：
brewbrew install openjdk@17
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk
2. 安装Maven 3.8+
下载Apache Maven 3.8.6二进制包，解压后配置环境变量MAVEN_HOME，并将bin目录添加至Path。验证安装命令：
mvn -v
3. 安装Node.js 18
前往Node.js官网下载LTS版本安装包，或使用nvm安装：
nvm install 18
nvm use 18
4. 安装MySQL 8.0
推荐使用Docker快速启动MySQL环境，避免繁琐的本地配置。执行以下命令：
docker run --name marriage-mysql -e MYSQL_ROOT_PASSWORD=root123 -p 3306:3306 -d mysql:8.0
二、数据库设计与初始化
婚姻数字档案馆系统的核心在于对婚姻档案信息的结构化存储。我们需要建立一个专门的数据库，并创建一张用于存储档案记录的表。请直接连接MySQL，执行以下SQL脚本完成建库建表操作。
1. 创建数据库
CREATE DATABASE IF NOT EXISTS marriage_archive_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE marriage_archive_db;
2. 创建档案信息表
该表包含男方姓名、女方姓名、结婚证号、登记日期、档案存储路径以及状态字段。
CREATE TABLE `marriage_record` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`husband_name` varchar(50) NOT NULL COMMENT '男方姓名',
`wife_name` varchar(50) NOT NULL COMMENT '女方姓名',
`cert_no` varchar(32) NOT NULL COMMENT '结婚证号',
`issue_date` date NOT NULL COMMENT '登记日期',
`file_path` varchar(255) DEFAULT NULL COMMENT '电子档案存储路径',
`status` tinyint DEFAULT '1' COMMENT '状态 1:有效 0:注销',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (`id`),
UNIQUE KEY `uk_cert_no` (`cert_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='婚姻档案记录表';
3. 插入测试数据
INSERT INTO `marriage_record` (`husband_name`, `wife_name`, `cert_no`, `issue_date`, `file_path`)
VALUES ('张三', '李四', 'J123456789', '2023-05-20', '/uploads/2023/05/J123456789.pdf');
三、后端服务搭建
后端采用Spring Boot结合MyBatis-Plus实现快速开发。我们将构建一个RESTful API接口，提供档案的增删改查功能。
1. 初始化Spring Boot项目
使用Spring Initializr生成项目，选择依赖：Spring Web、MyBatis Framework、MySQL Driver、Lombok。解压项目后，修改pom.xml，增加MyBatis-Plus依赖：
com.baomidou
mybatis-plus-boot-starter
3.5.3.1
2. 配置数据源
在src/main/resources/application.yml中配置数据库连接信息，请确保密码与Docker启动时设置的一致。
server:
port: 8080
spring:
datasource:
url: jdbc:mysql://localhost:3306/marriage_archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: root123
driver-class-name: com.mysql.cj.jdbc.Driver
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
3. 编写实体类
创建com.example.marriage.entity.MarriageRecord类：
package com.example.marriage.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.time.LocalDate;
import java.time.LocalDateTime;
@Data
@TableName("marriage_record")
public class MarriageRecord {
@TableId(type = IdType.AUTO)
private Long id;
private String husbandName;
private String wifeName;
private String certNo;
private LocalDate issueDate;
private String filePath;
private Integer status;
private LocalDateTime createTime;
}
4. 编写Mapper接口
创建com.example.marriage.mapper.MarriageRecordMapper接口：
package com.example.marriage.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.marriage.entity.MarriageRecord;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface MarriageRecordMapper extends BaseMapper {
}
5. 编写Service层
创建com.example.marriage.service.MarriageRecordService类：
package com.example.marriage.service;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.marriage.entity.MarriageRecord;
import com.example.marriage.mapper.MarriageRecordMapper;
import org.springframework.stereotype.Service;
@Service
public class MarriageRecordService extends ServiceImpl {
}
6. 编写Controller层
创建com.example.marriage.controller.MarriageRecordController类，实现列表查询和新增接口：
package com.example.marriage.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.marriage.entity.MarriageRecord;
import com.example.marriage.service.MarriageRecordService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
import java.util.List;
@RestController
@RequestMapping("/api/records")
public class MarriageRecordController {
@Autowired
private MarriageRecordService marriageRecordService;
@GetMapping
public List list() {
return marriageRecordService.list();
}
@PostMapping
public boolean save(@RequestBody MarriageRecord record) {
// 简单校验证号是否重复
QueryWrapper wrapper = new QueryWrapper<>();
wrapper.eq("cert_no", record.getCertNo());
if(marriageRecordService.count(wrapper) > 0) {
throw new RuntimeException("结婚证号已存在");
}
return marriageRecordService.save(record);
}
}
四、前端界面开发
前端使用Vue 3配合Element Plus组件库，实现档案的列表展示和新增表单功能。
1. 创建Vue项目
npm create vue@latest marriage-archive-ui
cd marriage-archive-ui
npm install
npm install axios element-plus
2. 配置Element Plus
修改src/main.js，引入Element Plus样式和组件库：
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. 封装API请求
创建src/utils/request.js：
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request
创建src/api/record.js：
import request from '../utils/request'
export const getRecordList = () => {
return request({
url: '/api/records',
method: 'get'
})
}
export const addRecord = (data) => {
return request({
url: '/api/records',
method: 'post',
data
})
}
4. 开发主页面组件
修改src/App.vue，编写完整的业务逻辑和模板：
婚姻数字档案馆系统
新增档案
五、系统启动与验证
至此，前后端代码已全部编写完成。接下来分别启动服务进行验证。
1. 启动后端服务
在Spring Boot项目根目录下，执行Maven命令启动：
mvn spring-boot:run
看到控制台输出Started MarriageApplication字样即表示启动成功。
2. 启动前端服务
在Vue项目根目录下，执行：
npm run dev
终端会输出本地访问地址，通常是http://localhost:5173。
3. 功能验证
打开浏览器访问http://localhost:5173。页面加载后，应能看到数据库中预置的“张三”与“李四”的档案记录。点击右上角“新增档案”按钮，输入男方姓名“王五”，女方姓名“赵六”，证号“J987654321”，选择日期并输入任意路径，点击确认。列表将实时刷新，显示新添加的记录，且后端控制台会打印对应的SQL插入日志，证明全链路数据流通正常。
相关文章
