每年到了毕业设计选题季总能看到不少人在群里问“小红书这个选题还能做吗”、“鸿蒙开发的题目是不是已经被人做烂了”。坦白说热门选题确实容易撞车但真正决定一个毕设项目价值的从来不是题目本身而是技术选型的合理性、项目完整度以及你对核心难点的掌握程度。今天要聊的这个项目就是基于鸿蒙系统的小红书APP采用 ArkTS 进行原生开发除了用户端笔记社区还包含电商商城模块和 Web 后台管理系统属于一套完整度比较高的全栈类毕设项目。如果你正在纠结选题或者已经选好方向但不知道从哪里下手这篇文章会帮你看清这个项目的整体结构、技术点拆分、核心代码实现思路以及最常见的开发和调试问题。无论你是零基础想跟着动手还是已经有一定鸿蒙开发经验想快速补齐后端部分本文都会给出可以直接复用和修改的方案。1. 为什么这个选题值得做1.1 毕设选题的常见难点很多同学在选毕设题目时通常会遇到三个问题第一题目太简单无法体现工作量第二题目太冷门参考资料太少遇到问题卡住就寸步难行第三题目虽然热门但如果只是做个单页应用或者课程作业级别的小 Demo答辩时很容易被老师追问到说不清楚。“小红书APP”这个方向之所以被反复选中恰恰说明它符合毕业设计的基本要求有用户端、有内容展示、有交互逻辑、有后端支撑、有管理后台。这些要素组合起来就是一个完整的业务闭环。而把它放在鸿蒙系统上实现又顺应了国产操作系统生态发展的趋势在技术新颖度上比传统的 Android 项目更有话题点。1.2 鸿蒙系统与 ArkTS 的价值鸿蒙系统采用的是分布式架构能够实现多设备协同而 ArkTS 是鸿蒙原生开发的主力语言。ArkTS 基于 TypeScript 语法演进保留了静态类型优势同时结合声明式 UI 开发范式让页面编写更加直观、高效。选择基于鸿蒙系统的原生开发而不是套壳 WebView体现了对 ArkUI 框架、状态管理、系统权限、设备能力调用的深入理解。这些内容与技术发展趋势贴合也更容易在毕业答辩中讲出深度。对于以后想从事移动端开发的同学来说这个项目经历还可以直接写进简历因为 ArkTS 和 ArkUI 本质上是现代声明式 UI 开发的思路和 Jetpack Compose、SwiftUI 有很多相通之处。1.3 社交 电商组合的工程意义为什么要在社交笔记的基础上叠加电商商城模块原因很简单单纯的笔记社区功能面太窄难以体现完整的后端设计能力。而“内容 电商”的模式在真实的互联网产品中非常普遍比如小红书本身就是这种模式。在这个项目里用户既可以浏览笔记、点赞、收藏、发布内容也可以查看商品、加入购物车、提交订单。从数据库设计到接口开发从客户端展示到后台管理整个链路都打通了项目的工程价值就会明显上一个台阶。2. 项目整体架构与功能规划2.1 三端整体结构这个项目可以拆分成三个部分用户端 APP、管理后台 Web、服务端接口。用户端 APP 使用鸿蒙 ArkTS 实现完成笔记社区和电商商城的前端展示与交互管理后台 Web 负责内容审核、商品管理、订单管理等操作服务端接口则统一为两端提供数据服务。用户端 APPArkTS ------ 服务端接口HTTP/JSON ------ 数据库 管理后台 WebVue/React ------ 服务端接口HTTP/JSON ------ 数据库这种前后端分离的结构是目前企业开发中最常见的方式。答辩时这套结构本身就说明你理解现代软件工程的基本分工。2.2 用户端功能拆分用户端 APP 是工作量最大的部分建议拆成几个独立功能模块首页信息流推荐笔记列表支持瀑布流展示、下拉刷新、上拉加载更多。笔记详情展示图片、文案、点赞数、收藏数、评论列表支持点赞和收藏操作。发布笔记支持选择图片、输入标题和正文提交到服务端。购物商城商品分类、商品列表、商品详情、加入购物车。购物车与订单购物车数量修改、结算、生成订单、查看订单状态。个人中心用户信息、我的笔记、我的收藏、我的订单。每个模块都是一个完整的业务场景里面既有 UI 布局也有状态管理还有网络请求和数据缓存。2.3 Web 后台功能规划Web 后台的核心职责是管理数据一般包括以下模块管理员登录账号密码认证保证后台接口和数据安全。笔记管理查看用户发布的所有笔记具备下架、删除、置顶等操作。用户管理查看注册用户列表支持禁用或启用账号。商品管理商品的增删改查以及上下架操作。订单管理查看所有订单更新订单发货状态。数据统计简单的用户数、笔记数、订单量等数据卡片展示。后台不一定要做得特别复杂但核心管理功能必须闭环。比如前端发布了笔记后台能查到并且能下架这就形成了一个完整的数据管理链路。3. 环境准备与工程创建3.1 开发工具准备基于鸿蒙系统的应用开发目前主流的 IDE 是 DevEco Studio。使用 DevEco Studio 之前需要确保电脑满足运行要求然后完成以下基础配置安装 Node.js用于工程编译和相关工具链的运行。安装 DevEco Studio并完成 HarmonyOS SDK 的下载。在 IDE 中配置模拟器或者准备一台开启开发者模式的鸿蒙真机。了解 OpenHarmony SDK 和 HarmonyOS SDK 的区别根据你的设备选择对应 SDK 版本。版本方面需要特别说明DevEco Studio 和 SDK 版本更新速度较快不同版本之间 API 差异比较大。建议直接去华为开发者官网下载最新稳定版不要参考网上的老旧教程强行使用旧版本。本文的代码示例以常规 ArkTS 写法为基础你在实际运行时如果遇到 API 调整需要结合官方 API 文档做适配。3.2 创建工程打开 DevEco Studio选择新建工程模板选择 Empty Ability。创建完成后工程目录会是类似这样的结构AppScope/ entry/ src/main/ ets/ entryability/ pages/ Index.ets resources/ module.json5 build-profile.json5其中pages/Index.ets是应用启动后的入口页面后续的页面基本都放在pages目录下。module.json5文件则负责应用权限声明、页面注册和模块配置。3.3 配置项目信息创建工程后第一步建议先把应用的基础配置和权限声明整理好。在module.json5中你可以配置应用包名、页面入口、权限等。比如网络请求是绝大多数 APP 必需的能力因此需要申请网络权限。{ module: { name: entry, type: entry, deviceTypes: [phone, tablet], requestPermissions: [ { name: ohos.permission.INTERNET } ], abilities: [ { name: EntryAbility, srcEntry: ./ets/entryability/EntryAbility.ts, description: $string:EntryAbility_desc, icon: $media:icon, label: $string:EntryAbility_label, startWindowIcon: $media:icon, startWindowBackground: $color:start_window_background, exported: true, skills: [ { entities: [entity.system.home], actions: [action.system.home] } ] } ] } }需要注意的是权限申请遵循最小授权原则。如果你的应用只用到了网络请求就只申请网络权限不要为了“省事”把相机、定位、存储等权限全部写上。在鸿蒙系统中部分涉及用户隐私的权限需要在运行时动态申请后面章节会专门讲到。4. ArkTS 核心概念与基础页面4.1 声明式 UI 开发范式ArkTS 开发中页面由组件树构成。使用Component装饰一个自定义组件使用Entry标记页面入口。每个组件拥有自己的build()方法用来描述 UI 结构。来看一个最简单的页面// 文件路径entry/src/main/ets/pages/Index.ets Entry Component struct Index { State message: string 你好鸿蒙小红书; build() { Column({ space: 20 }) { Text(this.message) .fontSize(24) .fontWeight(FontWeight.Bold) Button(点击修改) .onClick(() { this.message ArkTS 状态更新成功; }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }这段代码包含了 ArkTS 页面的基本要素Entry入口标记、Component组件标记、State状态变量、build()方法、组件布局、事件绑定。当你点击按钮时message变量改变页面上的Text组件会自动刷新。4.2 状态管理机制ArkTS 的状态管理是理解整个项目开发的关键。简单来说状态变量就是驱动 UI 更新的数据源。常用的装饰器包括装饰器作用使用场景State组件内部状态页面的局部数据Prop父组件向子组件传递的单一值列表项接收数据Link父子组件双向同步全局开关、同步修改Provide / Consume跨层级状态共享用户登录信息Observed / ObjectLink嵌套对象属性级观察复杂对象数据在实际开发中State最常用。比如你在首页信息流中拉取笔记列表列表数据就可以用State修饰。用户下拉刷新时重新赋值数组页面自动渲染。State noteList: NoteItem[] []; async loadNotes() { const result await requestNoteList(); this.noteList result; }4.3 列表渲染与循环小红书的信息流核心是笔记列表ArkUI 中可以使用List或Grid组件实现。对于瀑布流效果可以使用WaterFlow组件。下面的代码演示了一个简单的笔记列表// 文件路径entry/src/main/ets/pages/HomePage.ets Entry Component struct HomePage { State noteList: string[] [ 第一篇笔记, 第二篇笔记, 第三篇笔记 ]; build() { List({ space: 12 }) { ForEach(this.noteList, (item: string, index: number) { ListItem() { Row() { Text(item) .fontSize(16) Blank() Text(#${index 1}) .fontSize(12) .fontColor(#999999) } .width(100%) .padding(16) .backgroundColor(#F5F5F5) .borderRadius(12) } }, (item: string) item) } .width(100%) .height(100%) .padding(12) } }这里使用了ForEach进行列表渲染每一个ListItem都是一个独立的笔记卡片。实际项目中你可以把卡片单独抽成一个组件提高代码复用性。4.4 页面跳转与路由多页面应用必须处理页面跳转。鸿蒙系统中的路由跳转可以使用router模块或Navigation组件。router方式适合简单的页面切换示例代码如下import { router } from kit.ArkUI; router.pushUrl({ url: pages/NoteDetailPage, params: { noteId: 1001 } });跳转后的页面可以通过router.getParams()获取传递的参数。复杂的应用建议使用Navigation组件体系它的页面栈管理更加灵活也支持 more 与返回手势。5. 社交笔记模块实战5.1 首页信息流与瀑布流首页信息流是用户打开 APP 看到的第一个页面目前小红书采用的是双列瀑布流布局。在 ArkUI 中瀑布流可以基于WaterFlow组件实现也可以退而求其次用双列Grid加不等高单元格实现。用WaterFlow时需要注意数据项的高度是不确定的。通常后端接口会返回图片的宽高比例客户端根据比例计算单列高度再交给瀑布流渲染。如果图片信息缺失可以统一使用固定高度占位保证布局稳定。// 文件路径entry/src/main/ets/pages/NoteFeedPage.ets Entry Component struct NoteFeedPage { State noteList: NoteItem[] []; build() { WaterFlow() { ForEach(this.noteList, (item: NoteItem) { FlowItem() { Column() { Image(item.coverUrl) .width(100%) .height(this.calculateHeight(item)) .objectFit(ImageFit.Cover) Text(item.title) .fontSize(14) .margin({ top: 8 }) Row() { Text(item.authorName) .fontSize(12) .fontColor(#999999) } .margin({ top: 4 }) } .padding(8) .backgroundColor(Color.White) .borderRadius(12) } }, (item: NoteItem) item.noteId) } .columnsTemplate(1fr 1fr) .columnsGap(8) .rowsGap(8) .padding(8) .layoutWeight(1) } calculateHeight(item: NoteItem): string { const ratio item.imageHeight item.imageWidth ? item.imageHeight / item.imageWidth : 1; return ${Math.round(200 * ratio)}px; } aboutToAppear() { this.loadFeedData(); } async loadFeedData() { // 调用接口获取首页笔记列表 } }注意aboutToAppear()是页面即将出现时触发的生命周期回调适合放置数据初始化逻辑。相比在build()里做异步请求这种方式更规范。5.2 笔记详情与点赞交互笔记详情页通常需要显示大图、标题、正文、作者信息、点赞按钮、收藏按钮、评论列表。这里有一个常见的交互细节点赞按钮的状态切换是本地先改再请求接口失败则回滚。State liked: boolean false; State likeCount: number 0; toggleLike() { const previousLiked this.liked; const previousCount this.likeCount; // 先进行 UI 层更新保证响应速度 this.liked !this.liked; this.likeCount this.liked ? this.likeCount 1 : this.likeCount - 1; // 再请求后端接口 this.requestLike(this.noteId, this.liked).catch(() { // 接口失败后回滚状态 this.liked previousLiked; this.likeCount previousCount; }); }这种“乐观更新”的方式在社交应用里非常常见既保证了交互流畅也具备数据一致性兜底。实现时还要注意防止用户在高频点击下产生重复请求可以在按钮点击后加一个 200 毫秒的防抖处理。5.3 发布笔记与图片选择发布笔记模块涉及图片选择、表单填写和提交接口。在鸿蒙系统中选择图片需要调用系统相册能力。实际开发中为了控制篇幅建议通过文件选择器选取图片拿到图片 URI 后在上传时转换为可传输的字节流。这里的重点是权限和授权机制。鸿蒙系统对于相册、相机、定位等敏感能力有严格的权限控制。你需要在module.json5中声明权限并在运行时动态申请。下面是一个动态申请权限的示例思路import { abilityAccessCtrl, Permissions } from kit.AbilityKit; import { BusinessError } from kit.BasicServicesKit; async function requestPermission(permissions: ArrayPermissions) { const atManager abilityAccessCtrl.createAtManager(); try { const result await atManager.requestPermissionsFromUser( getContext(this), permissions ); // 根据 result.authResults 判断授权是否成功 } catch (err) { const error err as BusinessError; console.error(权限申请失败: ${error.code} ${error.message}); } }使用动态权限申请时必须有明确的产品场景。比如用户点击“选择图片”按钮后才申请相册权限不要在启动页面就让用户面对一堆权限弹窗。这也是应用审核和用户体验的基本要求。6. 电商商城模块与 Web 后台设计6.1 商品列表与分类电商商城模块可以放在底部 Tab 中作为独立入口。商品列表一般包含分类栏和商品卡片支持分类切换和商品搜索。技术上跟笔记列表类似同样使用Grid或List渲染。商品卡片通常包含商品图、名称、价格、销量。价格需要由后端返回前端只做展示不能直接拼接价格字符串以保证多端一致和精度控制。6.2 购物车与订单流程购物车模块是一个典型的“可交互列表”涉及数量增减、全选/单选、合计价格实时计算。状态管理上建议把购物车数据放到页面顶层组件中管理每个购物车项作为子组件通过回调函数修改数据。订单流程可以分为几个步骤用户从购物车勾选商品点击结算。进入确认订单页面填写收货地址。生成订单后端扣减库存。客户端展示订单结果。用户可在“我的订单”中查看订单状态。需要注意订单生成前要在后端做库存校验避免超卖。客户端提交订单时建议加入防重复提交逻辑防止用户连续点击下单按钮导致重复订单。这也是一道很常见的面试追问点。6.3 Web 后台技术选型Web 后台的作用是对用户、笔记、商品、订单进行管理。常见的技术选型可以是 Spring Boot MySQL Vue也可以是 Node.js Express MySQL。下面以 Spring Boot 为例画出接口模块的粗略思路用户端 APP 请求 - Controller - Service - Mapper - MySQL Web 后台请求 - Controller - Service - Mapper - MySQL数据库至少需要这几张核心表用户表、笔记表、笔记图片表、评论表、点赞表、收藏表、商品表、分类表、购物车表、订单表、订单明细表。表结构设计是答辩时的重点考察内容建议画一份简单的 ER 图并解释每张表的作用。6.4 后台接口对接要点前端 APP 通过 HTTP 协议调用后端接口常用的 HTTP 工具是鸿蒙提供的ohos.net.http。下面是一个简单的 GET 请求封装思路import { http } from kit.NetworkKit; export async function getNoteList(page: number, pageSize: number) { const httpRequest http.createHttp(); try { const response await httpRequest.request( https://your-server-url.com/api/notes, { method: http.RequestMethod.GET, header: { Content-Type: application/json }, extraData: { page: page, pageSize: pageSize }, connectTimeout: 10000, readTimeout: 10000 } ); if (response.responseCode 200) { const result JSON.parse(response.result as string); return result.data; } } catch (err) { console.error(请求失败: ${JSON.stringify(err)}); } finally { httpRequest.destroy(); } }实际项目中接口地址要放在统一的配置文件中不要散落在各个页面。对于需要登录的接口还需要在请求头中携带 Token。建议封装一个统一的请求工具类处理公共请求头、错误码拦截和 Token 过期跳转。7. 常见问题与排查思路7.1 高频问题汇总问题现象常见原因解决思路页面白屏不显示入口组件未使用 Entry 标记检查入口页面注解网络请求一直失败未配置 INTERNET 权限在 module.json5 中添加权限模拟器无法启动应用SDK 版本和设备镜像不匹配重新下载匹配的模拟器镜像列表数据不刷新修改了对象属性但未触发 UI 更新使用 Observed 或重新赋值新数组页面跳转报错路由地址拼写错误或页面未注册检查 pages 目录和 router 路径真机安装失败签名证书与设备不匹配配置自动签名并登录华为账号接口返回 401Token 缺失或过期检查请求头是否带 Token7.2 列表不刷新的底层原因很多同学在开发中遇到“数据改了但界面不更新”的问题。这在 ArkTS 中大多数情况是因为直接修改了数组的某个元素属性比如this.noteList[0].title xxx。这种修改方式不一定能触发 UI 重新渲染。解决办法有两种一是修改数组整体引用例如this.noteList [...this.noteList]二是对复杂嵌套对象使用Observed与ObjectLink装饰器。推荐前者代码改动小思路也简单。7.3 自定义组件状态同步失败当父子组件之间的数据总是对不上时优先检查传参方式。父组件给子组件传普通参数子组件内部用State接收这只是“初始值”。如果父组件数据变化后希望子组件同步更新应该使用Prop或Link。其中Prop是单向同步子组件内部修改不会影响父组件Link是双向同步适合需要反向修改父组件数据的场景。这个区别在开发购物车勾选、笔记点赞这类功能时经常用到。8. 最佳实践与工程化建议8.1 目录和命名规范一个接近真实企业项目的目录结构可以这样组织entry/src/main/ets/ pages/ // 页面文件 components/ // 公共组件 model/ // 数据类定义 api/ // 接口请求封装 utils/ // 工具函数 common/ // 常量与公共配置命名上建议组件文件用大驼峰例如NoteCard.ets、ProductCard.ets接口方法用getNoteList、submitOrder这样的动词短语数据模型类字段使用小驼峰和后端返回字段保持一致。8.2 状态管理与数据流不要把所有的业务状态都塞进一个页面组件里。建议按照“页面级状态”和“应用级状态”去划分。页面级状态使用State、Prop、Link管理用户登录态、全局购物车数量这类跨页面数据可以使用AppStorage或统一的状态管理工具来维护。接口返回的数据模型要单独定义类或接口不要到处用any或自由对象。类型定义带来的好处是编译期就能发现字段拼写错误和数据结构不一致问题。8.3 安全与权限边界在涉及用户隐私的能力时必须遵循最小权限原则。比如发布笔记要选择图片就应该在用户点击“选图”时才申请相册权限。后端接口必须做身份认证和权限校验管理后台和用户端的接口要隔离避免普通用户直接调用后台管理的接口。电商模块涉及下单和支付虽然很多毕设项目不会接入真实支付通道但订单金额必须由后端计算和校验不能信任前端传入的合计金额。库存操作需要配合事务避免在并发场景下出现超卖。8.4 日志与调试建议应用开发过程中合理使用日志能大幅提升排查效率。ArkTS 中可以使用hilog输出日志也可以在 DevEco Studio 的 Log 窗口中查看。建议在请求封装层统一打印请求地址和响应结果方便定位网络问题。上线前再移除或禁用详细日志输出避免敏感信息泄露。8.5 代码提交与协作如果你是自己一个人完成整套项目同样建议使用 Git 管理代码至少做到每次功能模块完成时提交一次。在答辩时还可以展示 Git 提交记录体现项目开发过程的完整性。如果团队协作则需要约定代码格式、分支模型和接口文档规范。接口文档建议使用 YApi、Apifox 或简单的 Markdown 文档方便前后端对齐。9. 总结与学习路线基于鸿蒙系统的小红书 APP 项目核心亮点在于三端完整ArkTS 原生用户端、Web 管理后台、服务端接口和数据库。这种方式既展示了鸿蒙原生开发能力也覆盖了前后端分离开发的主要技术环节对毕业设计来说完整度很高。如果你准备从零开始动手建议按下面的路线推进先搭一个包含 Tab 栏的壳工程把首页、商城、发布、消息、个人中心五个底部页面跑通。完成首页笔记列表先使用 Mock 数据不依赖后端。设计数据库表结构编写后端接口把列表接口替换为真实数据。依次实现笔记详情、点赞收藏、发布笔记。再实现商城模块的商品列表、购物车、订单提交。最后做 Web 后台完成笔记、商品、订单的管理闭环。整体联调、测试、修复边界问题并整理答辩文档和演示视频。整个过程中你会接触声明式 UI、状态管理、路由、权限申请、网络请求、数据建模、后端接口开发等一连串真实开发技能。无论是项目本身还是项目产出的经验都可以在以后的求职或深入研究中继续复用。遇到问题不要怕按模块逐个拆解先跑通最小流程再逐层完善比一上来就想做到“完美”要高效得多。希望这篇文章能帮你把毕设的方向和节奏理清楚也祝你顺利拿下一份有分量、能讲清楚、经得起追问的毕业设计项目。