2026年山东大学软件学院创新项目实训博客（七）

2026年山东大学软件学院创新项目实训博客七一工作进展本次工作围绕发现频道前端模块展开主要解决了三个问题发现频道主页与真实后端 API 的接入、卡片点击查看文章详情的弹层交互、以及搜索功能从前端过滤切换为后端搜索。二、详细内容2.1 发现频道主页的数据流改造发现频道主页原有两种数据源mock 数据和真实 API。早期开发阶段使用 mock 数据保证页面可预览上线前需要替换为真实后端。接入真实 API 的过程中面临一个实际问题后端返回的数据字段与 mock 类型定义存在差异。后端content_materials表的字段为tags数组、title、summary、source而前端 mock 类型定义是tag字符串、highlight、readingTime等展示用字段。解决方案是在 API 层做字段映射API 函数负责将后端返回的原始字段转换为前端 mock 类型定义的格式。对于后端没有的字段readingTime、highlight统一给默认值。这个映射不改变数据本身只是适配前端展示层的契约。这个模式在实际工程中很常见当前端展示层和后端接口在不同的迭代周期开发时字段定义往往不完全对齐在 API 接入层做适配比修改类型定义更灵活不影响其他调用方。2.2 卡片点击查看详情的交互设计发现频道的内容分为两层外层展示摘要卡片列表内层展示正文弹层详情。用户点击卡片后弹出 Modal 展示文章的完整正文。这个交互有一个工程上的权衡点详情的正文内容较大是否需要单独请求接口获取如果将正文也包含在列表接口的返回中列表接口的单次数据量会显著增大且用户并非每次都会点击查看详情按需加载更合理。因此设计了独立的详情接口列表接口只返回摘要信息点击卡片后再请求详情接口获取完整正文。详情接口返回全文内容支持Modal弹层展示。这个交互模式在信息流产品中非常常见今日头条、知乎等信息流都是先展示摘要卡片点击进入详情页。核心考虑是节省首屏加载时间和流量用户未点击的内容不浪费网络请求。2.3 搜索功能的架构调整最初的搜索实现是在前端对已加载的内容列表做关键词过滤JavaScript 数组的filter这个实现对 mock 数据有效但对接真实后端后不再适用。真实后端的搜索能力在服务端实现用户输入搜索词后前端将搜索词传给后端搜索接口后端在数据库层面完成向量语义搜索和关键词匹配结果返回前端直接渲染。这次调整有一个前端架构上的含义搜索不再是展示层的本地操作而是一个独立的业务请求。这意味着搜索结果应该和列表结果共用同一套渲染组件只是数据来源不同——搜索触发后端请求列表触发列表请求两者最终渲染到同一个区域。Ant Design 的Input.Search组件配合onSearch回调处理了这个交互用户输入并回车后发起搜索请求结果替换当前的卡片列表。三、总结发现频道前端模块的核心收获是两个交互设计原则按需加载优于预加载文章正文不随列表接口返回按需请求详情接口节省首屏时间和带宽。这个原则在移动端尤其重要也是信息流产品的标准做法。API 适配层隔离变化后端字段与前端类型定义的差异在 API 接入层处理不穿透到页面组件层。页面组件只依赖稳定的 mock 类型定义API 层的转换逻辑可以独立演进不影响展示层代码。