2026秋软件工程第二次结对作业：校园寻物招领程序实现

校园寻物招领 Web 程序实现——结对编程作业

项目	内容
课程	H202601 软件工程与软件工程实践
作业	2026 秋软件工程第二次结对作业：程序实现
结对成员	102402133 谭段昊、102402135 王伟浩
GitHub 项目	校园寻物招领项目
在线演示	打开 Web 程序

一、项目背景与目标

第一次作业完成了校园寻物招领的需求分析和原型设计。本次作业在原型基础上选择响应式 Web 形式，实现“发布信息—浏览或搜索—查看详情—联系发布者—更新状态”的核心闭环。项目面向丢失物品和拾到物品的校园同学，帮助集中发布和查找信息，减少群聊消息被覆盖后难以追溯的问题。

本次优先实现常用流程，没有加入后台管理、实名认证、即时聊天和地图定位等复杂功能。程序采用 HTML、CSS 和 JavaScript，演示数据保存在浏览器 localStorage 中，便于下载后运行和检查。

二、结对分工与 GitHub 协作

谭段昊负责需求回顾、页面结构设计、首页/搜索/详情模块、业务规则函数、单元测试和文档整理；王伟浩负责发布页和“我的发布”模块、状态更新交互、流程图、浏览器手工验收和代码复查。双方共同讨论功能边界、检查用户流程，并依据评分细则进行验收。

谭段昊在主仓库完成核心程序实现；王伟浩使用自己的 GitHub 账号Fork 项目，在 wangweihao-102402135 分支补充测试复查和配套文档，并提交 Pull Request。PR 当前为 Open（待审查），尚未合并。老师可查看王伟浩的 Fork和Pull Request #1，核对提交记录和代码差异。

三、主要功能与使用流程

1. 首页浏览最新寻物、招领信息，并显示总数、待处理数和已归还数。
2. 按物品名称、类别、地点或描述搜索，并按寻物/招领类型筛选。
3. 打开详情查看类型、地点、时间、状态和描述，并查看联系发布者提示。
4. 发布寻物或招领信息，提交前校验名称、地点、时间和描述。
5. 在“我的发布”中修改、删除信息，或更新为“已找到”“已归还”；首页统计同步更新。

基本流程：进入首页 → 浏览或搜索 → 查看详情 → 联系发布者 → 更新状态；或进入发布页 → 填写信息 → 表单校验 → 发布成功 → 我的发布。

四、设计与实现说明

业务规则集中在 src/domain.js，页面负责收集输入、调用函数和重新渲染。搜索筛选复用 filterItems，创建、修改和状态更新分别由 createItem、updateItem、updateStatus 处理。这样可以让业务逻辑脱离 DOM 单独测试，多个页面也能复用同一套规则。

核心筛选逻辑如下：

function filterItems(items, keyword, type, status) {
  return items.filter(item =>
    matches(item, keyword) &&
    (!type || type === '全部' || item.type === type) &&
    (!status || status === '全部' || item.status === status)
  );
}

新建信息时统一生成编号、默认状态和创建时间；数据变更后写入 localStorage。联系发布者目前以界面提示模拟，真实联系方式、账号权限和服务端存储属于后续扩展。

五、流程图、目录与运行方法

主要流程：

首页 → 浏览/搜索 → 查看详情 → 联系发布者 → 更新状态
  └→ 发布页 → 填写物品信息 → 表单校验 → 发布成功 → 我的发布 → 修改/删除/更新状态

目录结构：

campus-lost-found/
├─ index.html                 程序入口
├─ mini-program.html          兼容旧链接的入口页
├─ package.json               测试脚本
├─ src/app.js                 页面事件、渲染和本地数据保存
├─ src/data.js                演示数据
├─ src/domain.js              业务规则纯函数
├─ src/styles.css             响应式样式
├─ tests/domain.test.js       单元测试
├─ docs/flowchart.mmd         流程图源文件
├─ docs/data-model.md         数据结构说明
├─ docs/test-report.md        测试报告
└─ assets/                    页面截图

使用 Chrome 或 Edge 打开 index.html 即可运行；也可在项目目录启动静态服务器。安装 Node.js 18 或更高版本后，在项目根目录运行 npm test 执行测试。完整说明见项目 README。

六、界面展示

首页提供最新信息和快捷入口，可快速选择寻物或招领。

搜索页支持按名称、地点和类型筛选，结果可进入详情。

发布页按名称、类别、地点、时间和描述组织信息，降低遗漏关键线索的概率。

“我的发布”用于管理本人发布的信息，并支持修改、删除和状态更新。

详情页集中展示物品线索和联系入口，方便核对特征。

七、单元测试与验收

使用 Node.js 内置 assert 编写 tests/domain.test.js，共 14 个用例，覆盖关键词规范化、名称/地点/描述搜索、类型和状态筛选、无结果、必填校验、新建、修改、状态更新、非法状态拒绝且原数据不变、时间格式化和首页统计。王伟浩的协作分支补充了非法状态回归测试，并同步更新 README 和测试报告。

运行 npm test，结果为 14/14 tests passed。此外手工检查了首页浏览、搜索、详情、联系提示、发布校验、发布成功、我的发布、修改、删除、状态更新及刷新后的数据保留。

八、PSP 表格

PSP 阶段	工作内容	预计耗时（分钟）	实际耗时（分钟）
Planning	阅读题目、拆分任务、确定方案	35	40
Analysis	回顾需求与原型，确定实现边界	65	70
Design Spec	设计目录、数据结构和流程	60	65
Coding Standard	确定命名、模块和提交规范	25	25
Design	页面结构、状态模型和交互设计	75	85
Coding	HTML/CSS/JavaScript 功能实现	210	235
Code Review	结对复查并修正状态事件问题	70	80
Test	14 个单元测试及手工验收	100	110
Reporting	README、流程图、博客和截图整理	90	95
Postmortem	总结问题并制定改进计划	30	35
合计		760	840

注：实际耗时按本次开发过程回溯记录，包含两位同学投入的工作时间。

九、遇到的问题与解决方法

一是页面逻辑逐渐变长，搜索、发布和状态更新若都直接操作 DOM，容易产生不一致。我们将 filterItems、validateItem、createItem、updateItem 和 updateStatus 抽成纯函数，让多个页面复用。

二是状态下拉框的点击与选项变化是不同事件，早期只监听点击可能造成界面显示改变但数据没有保存。复查后改为在 change 事件中更新，并通过刷新验证。

三是直接打开本地 HTML 时，浏览器对本地脚本和资源的处理可能与线上环境不同。README 同时提供直接打开和静态服务器两种运行方式，便于复现。

十、个人总结与队友评价

谭段昊个人总结

这次作业让我体会到原型与程序实现之间的差距。除了页面结构，还要处理数据创建、搜索、修改、删除和持久化，以及空输入、无结果和状态切换等情况。将业务规则抽离并编写单元测试后，代码更容易检查和定位问题。结对复查也让我注意到，下拉框的事件细节会影响状态能否真正保存，能运行不等于流程可靠。后续若继续开发，我会考虑接入后端与账号体系，并增加图片上传、权限控制和自动化浏览器测试。

对王伟浩的评价

王伟浩在发布页和“我的发布”相关工作中关注用户操作路径，检查了表单提示、状态更新及刷新后的数据保留；代码复查中也关注文档与实际流程是否对应。后续可在开发初期更早统一字段命名并同步测试用例，以减少联调时间。