本次实战营将打破 “单机应用” 的局限，完成 Flutter 前端与 Node.js 后端的数据互通，实现支持下拉刷新、上拉触底加载的分页列表，并解决鸿蒙真机联调中的各类网络与权限问题，完整打通本地全栈开发流程。

核心技术栈：Flutter、Node.js、Express、HarmonyOS、pull_to_refresh

一、后端搭建：Node.js 实现分页 RESTful API

开发初期搭建可控的本地后端服务，能大幅提升前后端联调的效率，本次基于 Express 快速实现支持分页逻辑的备忘录数据接口。 1. 服务初始化步骤 首先创建本地服务目录并完成依赖安装，执行以下命令：

2. 核心业务逻辑编写（server.js）

编写服务核心代码，实现测试数据生成、分页参数解析、接口响应等功能，同时生成 50 条测试数据满足分页测试需求：

javascript

二、前端开发：Flutter 实现列表双向刷新功能

基于 Flutter 完成与后端的数据交互，定义数据模型保证类型安全，集成刷新组件实现下拉刷新、上拉加载的双向刷新效果。

1. 定义数据模型（Memo）

根据后端返回的接口数据结构，定义对应的 Memo 实体类，实现从 JSON 数据的解析，保证前端数据处理的类型安全：

2. 状态管理与刷新逻辑实现

选用鸿蒙适配性优异的SmartRefresher组件，编写核心刷新加载函数，处理分页请求、数据更新、刷新状态回调等逻辑：

三、关键环节：鸿蒙真机联调配置

很多开发者在真机联调阶段会遇到Network Error网络异常问题，核心需完成权限申请、BaseURL 配置、防火墙设置三大步骤，缺一不可。

1. 申请鸿蒙网络相关权限

打开鸿蒙工程目录下的ohos/entry/src/main/module.json5文件，在配置中添加网络访问和网络信息获取权限声明：

2. 正确配置接口 BaseURL

根据运行环境的不同，配置对应的后端服务地址，真机环境严禁使用localhost：

• 模拟器环境：可使用10.0.2.2（映射电脑本地）或电脑局域网 IP；
• 真机环境：必须使用电脑的局域网 IP（如192.168.1.100），且手机与电脑需连接同一 Wi-Fi。

3. 放行服务器端口 / 关闭防火墙

若已配置正确 IP 仍无法访问后端，需检查电脑防火墙设置：

• 临时解决方案：关闭电脑系统防火墙；
• 推荐解决方案：在防火墙中放行 3000 端口（后端服务监听端口），保证网络请求正常通行。

四、功能成果展示

本次实现的双向刷新列表完成了三大核心交互效果，整体体验贴合鸿蒙系统的交互规范：

下拉刷新效果	上拉加载效果	数据耗尽效果
头部展示加载动效（水滴 / 圆圈），刷新完成后列表重置为第一页数据	底部展示加载动画，新数据与原有列表无缝拼接，无感知加载	底部展示 “没有更多数据” 提示，同时禁用上拉加载功能，防止无效请求

五、定制化升级：鸿蒙风格列表 UI 实现

HarmonyOS Design 的视觉核心为轻盈简约、层次分明、秩序感强，基于此对 Flutter 列表 Item 进行定制，实现符合鸿蒙风格的卡片式列表，核心设计点：16px 大圆角卡片、微弱悬浮阴影、层级化字体排版。

鸿蒙风格卡片组件（MemoCard）

封装独立的MemoCard组件，作为列表的 Item 样式，兼顾视觉美观与复用性：

六、分页请求数据流转示意图

为清晰梳理刷新、加载逻辑的生命周期，通过示意图展示前端与后端的数据交互流程：

七、性能与体验优化技巧

为让列表交互更贴合专业级应用标准，针对加载体验、空状态、鸿蒙网络配置三个维度做优化，提升用户体验。

A. 骨架屏优化加载体验

首次加载或下拉刷新时，替代单一的加载转圈，使用shimmer插件实现骨架屏效果，让用户感知加载过程，降低等待焦虑。

B. 优雅处理空状态场景

当接口返回无数据（如首次加载无备忘录、搜索无结果）时，展示空状态视图，提升页面友好性：

C. 鸿蒙 HTTP 明文传输配置

若后端使用 HTTP 协议（非 HTTPS），需在鸿蒙工程中配置允许明文传输，否则会被系统拦截：

在module.json5中添加 metadata 配置：

1. 配置network_config.json文件，声明允许明文传输的域名 / IP（本地开发可配置电脑局域网 IP）。

八、实战总结与核心收获

本次 DAY4-6 的全栈实战，核心完成了本地 Node.js 后端搭建、Flutter 分页列表开发、鸿蒙真机联调三大核心内容，不仅实现了列表双向刷新的功能，更掌握了 Flutter for OpenHarmony 开发中的关键知识点：

1. 基于 Express 快速实现 RESTful 分页接口的开发思路；
2. Flutter 与后端数据交互的网络请求、数据解析、状态管理方法；
3. 鸿蒙真机 / 模拟器的网络权限配置、BaseURL 设置、联调避坑技巧；
4. 贴合 HarmonyOS Design 的 Flutter UI 定制方法；
5. 移动端列表的性能优化与用户体验提升技巧。

本次实战打通了 Flutter for OpenHarmony 的本地全栈开发流程，为后续开发更复杂的前后端交互应用奠定了坚实的基础。