鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车

Ne0inhk

— 15 min read
鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车

《鸿蒙APP开发从入门到精通》第13篇：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车 🛒📱

在这里插入图片描述

内容承接与核心价值

这是《鸿蒙APP开发从入门到精通》的第13篇——用户管理、商品列表、购物车篇，100%承接第12篇的「运维监控、生态运营与专属变现」项目架构，完成鸿蒙电商购物车全栈项目的基础功能实现。

学习目标：

  • 掌握用户管理的设计与实现；
  • 实现用户注册、登录、用户信息管理；
  • 理解商品列表的设计与实现；
  • 实现商品列表、商品详情、商品搜索；
  • 掌握购物车管理的设计与实现；
  • 实现添加商品到购物车、修改购物车商品数量、删除购物车商品；
  • 优化用户管理、商品列表、购物车的用户体验（响应速度、数据安全、用户反馈）。

学习重点：

  • 鸿蒙APP用户管理的开发流程；
  • 用户管理的分类与使用场景；
  • 商品列表的设计与实现；
  • 购物车管理的设计与实现。

一、 用户管理基础 🎯

1.1 用户管理定义

用户管理是指对应用的用户进行管理，主要包括以下方面：

  • 用户注册：用户可以通过手机号、邮箱等方式注册；
  • 用户登录：用户可以通过手机号、邮箱等方式登录；
  • 用户信息管理：用户可以管理自己的个人信息；
  • 用户权限管理：管理用户的权限。

1.2 用户管理架构

用户管理采用分层架构，由以下部分组成：

  • 用户服务层：负责用户的业务逻辑；
  • 用户数据层：负责用户的数据存储与管理；
  • 用户接口层：负责用户的接口设计与实现；
  • 用户展示层：负责用户的界面渲染与交互。

二、 用户管理实战 🛠️

2.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 用户注册：用户可以通过手机号、邮箱等方式注册；
  • 用户登录：用户可以通过手机号、邮箱等方式登录；
  • 用户信息管理：用户可以管理自己的个人信息。

2.2 🔧 用户注册实现

1. 用户注册工具类

⌨️ entry/src/main/ets/utils/UserRegistrationUtil.ets

import user from'@ohos.user';// 用户注册工具类exportclassUserRegistrationUtil{privatestatic instance: UserRegistrationUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserRegistrationUtil {if(!UserRegistrationUtil.instance){ UserRegistrationUtil.instance =newUserRegistrationUtil();}return UserRegistrationUtil.instance;}// 初始化用户注册asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 用户注册asyncregister(email:string, password:string):Promise<user.UserRegistrationResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.register(email, password);return result;}// 发送验证码asyncsendVerificationCode(email:string):Promise<user.SendVerificationCodeResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.sendVerificationCode(email);return result;}}
2. 用户注册应用

⌨️ entry/src/main/ets/pages/RegistrationPage.ets

