基于微信小程序的小区疫情防控设计与实现一、开发背景与需求：为什么要做这套系统？ 1. 行业痛点：传统小区防疫的 “3

一、开发背景与需求：为什么要做这套系统？

1. 行业痛点：传统小区防疫的 “3 大难题”

在调研阶段，我发现小区防疫工作普遍面临三个核心问题：

信息同步不及时：业主需要线下查看公告、排队登记出入，疫情数据（如新增确诊、消毒记录）无法实时获取；

数据管理混乱：人工登记的出入信息、健康打卡数据易丢失，管理员难以统计汇总，后续追溯困难；

业主配合成本高：需下载专用 APP 或填写纸质表格，老年业主操作不便，导致防疫工作推进受阻。

2. 系统定位：“管理员 + 业主” 双角色协同

针对这些痛点，系统设计了两个核心角色，明确分工以提升防疫效率：

管理员：负责后台数据管理，包括业主信息维护、疫情分布更新、消毒记录录入、公告发布、举报信息处理等；

业主：通过微信小程序完成日常操作，如健康打卡、出入登记、代购申请、查看疫情动态和消毒记录等。

二、技术选型：零基础也能上手的 “轻量级” 技术栈

考虑到毕业设计的开发周期（约 3 个月）和个人技术储备，我选择了成熟、易上手且文档丰富的技术组合，避免陷入复杂技术的 “坑”。


技术类别	选用技术	核心原因
前端框架	微信小程序	无需下载安装，覆盖 90% 以上手机用户，开发工具（微信开发者工具）免费且可视化
后端开发	Java + SSM 框架	Java 语法熟悉，SSM（Spring+SpringMVC+MyBatis）轻量化，配置简单，适合中小型系统
数据库	MySQL	开源免费，支持多表关联查询，适配小区防疫的结构化数据（如业主表、打卡表）
开发工具	微信开发者工具、IDEA、Navicat	微信开发者工具实时预览小程序效果；IDEA 写后端接口；Navicat 可视化管理数据库

关键技术解析：新手必看的 “避坑点”

SSM 框架 vs SSH 框架：一开始我纠结过用 SSH，但发现 SSH 配置繁琐、占用内存高，而 SSM “约定大于配置”，只需简单配置 XML 文件就能打通前后端，比如 MyBatis 的 SQL 映射文件直接关联数据库表，不用写复杂的 JDBC 代码；

微信小程序的 “数据传递” ：小程序前端与后端通过 JSON 格式交互，比如业主健康打卡时，前端将体温、位置等数据封装成 JSON，调用后端接口（如/health/add），后端解析后存入 MySQL，新手要注意接口地址的 “跨域问题”，需在后端配置 CORS；

MySQL 表设计：避免 “一张表存所有数据”，比如将 “疫情分布”“消毒记录”“健康打卡” 拆分成独立表，用 “业主账号” 作为关联字段，后续查询效率更高。

三、系统设计：从 “需求” 到 “架构” 的落地步骤

系统设计是开发的 “蓝图”，这一步做扎实，后续编码会少走很多弯路。我分了 3 个核心环节：可行性分析、功能结构设计、数据库设计。

1. 可行性分析：先判断 “能不能做”

技术可行性：所用技术（Java、SSM、MySQL）都是课堂学过的，且有大量开源案例（如 GitHub 上的 “小区管理小程序”）可参考，遇到问题能快速找到解决方案；

经济可行性：所有开发工具和技术均免费，无需服务器成本（开发阶段用本地 Tomcat 部署，演示时连自己电脑即可）；

操作可行性：管理员后台用简单的 HTML+CSS 做页面，业主端小程序界面模仿微信原生风格，按钮大、步骤少，老年业主也能轻松操作。

2. 功能结构设计：画个 “思维导图” 理清逻辑

我用 Visio 画了功能结构图，明确每个角色的 “能做什么”，避免开发中 “想到哪写到哪”。

管理员端核心功能（Web 后台）：

业主管理：新增 / 删除 / 修改业主信息（账号、身份证、联系方式）；

疫情管理：录入城市新增确诊、无症状病例数据，上传疫情分布图；

消毒管理：记录消毒场所、方式、用品、时间，生成消毒记录表；

公告管理：发布防疫通知（如核酸检测时间），支持图片和文字编辑；

举报管理：处理业主举报的 “未戴口罩”“聚集” 等信息，反馈处理结果。

业主端核心功能（微信小程序）：

首页：轮播图展示疫情公告，快捷入口（健康打卡、出入登记、代购申请）；

疫情分布：查看全国 / 本地的确诊、治愈数据，支持按城市搜索；

消毒记录：查看小区各区域（如电梯、单元门）的消毒时间和负责人；

我的：个人中心，包含健康打卡历史、出入记录、代购订单状态。

3. 数据库设计：“E-R 图 + 表结构” 缺一不可

数据库是系统的 “粮仓”，设计时要考虑数据的 “完整性” 和 “关联性”。

第一步：画 E-R 图（实体 - 关系图）

用 Visio 画核心实体的 E-R 图，比如 “业主” 实体包含账号、密码、姓名、身份证等属性，“健康打卡” 实体包含打卡编号、体温、是否咳嗽等属性，两个实体通过 “业主账号” 关联（一对多关系：一个业主对应多条打卡记录）。

