企业官网建设流程全解析

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 层的转换逻辑可以独立演进，不影响展示层代码。