零基础搭建档案不动产管理软件实操全流程

一、环境准备与数据库初始化

本指南将使用Spring Boot 3.2 + Vue 3 + MySQL 8.0构建一套轻量级的档案不动产管理系统。在开始编码前，需先准备好基础运行环境。

1.1 基础服务安装

使用Docker快速启动MySQL和Redis服务，确保数据存储与缓存可用。请在终端执行以下命令：

启动MySQL：

```bash docker run -d \ --name estate-mysql \ -e MYSQL_ROOT_PASSWORD=root123456 \ -e MYSQL_DATABASE=estate_db \ -p 3306:3306 \ mysql:8.0 ```

启动Redis：

```bash docker run -d \ --name estate-redis \ -p 6379:6379 \ redis:latest ```

1.2 数据库表结构设计

登录MySQL数据库并执行以下SQL脚本，创建核心的property_archive表。该表用于存储不动产档案的核心信息，包括产权人、房产证号、地理位置及档案电子化路径。

```sql USE estate_db; CREATE TABLE property_archive ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', owner_name VARCHAR(50) NOT NULL COMMENT '产权人姓名', cert_number VARCHAR(64) NOT NULL UNIQUE COMMENT '房产证号/不动产单元号', property_address VARCHAR(255) NOT NULL COMMENT '房产坐落', build_area DECIMAL(10, 2) COMMENT '建筑面积(平方米)', archive_status TINYINT DEFAULT 0 COMMENT '档案状态: 0-待归档, 1-已归档', file_path VARCHAR(500) COMMENT '电子档案存储路径', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', INDEX idx_cert (cert_number) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='不动产档案表'; ```

二、后端服务开发

后端采用Spring Boot架构，负责处理业务逻辑与数据持久化。请创建Maven项目并按以下步骤配置。

2.1 依赖配置

在pom.xml中引入必要的依赖包，包括Web、MyBatis-Plus、MySQL驱动及Lombok。请确保版本号兼容。

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

2.2 数据源配置

在src/main/resources/application.yml中配置数据库连接信息及MyBatis-Plus的映射规则。

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/estate_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root123456 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0 ```

2.3 核心代码实现

创建实体类、Mapper接口及Controller层。为了简化流程，此处省略Service层，直接在Controller调用Mapper。

实体类 (PropertyArchive.java)：

```java package com.estate.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; @Data @TableName("property_archive") public class PropertyArchive { @TableId(type = IdType.AUTO) private Long id; private String ownerName; private String certNumber; private String propertyAddress; private BigDecimal buildArea; private Integer archiveStatus; private String filePath; private LocalDateTime createTime; private LocalDateTime updateTime; } ```

Mapper接口 (PropertyArchiveMapper.java)：

```java package com.estate.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.estate.entity.PropertyArchive; import org.apache.ibatis.annotations.Mapper; @Mapper public interface PropertyArchiveMapper extends BaseMapper { } ```

控制器 (PropertyArchiveController.java)：

```java package com.estate.controller; import com.estate.entity.PropertyArchive; import com.estate.mapper.PropertyArchiveMapper; 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 PropertyArchiveController { @Autowired private PropertyArchiveMapper mapper; @PostMapping public String save(@RequestBody PropertyArchive archive) { mapper.insert(archive); return "归档成功"; } @GetMapping public List list() { return mapper.selectList(null); } @GetMapping("/{id}") public PropertyArchive getById(@PathVariable Long id) { return mapper.selectById(id); } } ```

三、前端界面开发

前端使用Vue 3配合Element Plus组件库，实现档案的录入与列表展示功能。

3.1 项目构建与依赖安装

在终端执行以下命令创建Vue项目并安装依赖库：

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

3.2 入口文件配置

修改src/main.js，全局引入Element Plus样式与组件库。

```javascript import { createApp } from 'vue' 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.3 业务页面开发

在src/App.vue中编写完整的业务逻辑，包含表单录入弹窗和数据表格展示。注意替换axios的baseURL为实际后端地址。

```vue ```

四、启动与验证

代码编写完成后，按顺序启动后端与前端服务进行验证。

4.1 启动后端服务

在项目根目录下执行Maven命令启动Spring Boot应用：

```bash mvn spring-boot:run ```

看到控制台输出Started EstateApplication in X seconds即表示启动成功。

4.2 启动前端服务

在estate-frontend目录下执行：

```bash npm run dev ```

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

4.3 功能验证

1. 访问界面：打开浏览器访问前端地址，应能看到表格展示页面。
2. 新增数据：点击“新增档案归档”按钮，输入产权人“张三”，房产证号“20230001”，面积“88.5”，状态选择“已归档”，点击确定。
3. 结果确认：表格应立即刷新，显示刚刚录入的“张三”档案信息，且状态标签显示为绿色的“已归档”。
4. 数据校验：查看MySQL数据库，执行SELECT FROM property_archive;，确认数据已正确持久化。