手把手教你搭建人口普查档案管理系统全流程实操

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

一、环境准备与数据库构建

在开始编码前，必须先准备好基础运行环境。本系统采用后端Spring Boot + 前端Vue3的分离架构，数据库选用MySQL 8.0。请严格按照以下版本安装，避免兼容性问题。

1.1 基础软件安装与验证

首先确保你的电脑已安装JDK 17、Maven 3.8+、Node.js 18+ 和 MySQL 8.0。打开终端（CMD或Terminal），依次输入以下命令验证环境：

验证Java：java -version
验证Maven：mvn -v
验证Node：node -v
验证MySQL：mysql --version

如果任一命令报错，请先配置环境变量。接下来，登录MySQL创建数据库。执行以下SQL脚本：

```sql CREATE DATABASE IF NOT EXISTS census_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE census_system; CREATE TABLE IF NOT EXISTS resident_archive ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', name VARCHAR(50) NOT NULL COMMENT '姓名', id_card VARCHAR(18) NOT NULL UNIQUE COMMENT '身份证号', gender TINYINT NOT NULL COMMENT '性别：0-女，1-男', birth_date DATE COMMENT '出生日期', address VARCHAR(200) NOT NULL COMMENT '常住地址', phone VARCHAR(11) COMMENT '联系电话', household_type TINYINT DEFAULT 1 COMMENT '户别：1-家庭户，2-集体户', education_level VARCHAR(20) COMMENT '受教育程度', is_local_resident 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='人口普查档案表'; ```

二、后端核心功能开发

后端负责数据的持久化与接口提供。我们将使用Spring Initializr生成的标准项目结构。为了方便操作，请在IDEA中创建一个新的Maven项目，命名为census-backend。

2.1 依赖配置 (pom.xml)

打开pom.xml，覆盖为以下内容。这里引入了Web、JPA、MySQL驱动和Lombok，确保无需手动写Getter/Setter。

```xml 4.0.0 org.springframework.boot spring-boot-starter-parent 3.1.5 com.census census-backend 1.0.0 17 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 org.springframework.boot spring-boot-maven-plugin ```

2.2 数据库连接配置

在src/main/resources目录下创建application.properties文件，输入以下配置。请务必修改username和password为你本地的MySQL账号密码。

```properties server.port=8080 spring.application.name=census-system 数据源配置 spring.datasource.url=jdbc:mysql://localhost:3306/census_system?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true spring.jpa.open-in-view=false ```

2.3 实体类与数据层

创建包结构com.census.entity，并编写实体类ResidentArchive.java。使用JPA注解映射数据库表。

```java package com.census.entity; import jakarta.persistence.; import lombok.Data; import java.time.LocalDate; import java.time.LocalDateTime; @Data @Entity @Table(name = "resident_archive") public class ResidentArchive { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; @Column(unique = true, length = 18) private String idCard; private Integer gender; private LocalDate birthDate; private String address; private String phone; private Integer householdType; private String educationLevel; private Integer isLocalResident; private LocalDateTime createTime; private LocalDateTime updateTime; } ```

接着在com.census.repository包下创建接口ResidentRepository.java，继承JpaRepository以获得基础CRUD功能，并添加一个按姓名模糊查询的方法。

```java package com.census.repository; import com.census.entity.ResidentArchive; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.query.Param; public interface ResidentRepository extends JpaRepository { // 自定义模糊查询 @Query("SELECT r FROM ResidentArchive r WHERE r.name LIKE %:name%") java.util.List findByNameContaining(@Param("name") String name); } ```

2.4 业务层与控制层

在com.census.service下创建ResidentService.java，封装业务逻辑。

```java package com.census.service; import com.census.entity.ResidentArchive; import com.census.repository.ResidentRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class ResidentService { @Autowired private ResidentRepository repository; public List findAll() { return repository.findAll(); } public ResidentArchive save(ResidentArchive resident) { return repository.save(resident); } public List searchByName(String name) { if (name == null || name.isEmpty()) { return repository.findAll(); } return repository.findByNameContaining(name); } public void deleteById(Long id) { repository.deleteById(id); } } ```

最后在com.census.controller下创建ResidentController.java，暴露REST接口供前端调用。注意处理跨域问题。

```java package com.census.controller; import com.census.entity.ResidentArchive; import com.census.service.ResidentService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.List; @RestController @RequestMapping("/api/residents") @CrossOrigin(origins = "") // 允许前端跨域访问 public class ResidentController { @Autowired private ResidentService service; @GetMapping public List list(@RequestParam(required = false) String name) { return service.searchByName(name); } @PostMapping public ResidentArchive create(@RequestBody ResidentArchive resident) { return service.save(resident); } @DeleteMapping("/{id}") public void delete(@PathVariable Long id) { service.deleteById(id); } } ```

创建启动类CensusApplication.java在com.census包下：

```java package com.census; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class CensusApplication { public static void main(String[] args) { SpringApplication.run(CensusApplication.class, args); } } ```

三、前端界面与交互开发

手把手教你搭建人口普查档案管理系统全流程实操

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

3.1 项目初始化

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

npm create vue@latest census-frontend（安装过程中选择TypeScript No，Router No）
cd census-frontend
npm install
npm install element-plus axios

3.2 入口文件配置

修改src/main.js，全局引入Element Plus样式和组件，并配置Axios。

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