第二步：设计表结构（附核心表示例）

根据 E-R 图转化为 MySQL 表，这里分享 3 个核心表的结构，其他表可参考这个逻辑：


表名	核心字段	字段类型	说明
业主表（yezhu）	yezhuzhanghao（主键）	varchar(20)	业主账号（唯一标识）
	mima	varchar(32)	密码（MD5 加密存储）
	yezhuxingming	varchar(10)	业主姓名
	shenfenzheng	varchar(18)	身份证号（唯一）
健康打卡表（health）	id（主键）	int	自增 ID
	yezhuzhanghao	varchar(20)	关联业主表
	dangqiantiwen	varchar(5)	当前体温（如 “36.5℃”）
	churufengxianquyu	varchar(2)	是否出入风险区域（“是 / 否”）
	dakashijian	datetime	打卡时间（自动生成）
疫情分布表（yqfb）	id（主键）	int	自增 ID
	chengshi	varchar(10)	城市名称
	xinzengquezhen	int	新增确诊人数
	zhiyurenshu	int	治愈人数
	beizhu	varchar(200)	备注（如 “高风险区域”）

四、系统实现：手把手教你做 “核心功能”

系统实现阶段，我先开发后端接口，再做前端页面，最后联调测试。这里以 “业主健康打卡” 和 “管理员疫情分布管理” 两个核心功能为例，分享具体实现步骤。

1. 后端接口开发（以健康打卡为例）

第一步：创建实体类（Health.java）

对应健康打卡表的字段，生成 getter 和 setter 方法：

public class Health {

private Integer id;

private String yezhuzhanghao;

private String dangqiantiwen;

private String churufengxianquyu;

private Date dakashijian;

// getter和setter方法省略

}

第二步：编写 Mapper 接口（HealthMapper.java）

用 MyBatis 的注解方式写 SQL，无需 XML 文件：

@Mapper

public interface HealthMapper {

// 新增健康打卡记录

@Insert("INSERT INTO health(yezhuzhanghao,dangqiantiwen,churufengxianquyu,dakashijian) VALUES(#{yezhuzhanghao},#{dangqiantiwen},#{churufengxianquyu},NOW())")

int addHealth(Health health);

}

第三步：Service 和 Controller 层

Service 层处理业务逻辑（如判断体温是否异常），Controller 层提供接口：

2. 前端页面实现（以小程序健康打卡页为例）

第一步：编写 WXML 页面（health.wxml）

设计简单的表单，包含体温输入、风险区域选择：


<view class="container">

<form bindsubmit="formSubmit">

<view class="form-item">

<label>当前体温：</label>

<input name="dangqiantiwen" placeholder="请输入体温（如36.5）" type="number" />

</view>

<view class="form-item">

<label>是否出入风险区域：</label>

<radio-group name="churufengxianquyu">

<radio value="是">是</radio>

<radio value="否">否</radio>

</radio-group>

</view>

<button form-type="submit">提交打卡</button>

</form>

</view>

第二步：编写 JS 逻辑（health.js）

调用后端接口，处理提交数据：

Page({

formSubmit(e) {

const { dangqiantiwen, churufengxianquyu } = e.detail.value;

// 获取本地存储的业主账号（登录时存入）

const yezhuzhanghao = wx.getStorageSync('yezhuzhanghao');

// 调用后端接口

wx.request({

url: 'http://localhost:8080/health/add', // 后端接口地址

method: 'POST',

data: { yezhuzhanghao, dangqiantiwen, churufengxianquyu },

success(res) {

if (res.data.code === 200) {

wx.showToast({ title: '打卡成功！' });

} else {

wx.showToast({ title: res.data.msg, icon: 'none' });

}

}

});

}

});

3. 管理员后台页面（以疫情分布管理为例）

用 HTML+Bootstrap 做简单的后台页面，实现疫情数据的新增和查询：


<div class="container">

<h2>疫情分布管理</h2>

<form id="addForm">

<div class="form-group">

<label>城市：</label>

<input type="text" name="chengshi" class="form-control" />

</div>

<div class="form-group">

<label>新增确诊：</label>

<input type="number" name="xinzengquezhen" class="form-control" />

</div>

<button type="submit" class="btn btn-primary">新增数据</button>

</form>

<!-- 疫情数据表格 -->

<table class="table table-striped mt-3">

<tr>

<th>城市</th>

<th>新增确诊</th>

<th>治愈人数</th>

<th>操作</th>

</tr>

<tr>

<td>北京</td>

<td>2</td>

<td>10</td>

<td><button class="btn btn-sm btn-danger">删除</button></td>

</tr>

</table>

</div>

五、系统测试：用 “测试用例” 确保功能正常

很多同学开发完就直接提交，却忽略了测试环节，导致答辩时出现 “功能报错” 的尴尬。我设计了一套简单的测试用例，覆盖核心功能：


测试功能	测试步骤	预期结果	实际结果
业主登录	输入正确账号（yz123）和密码（123456）	登录成功，跳转首页	符合预期
健康打卡	输入体温 36.8℃，选择 “否”（未出入风险区域）	提示 “打卡成功”，数据库新增记录	符合预期
疫情分布查询	输入 “上海” 搜索	显示上海的疫情数据	符合预期
管理员删除业主	选择业主 “张三”，点击 “删除”	业主表中无 “张三” 记录	符合预期