HarmonyOS APP＜玩转React＞开源教程二十：收藏功能实现

第20次收藏功能实现收藏功能让用户可以标记感兴趣的课程方便后续快速访问。本次课程将完整实现收藏功能包括服务层、状态管理和收藏页面。项目效果学习目标掌握 BookmarkService 设计学会收藏状态管理实现收藏列表持久化完成收藏页面开发实现收藏功能全流程20.1 收藏数据模型Bookmark 结构interfaceBookmark{lessonId:string;// 课程 IDmoduleId:string;// 所属模块 IDaddedAt:string;// 添加时间ISO 格式}存储键// Constants.etsexportclassStorageKeys{staticreadonlyBOOKMARKS:stringbookmarks;}20.2 BookmarkService 设计服务结构exportclassBookmarkService{// 内存缓存privatestaticcachedBookmarks:Bookmark[][];// 加载收藏staticasyncloadBookmarks():PromiseBookmark[];// 添加收藏staticasyncaddBookmark(lessonId:string,moduleId:string):Promisevoid;// 移除收藏staticasyncremoveBookmark(lessonId:string):Promisevoid;// 切换收藏状态staticasynctoggleBookmark(lessonId:string,moduleId:string):Promiseboolean;// 检查是否已收藏staticisBookmarked(lessonId:string):boolean;}加载收藏staticasyncloadBookmarks():PromiseBookmark[]{try{constbookmarksawaitStorageUtil.getObjectBookmark[](StorageKeys.BOOKMARKS,[]);BookmarkService.cachedBookmarksbookmarks;returnbookmarks;}catch(error){console.error([BookmarkService] Failed to load bookmarks:,error);return[];}}保存收藏privatestaticasyncsaveBookmarks(bookmarks:Bookmark[]):Promisevoid{try{awaitStorageUtil.setObject(StorageKeys.BOOKMARKS,bookmarks);BookmarkService.cachedBookmarksbookmarks;}catch(error){console.error([BookmarkService] Failed to save bookmarks:,error);}}20.3 收藏操作实现添加收藏staticasyncaddBookmark(lessonId:string,moduleId:string):Promisevoid{constbookmarksawaitBookmarkService.loadBookmarks();// 检查是否已收藏避免重复if(bookmarks.some(bb.lessonIdlessonId)){return;}// 创建新收藏constnewBookmark:Bookmark{lessonId,moduleId,addedAt:newDate().toISOString()};bookmarks.push(newBookmark);awaitBookmarkService.saveBookmarks(bookmarks);}移除收藏staticasyncremoveBookmark(lessonId:string):Promisevoid{constbookmarksawaitBookmarkService.loadBookmarks();constfilteredbookmarks.filter(bb.lessonId!lessonId);awaitBookmarkService.saveBookmarks(filtered);}切换收藏状态staticasynctoggleBookmark(lessonId:string,moduleId:string):Promiseboolean{constisCurrentlyBookmarkedBookmarkService.isBookmarked(lessonId);if(isCurrentlyBookmarked){awaitBookmarkService.removeBookmark(lessonId);returnfalse;// 返回新状态未收藏}else{awaitBookmarkService.addBookmark(lessonId,moduleId);returntrue;// 返回新状态已收藏}}检查收藏状态// 同步方法使用缓存staticisBookmarked(lessonId:string):boolean{returnBookmarkService.cachedBookmarks.some(bb.lessonIdlessonId);}20.4 收藏分组功能按模块分组staticgetBookmarksByModule():Mapstring,Bookmark[]{constgroupednewMapstring,Bookmark[]();for(constbookmarkofBookmarkService.cachedBookmarks){constmoduleBookmarksgrouped.get(bookmark.moduleId)??[];moduleBookmarks.push(bookmark);grouped.set(bookmark.moduleId,moduleBookmarks);}returngrouped;}获取收藏数量staticgetBookmarkCount():number{returnBookmarkService.cachedBookmarks.length;}清空收藏staticasyncclearBookmarks():Promisevoid{awaitBookmarkService.saveBookmarks([]);}20.5 收藏页面实现页面结构EntryComponentstruct BookmarkPage{Statebookmarks:Bookmark[][];StateisLoading:booleantrue;StorageLink(isDarkMode)isDarkMode:booleanfalse;aboutToAppear():void{this.loadBookmarks();}privateasyncloadBookmarks():Promisevoid{this.bookmarksawaitBookmarkService.loadBookmarks();this.isLoadingfalse;}}空状态展示BuilderEmptyState(){Column(){Text().fontSize(64)Text(暂无收藏).fontSize(18).fontColor(this.isDarkMode?#d1d5db:#495057).margin({top:16})Text(点击课程旁的 ☆ 添加收藏).fontSize(14).fontColor(this.isDarkMode?#9ca3af:#6c757d).margin({top:8})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}收藏列表BuilderBookmarkList(){List(){ForEach(this.bookmarks,(bookmark:Bookmark){ListItem(){this.BookmarkItem(bookmark)}.margin({bottom:8})},(bookmark:Bookmark)bookmark.lessonId)}.width(100%).layoutWeight(1).padding({left:16,right:16,top:12}).scrollBar(BarState.Off)}收藏项组件BuilderBookmarkItem(bookmark:Bookmark){Row(){// 获取课程信息Column(){Text(this.getLessonTitle(bookmark)).fontSize(15).fontWeight(FontWeight.Medium).fontColor(this.isDarkMode?#ffffff:#1a1a2e)Text(this.getModuleTitle(bookmark)).fontSize(12).fontColor(this.isDarkMode?#d1d5db:#495057).margin({top:4})}.alignItems(HorizontalAlign.Start).layoutWeight(1)// 取消收藏按钮Text(★).fontSize(20).fontColor(#fcc419).onClick(()this.removeBookmark(bookmark))// 箭头Text(›).fontSize(18).fontColor(this.isDarkMode?#9ca3af:#6c757d).margin({left:8})}.width(100%).padding(16).backgroundColor(this.isDarkMode?#282c34:#ffffff).borderRadius(12).onClick((){router.pushUrl({url:pages/LessonDetail,params:{moduleId:bookmark.moduleId,lessonId:bookmark.lessonId}});})}// 获取课程标题privategetLessonTitle(bookmark:Bookmark):string{constlessonTutorialService.getLessonById(bookmark.moduleId,bookmark.lessonId);returnlesson?.title??未知课程;}// 获取模块标题privategetModuleTitle(bookmark:Bookmark):string{constmoduleTutorialService.getModuleById(bookmark.moduleId);returnmodule?.title??未知模块;}// 移除收藏privateasyncremoveBookmark(bookmark:Bookmark):Promisevoid{awaitBookmarkService.removeBookmark(bookmark.lessonId);this.bookmarksthis.bookmarks.filter(bb.lessonId!bookmark.lessonId);}20.6 完整服务代码/** * 收藏管理服务 */import{StorageUtil}from../common/StorageUtil;import{StorageKeys}from../common/Constants;import{Bookmark}from../models/Models;exportclassBookmarkService{privatestaticcachedBookmarks:Bookmark[][];staticasyncloadBookmarks():PromiseBookmark[]{try{constbookmarksawaitStorageUtil.getObjectBookmark[](StorageKeys.BOOKMARKS,[]);BookmarkService.cachedBookmarksbookmarks;returnbookmarks;}catch(error){console.error([BookmarkService] Failed to load bookmarks:,error);return[];}}privatestaticasyncsaveBookmarks(bookmarks:Bookmark[]):Promisevoid{try{awaitStorageUtil.setObject(StorageKeys.BOOKMARKS,bookmarks);BookmarkService.cachedBookmarksbookmarks;}catch(error){console.error([BookmarkService] Failed to save bookmarks:,error);}}staticgetCachedBookmarks():Bookmark[]{returnBookmarkService.cachedBookmarks;}staticasyncaddBookmark(lessonId:string,moduleId:string):Promisevoid{constbookmarksawaitBookmarkService.loadBookmarks();if(bookmarks.some(bb.lessonIdlessonId)){return;}constnewBookmark:Bookmark{lessonId,moduleId,addedAt:newDate().toISOString()};bookmarks.push(newBookmark);awaitBookmarkService.saveBookmarks(bookmarks);}staticasyncremoveBookmark(lessonId:string):Promisevoid{constbookmarksawaitBookmarkService.loadBookmarks();constfilteredbookmarks.filter(bb.lessonId!lessonId);awaitBookmarkService.saveBookmarks(filtered);}staticasynctoggleBookmark(lessonId:string,moduleId:string):Promiseboolean{constisCurrentlyBookmarkedBookmarkService.isBookmarked(lessonId);if(isCurrentlyBookmarked){awaitBookmarkService.removeBookmark(lessonId);returnfalse;}else{awaitBookmarkService.addBookmark(lessonId,moduleId);returntrue;}}staticisBookmarked(lessonId:string):boolean{returnBookmarkService.cachedBookmarks.some(bb.lessonIdlessonId);}staticgetBookmarksByModule():Mapstring,Bookmark[]{constgroupednewMapstring,Bookmark[]();for(constbookmarkofBookmarkService.cachedBookmarks){constmoduleBookmarksgrouped.get(bookmark.moduleId)??[];moduleBookmarks.push(bookmark);grouped.set(bookmark.moduleId,moduleBookmarks);}returngrouped;}staticgetBookmarkCount():number{returnBookmarkService.cachedBookmarks.length;}staticasyncclearBookmarks():Promisevoid{awaitBookmarkService.saveBookmarks([]);}}20.7 在其他页面集成课程详情页// LessonDetail.etsStateisBookmarked:booleanfalse;aboutToAppear():void{this.isBookmarkedBookmarkService.isBookmarked(this.lessonId);}// 收藏按钮Text(this.isBookmarked?★:☆).fontSize(24).fontColor(this.isBookmarked?#fcc419:#9ca3af).onClick(async(){this.isBookmarkedawaitBookmarkService.toggleBookmark(this.lessonId,this.moduleId);})模块详情页// ModuleDetail.etsLessonItem({lesson:lesson,isBookmarked:BookmarkService.isBookmarked(lesson.id),onBookmarkTap:async(){awaitBookmarkService.toggleBookmark(lesson.id,module.id);this.bookmarkVersion;// 触发刷新}})本次课程小结通过本次课程你已经✅ 掌握了 BookmarkService 设计✅ 学会了收藏状态管理✅ 实现了收藏列表持久化✅ 完成了收藏页面开发✅ 实现了收藏功能全流程课后练习添加排序功能支持按添加时间排序添加批量操作支持批量删除收藏添加导出功能导出收藏列表下次预告第21次测验服务层实现我们将开发测验功能QuizService 设计测验数据结构答案验证逻辑分数计算进入测验功能开发