import{ UserRegistrationUtil }from'../utils/UserRegistrationUtil';@Entry@Component struct RegistrationPage {@State email:string='';@State password:string='';@State verificationCode:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入邮箱', value:this.email,onChange:(value:string)=>{this.email = value;}, type: InputType.Email });InputComponent({ placeholder:'请输入密码', value:this.password,onChange:(value:string)=>{this.password = value;}, type: InputType.Password });InputComponent({ placeholder:'请输入验证码', value:this.verificationCode,onChange:(value:string)=>{this.verificationCode = value;}, type: InputType.Normal });ButtonComponent({ text:'发送验证码',onClick:async()=>{awaitthis.sendVerificationCode();}, disabled:!this.email });ButtonComponent({ text:'注册',onClick:async()=>{awaitthis.register();}, disabled:!this.email ||!this.password ||!this.verificationCode });}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户注册 UserRegistrationUtil.getInstance().init();}asyncsendVerificationCode():Promise<void>{const result =await UserRegistrationUtil.getInstance().sendVerificationCode(this.email);if(result.success){ promptAction.showToast({ message:'验证码发送成功'});}else{ promptAction.showToast({ message:'验证码发送失败'});}}asyncregister():Promise<void>{const result =await UserRegistrationUtil.getInstance().register(this.email,this.password);if(result.success){ promptAction.showToast({ message:'注册成功'}); router.pushUrl({ url:'/pages/LoginPage'});}else{ promptAction.showToast({ message:'注册失败'});}}}

2.3 🔧 用户登录实现

1. 用户登录工具类

⌨️ entry/src/main/ets/utils/UserLoginUtil.ets

import user from'@ohos.user';// 用户登录工具类exportclassUserLoginUtil{privatestatic instance: UserLoginUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserLoginUtil {if(!UserLoginUtil.instance){ UserLoginUtil.instance =newUserLoginUtil();}return UserLoginUtil.instance;}// 初始化用户登录asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 用户登录asynclogin(email:string, password:string):Promise<user.UserLoginResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.login(email, password);return result;}// 忘记密码asyncforgetPassword(email:string):Promise<user.ForgetPasswordResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.forgetPassword(email);return result;}}
2. 用户登录应用

⌨️ entry/src/main/ets/pages/LoginPage.ets

import{ UserLoginUtil }from'../utils/UserLoginUtil';@Entry@Component struct LoginPage {@State email:string='';@State password:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入邮箱', value:this.email,onChange:(value:string)=>{this.email = value;}, type: InputType.Email });InputComponent({ placeholder:'请输入密码', value:this.password,onChange:(value:string)=>{this.password = value;}, type: InputType.Password });ButtonComponent({ text:'登录',onClick:async()=>{awaitthis.login();}, disabled:!this.email ||!this.password });Text('忘记密码').fontSize(14).textColor('#666666').onClick(()=>{this.forgetPassword();});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户登录 UserLoginUtil.getInstance().init();}asynclogin():Promise<void>{const result =await UserLoginUtil.getInstance().login(this.email,this.password);if(result.success){ promptAction.showToast({ message:'登录成功'}); router.pushUrl({ url:'/pages/HomePage'});}else{ promptAction.showToast({ message:'登录失败'});}}asyncforgetPassword():Promise<void>{const result =await UserLoginUtil.getInstance().forgetPassword(this.email);if(result.success){ promptAction.showToast({ message:'密码重置邮件已发送'});}else{ promptAction.showToast({ message:'密码重置邮件发送失败'});}}}

2.4 🔧 用户信息管理实现

1. 用户信息管理工具类

⌨️ entry/src/main/ets/utils/UserInformationManagementUtil.ets

import user from'@ohos.user';// 用户信息管理工具类exportclassUserInformationManagementUtil{privatestatic instance: UserInformationManagementUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserInformationManagementUtil {if(!UserInformationManagementUtil.instance){ UserInformationManagementUtil.instance =newUserInformationManagementUtil();}return UserInformationManagementUtil.instance;}// 初始化用户信息管理asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 获取用户信息asyncgetUserInformation():Promise<user.UserInformation>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.getUserInformation();return result;}// 修改用户信息asyncmodifyUserInformation(information: user.UserInformation):Promise<user.ModifyUserInformationResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.modifyUserInformation(information);return result;}// 修改密码asyncmodifyPassword(oldPassword:string, newPassword:string):Promise<user.ModifyPasswordResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.modifyPassword(oldPassword, newPassword);return result;}}
2. 用户信息管理应用

⌨️ entry/src/main/ets/pages/UserInformationPage.ets

import{ UserInformationManagementUtil }from'../utils/UserInformationManagementUtil';@Entry@Component struct UserInformationPage {@State userInformation: user.UserInformation |null=null;@State name:string='';@State avatarUrl:string='';@State oldPassword:string='';@State newPassword:string='';build(){Column({ space:16}){if(this.userInformation){Text(`用户ID：${this.userInformation.userId}`).fontSize(14).textColor('#666666');InputComponent({ placeholder:'请输入姓名', value:this.name,onChange:(value:string)=>{this.name = value;}, type: InputType.Normal });InputComponent({ placeholder:'请输入头像URL', value:this.avatarUrl,onChange:(value:string)=>{this.avatarUrl = value;}, type: InputType.Normal });ButtonComponent({ text:'修改用户信息',onClick:async()=>{awaitthis.modifyUserInformation();}, disabled:!this.name ||!this.avatarUrl });InputComponent({ placeholder:'请输入旧密码', value:this.oldPassword,onChange:(value:string)=>{this.oldPassword = value;}, type: InputType.Password });InputComponent({ placeholder:'请输入新密码', value:this.newPassword,onChange:(value:string)=>{this.newPassword = value;}, type: InputType.Password });ButtonComponent({ text:'修改密码',onClick:async()=>{awaitthis.modifyPassword();}, disabled:!this.oldPassword ||!this.newPassword });}}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户信息管理 UserInformationManagementUtil.getInstance().init();// 获取用户信息this.getUserInformation();}asyncgetUserInformation():Promise<void>{this.userInformation =await UserInformationManagementUtil.getInstance().getUserInformation();this.name =this.userInformation?.name ??'';this.avatarUrl =this.userInformation?.avatarUrl ??'';}asyncmodifyUserInformation():Promise<void>{const result =await UserInformationManagementUtil.getInstance().modifyUserInformation({ userId:this.userInformation?.userId ??0, name:this.name, avatarUrl:this.avatarUrl, email:this.userInformation?.email ??''});if(result.success){ promptAction.showToast({ message:'修改用户信息成功'});this.getUserInformation();}else{ promptAction.showToast({ message:'修改用户信息失败'});}}asyncmodifyPassword():Promise<void>{const result =await UserInformationManagementUtil.getInstance().modifyPassword(this.oldPassword,this.newPassword);if(result.success){ promptAction.showToast({ message:'修改密码成功'});this.oldPassword ='';this.newPassword ='';}else{ promptAction.showToast({ message:'修改密码失败'});}}}

三、 商品列表实战 🛠️

3.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 商品列表：显示商品列表；
  • 商品详情：显示商品详情；
  • 商品搜索：搜索商品。

3.2 🔧 商品列表实现

1. 商品列表工具类

⌨️ entry/src/main/ets/utils/ProductListUtil.ets

import product from'@ohos.product';// 商品列表工具类exportclassProductListUtil{privatestatic instance: ProductListUtil |null=null;private productHelper: product.ProductHelper |null=null;// 单例模式staticgetInstance(): ProductListUtil {if(!ProductListUtil.instance){ ProductListUtil.instance =newProductListUtil();}return ProductListUtil.instance;}// 初始化商品列表asyncinit():Promise<void>{if(!this.productHelper){this.productHelper = product.createProductHelper();}}// 获取商品列表asyncgetProductList():Promise<Array<product.Product>>{if(!this.productHelper){return[];}const result =awaitthis.productHelper.getProductList();return result;}// 搜索商品asyncsearchProduct(keyword:string):Promise<Array<product.Product>>{if(!this.productHelper){return[];}const result =awaitthis.productHelper.searchProduct(keyword);return result;}}
2. 商品列表应用

⌨️ entry/src/main/ets/pages/ProductListPage.ets

import{ ProductListUtil }from'../utils/ProductListUtil';@Entry@Component struct ProductListPage {@State productList:Array<product.Product>=[];@State searchKeyword:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入搜索关键词', value:this.searchKeyword,onChange:(value:string)=>{this.searchKeyword = value;}, type: InputType.Normal });ButtonComponent({ text:'搜索',onClick:async()=>{awaitthis.searchProduct();}, disabled:!this.searchKeyword });ListComponent({ data:this.productList,renderItem:(item: product.Product, index:number)=>{Row({ space:16}){Image(item.avatarUrl).width(80).height(80).objectFit(ImageFit.Cover).borderRadius(8);Column({ space:8}){Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).textColor('#000000');Text(item.description).fontSize(14).textColor('#666666').maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis });Text(`¥${item.price}`).fontSize(16).fontWeight(FontWeight.Bold).textColor('#FF0000');}.layoutWeight(1);ButtonComponent({ text:'查看详情',onClick:()=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}, disabled:false});}.width('100%').height('auto').padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom:8});},onItemClick:(item: product.Product, index:number)=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化商品列表 ProductListUtil.getInstance().init();// 获取商品列表this.getProductList();}asyncgetProductList():Promise<void>{this.productList =await ProductListUtil.getInstance().getProductList();}asyncsearchProduct():Promise<void>{this.productList =await ProductListUtil.getInstance().searchProduct(this.searchKeyword);}}

3.3 🔧 商品详情实现

1. 商品详情工具类

⌨️ entry/src/main/ets/utils/ProductDetailUtil.ets

import product from'@ohos.product';// 商品详情工具类exportclassProductDetailUtil{privatestatic instance: ProductDetailUtil |null=null;private productHelper: product.ProductHelper |null=null;// 单例模式staticgetInstance(): ProductDetailUtil {if(!ProductDetailUtil.instance){ ProductDetailUtil.instance =newProductDetailUtil();}return ProductDetailUtil.instance;}// 初始化商品详情asyncinit():Promise<void>{if(!this.productHelper){this.productHelper = product.createProductHelper();}}// 获取商品详情asyncgetProductDetail(productId:number):Promise<product.Product>{if(!this.productHelper){returnnull;}const result =awaitthis.productHelper.getProductDetail(productId);return result;}// 添加到购物车asyncaddToCart(productId:number, quantity:number):Promise<product.AddToCartResult>{if(!this.productHelper){returnnull;}const result =awaitthis.productHelper.addToCart(productId, quantity);return result;}}
2. 商品详情应用

⌨️ entry/src/main/ets/pages/ProductDetailPage.ets

import{ ProductDetailUtil }from'../utils/ProductDetailUtil';import{ CartManagementUtil }from'../utils/CartManagementUtil';@Entry@Component struct ProductDetailPage {@State product: product.Product |null=null;@State quantity:number=1;@State productId:number=0;build(){Column({ space:16}){if(this.product){Image(this.product.avatarUrl).width('100%').height(240).objectFit(ImageFit.Cover).borderRadius(8);Text(this.product.name).fontSize(18).fontWeight(FontWeight.Bold).textColor('#000000');Text(this.product.description).fontSize(14).textColor('#666666').maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis });Text(`¥${this.product.price}`).fontSize(18).fontWeight(FontWeight.Bold).textColor('#FF0000');Row({ space:16}){Text('数量：').fontSize(14).textColor('#000000');ButtonComponent({ text:'-',onClick:()=>{if(this.quantity >1){this.quantity--;}}, disabled:this.quantity <=1});Text(`${this.quantity}`).fontSize(14).textColor('#000000');ButtonComponent({ text:'+',onClick:()=>{this.quantity++;}, disabled:this.quantity >=10});}.width('100%').height('auto').justifyContent(FlexAlign.Center);ButtonComponent({ text:'添加到购物车',onClick:async()=>{awaitthis.addToCart();}, disabled:!this.product });}}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化商品详情 ProductDetailUtil.getInstance().init();// 初始化购物车管理 CartManagementUtil.getInstance().init();// 获取商品详情this.getProductDetail();}asyncgetProductDetail():Promise<void>{const params = router.getParams()as{ productId:number};this.productId = params.productId;this.product =await ProductDetailUtil.getInstance().getProductDetail(this.productId);}asyncaddToCart():Promise<void>{const result =await CartManagementUtil.getInstance().addToCart(this.productId,this.quantity);if(result.success){ promptAction.showToast({ message:'添加到购物车成功'});}else{ promptAction.showToast({ message:'添加到购物车失败'});}}}

四、 购物车管理实战 🛠️

4.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 购物车列表：显示购物车列表；
  • 添加商品到购物车：添加商品到购物车；
  • 修改购物车商品数量：修改购物车商品数量；
  • 删除购物车商品：删除购物车商品。

4.2 🔧 购物车管理工具类

⌨️ entry/src/main/ets/utils/CartManagementUtil.ets

import cart from'@ohos.cart';// 购物车管理工具类exportclassCartManagementUtil{privatestatic instance: CartManagementUtil |null=null;private cartHelper: cart.CartHelper |null=null;// 单例模式staticgetInstance(): CartManagementUtil {if(!CartManagementUtil.instance){ CartManagementUtil.instance =newCartManagementUtil();}return CartManagementUtil.instance;}// 初始化购物车管理asyncinit():Promise<void>{if(!this.cartHelper){this.cartHelper = cart.createCartHelper();}}// 获取购物车列表asyncgetCartList():Promise<Array<cart.CartItem>>{if(!this.cartHelper){return[];}const result =awaitthis.cartHelper.getCartList();return result;}// 添加商品到购物车asyncaddToCart(productId:number, quantity:number):Promise<cart.AddToCartResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.addToCart(productId, quantity);return result;}// 修改购物车商品数量asyncmodifyCartItemQuantity(cartItemId:number, quantity:number):Promise<cart.ModifyCartItemQuantityResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.modifyCartItemQuantity(cartItemId, quantity);return result;}// 删除购物车商品asyncdeleteCartItem(cartItemId:number):Promise<cart.DeleteCartItemResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.deleteCartItem(cartItemId);return result;}// 清空购物车asyncclearCart():Promise<cart.ClearCartResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.clearCart();return result;}}

4.3 🔧 购物车应用

⌨️ entry/src/main/ets/pages/CartPage.ets

import{ CartManagementUtil }from'../utils/CartManagementUtil';@Entry@Component struct CartPage {@State cartList:Array<cart.CartItem>=[];build(){Column({ space:16}){ListComponent({ data:this.cartList,renderItem:(item: cart.CartItem, index:number)=>{Row({ space:16}){Image(item.avatarUrl).width(80).height(80).objectFit(ImageFit.Cover).borderRadius(8);Column({ space:8}){Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).textColor('#000000');Text(item.description).fontSize(14).textColor('#666666').maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis });Text(`¥${item.price}`).fontSize(16).fontWeight(FontWeight.Bold).textColor('#FF0000');}.layoutWeight(1);Row({ space:8}){ButtonComponent({ text:'-',onClick:async()=>{awaitthis.modifyCartItemQuantity(item.cartItemId, item.quantity -1);}, disabled: item.quantity <=1});Text(`${item.quantity}`).fontSize(14).textColor('#000000');ButtonComponent({ text:'+',onClick:async()=>{awaitthis.modifyCartItemQuantity(item.cartItemId, item.quantity +1);}, disabled: item.quantity >=10});}.width('auto').height('auto');ButtonComponent({ text:'删除',onClick:async()=>{awaitthis.deleteCartItem(item.cartItemId);}, disabled:false});}.width('100%').height('auto').padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom:8});},onItemClick:(item: cart.CartItem, index:number)=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}});ButtonComponent({ text:'清空购物车',onClick:async()=>{awaitthis.clearCart();}, disabled:this.cartList.length ===0});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化购物车管理 CartManagementUtil.getInstance().init();// 获取购物车列表this.getCartList();}asyncgetCartList():Promise<void>{this.cartList =await CartManagementUtil.getInstance().getCartList();}asyncmodifyCartItemQuantity(cartItemId:number, quantity:number):Promise<void>{const result =await CartManagementUtil.getInstance().modifyCartItemQuantity(cartItemId, quantity);if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'修改购物车商品数量失败'});}}asyncdeleteCartItem(cartItemId:number):Promise<void>{const result =await CartManagementUtil.getInstance().deleteCartItem(cartItemId);if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'删除购物车商品失败'});}}asyncclearCart():Promise<void>{const result =await CartManagementUtil.getInstance().clearCart();if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'清空购物车失败'});}}}

五、 项目配置与部署 🚀

5.1 配置文件修改

1. module.json5修改

在「entry/src/main/module.json5」中添加用户管理、商品列表、购物车配置：

{"module":{"requestPermissions":[// ...],"abilities":[// ...],"widgets":[// ...],"pages":[// ...]}}

5.2 🔧 项目部署

1. 编译项目

在DevEco Studio中点击「Build」→「Build HAP」，编译项目。

2. 部署到设备

将编译后的HAP文件部署到鸿蒙设备上。

3. 测试用户管理、商品列表、购物车
  • 在应用中查看用户注册的效果；
  • 在应用中查看用户登录的效果；
  • 在应用中查看用户信息管理的效果；
  • 在应用中查看商品列表的效果；
  • 在应用中查看商品详情的效果；
  • 在应用中查看商品搜索的效果；
  • 在应用中查看购物车列表的效果；
  • 在应用中查看添加商品到购物车的效果；
  • 在应用中查看修改购物车商品数量的效果；
  • 在应用中查看删除购物车商品的效果。

六、 项目运行与效果验证 📱

6.1 效果验证

✅ 用户管理：用户可以通过手机号、邮箱等方式注册；
✅ 用户登录：用户可以通过手机号、邮箱等方式登录；
✅ 用户信息管理：用户可以管理自己的个人信息；
✅ 商品列表：显示商品列表；
✅ 商品详情：显示商品详情；
✅ 商品搜索：搜索商品；
✅ 购物车管理：添加商品到购物车、修改购物车商品数量、删除购物车商品。

七、 总结与未来学习路径 🚀

7.1 总结

本文作为《鸿蒙APP开发从入门到精通》的第13篇，完成了：

  • 鸿蒙APP用户管理的定义与架构；
  • 用户注册、登录、用户信息管理的实现；
  • 商品列表、商品详情、商品搜索的实现；
  • 购物车管理的实现。

7.2 未来学习路径

  • 第14篇：鸿蒙电商购物车全栈项目——订单管理、支付管理、AI原生；
  • 第15篇：鸿蒙电商购物车全栈项目——用户增长、性能优化、Next原生合规；
  • 第16篇：鸿蒙电商购物车全栈项目——运维监控、生态运营、专属变现。

八、 结语 ✅

恭喜你！你已经完成了《鸿蒙APP开发从入门到精通》的第13篇，掌握了用户管理、商品列表、购物车的核心技术。

从现在开始，你已具备了开发鸿蒙电商购物车全栈项目的基础能力。未来的3篇文章将逐步构建一个完整的鸿蒙电商购物车全栈项目，并最终实现华为应用市场上架变现。

让我们一起期待鸿蒙生态的爆发！ 🎉🎉🎉

Read more

【OpenClaw从入门到精通】第10篇：OpenClaw生产环境部署全攻略：性能优化+安全加固+监控运维（2026实测版）

【OpenClaw从入门到精通】第10篇：OpenClaw生产环境部署全攻略：性能优化+安全加固+监控运维（2026实测版）

摘要：本文聚焦OpenClaw从测试环境走向生产环境的核心痛点，围绕“性能优化、安全加固、监控运维”三大维度展开实操讲解。先明确生产环境硬件/系统选型标准，再通过硬件层资源管控、模型调度策略、缓存优化等手段提升响应速度（实测响应效率提升50%+）；接着从网络、权限、数据三层构建安全防护体系，集成火山引擎安全方案拦截高危操作；最后落地TenacitOS可视化监控与Prometheus告警体系，配套完整故障排查清单和虚拟实战案例。全文所有配置、代码均经实测验证，兼顾新手入门实操性和进阶读者的生产级部署需求，帮助开发者真正实现OpenClaw从“能用”到“放心用”的跨越。 优质专栏欢迎订阅！ 【DeepSeek深度应用】【Python高阶开发：AI自动化与数据工程实战】【YOLOv11工业级实战】 【机器视觉：C# + HALCON】【大模型微调实战：平民级微调技术全解】 【人工智能之深度学习】【AI 赋能：Python 人工智能应用实战】【数字孪生与仿真技术实战指南】 【AI工程化落地与YOLOv8/v9实战】【C#工业上位机高级应用：高并发通信+性能优化】 【Java生产级避坑指南：

By Ne0inhk
ARM Linux 驱动开发篇--- Linux 并发与竞争实验（互斥体实现 LED 设备互斥访问）--- Ubuntu20.04互斥体实验

ARM Linux 驱动开发篇--- Linux 并发与竞争实验（互斥体实现 LED 设备互斥访问）--- Ubuntu20.04互斥体实验

🎬 渡水无言：个人主页渡水无言 ❄专栏传送门： 《linux专栏》《嵌入式linux驱动开发》《linux系统移植专栏》 ❄专栏传送门： 《freertos专栏》《STM32 HAL库专栏》 ⭐️流水不争先，争的是滔滔不绝  📚博主简介：第二十届中国研究生电子设计竞赛全国二等奖 |国家奖学金 | 省级三好学生 | 省级优秀毕业生获得者 | ZEEKLOG新星杯TOP18 | 半导纵横专栏博主 | 211在读研究生 在这里主要分享自己学习的linux嵌入式领域知识；有分享错误或者不足的地方欢迎大佬指导，也欢迎各位大佬互相三连 目录 前言  一、实验基础说明 1.1、互斥体简介 1.2 本次实验设计思路 二、硬件原理分析（看过之前博客的可以忽略） 三、实验程序编写 3.1 互斥体 LED 驱动代码（mutex.c） 3.2.1、设备结构体定义（28-39

By Ne0inhk
Flutter for OpenHarmony：swagger_dart_code_generator 接口代码自动化生成的救星（OpenAPI/Swagger） 深度解析与鸿蒙适配指南

Flutter for OpenHarmony：swagger_dart_code_generator 接口代码自动化生成的救星（OpenAPI/Swagger） 深度解析与鸿蒙适配指南

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net 前言 后端工程师扔给你一个 Swagger (OpenAPI) 文档地址，你会怎么做？ 1. 对着文档，手写 Dart Model 类（容易写错字段类型）。 2. 手写 Retrofit/Dio 的 API 接口定义（容易拼错 URL）。 3. 当后端修改了字段名，你对着报错修半天。 这是重复劳动的地狱。 swagger_dart_code_generator 可以将 Swagger (JSON/YAML) 文件直接转换为高质量的 Dart 代码，包括： * Model 类：支持 json_serializable，带 fromJson/

By Ne0inhk
Linux 开发别再卡壳！makefile/git/gdb 全流程实操 + 作业解析，新手看完直接用----《Hello Linux!》(5)

Linux 开发别再卡壳！makefile/git/gdb 全流程实操 + 作业解析，新手看完直接用----《Hello Linux!》(5)

文章目录 * 前言 * make/makefile * 文件的三个时间 * Linux第一个小程序－进度条 * 回车和换行 * 缓冲区 * 程序的代码展示 * git指令 * 关于gitee * Linux调试器-gdb使用 * 作业部分 前言 做 Linux 开发时，你是不是也遇到过这些 “卡脖子” 时刻？写 makefile 时，明明语法没错却报错，最后发现是依赖方法行没加 Tab；想提交代码到 gitee，记不清 git add/commit/push 的 “三板斧”，还得反复搜教程；用 gdb 调试程序，输了命令没反应，才想起编译时没加-g生成 debug 版本；甚至连写个进度条，都搞不懂\r和\n的区别，导致进度条乱跳…… 其实这些问题，

By Ne0inhk