鸿蒙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

尚硅谷2025最新SpringCloud速通-操作步骤（详细）

尚硅谷2025最新SpringCloud速通-操作步骤（详细）

说明：本文是基于【雷丰阳老师：尚硅谷2025最新SpringCloud - 快速通关】进行实践操作，并对雷神的笔记做一个更详细的补充，供大家学习参考，一起加油！ 视频地址：1、SpringCloud快速通关_教程简介_哔哩哔哩_bilibili 笔记链接：3. SpringCloud - 快速通关 资料：📎资料.zip（代码+课件+逻辑图） 本人代码：📎springcloud-demo.zip 用于测试API接口的工具：Apipost IDEA自动提示代码插件：通义灵码 目录 目录 springcloud简介 前期准备 建springcloud-demo项目 导依赖 建services模块 导入依赖 建service-order/product模块 nacos - 注册/配置中心 基础入门 注册中心

By Ne0inhk
计算机毕业设计springboot礼物商城的设计与实践 基于SpringBoot的个性化礼品电商平台的设计与实现 基于Java Web的创意礼物在线销售系统的设计与开发

计算机毕业设计springboot礼物商城的设计与实践 基于SpringBoot的个性化礼品电商平台的设计与实现 基于Java Web的创意礼物在线销售系统的设计与开发

计算机毕业设计springboot礼物商城的设计与实践917jxi80（配套有源码 程序 mysql数据库 论文） 本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。 1. 随着消费升级和社交需求的多元化发展，礼品经济正迎来前所未有的增长机遇。传统礼品采购模式存在选品单一、缺乏个性、购买不便等痛点，难以满足当代消费者对情感表达和独特体验的追求。与此同时，电子商务技术的成熟为礼品行业数字化转型提供了坚实基础，个性化定制与线上购物的深度融合成为行业发展的新趋势。本系统正是在此背景下应运而生，旨在构建一个集礼品展示、个性定制、便捷交易于一体的综合性电商平台，通过技术手段赋能传统礼品行业，提升用户送礼体验，推动礼品消费向品质化、个性化方向发展。 本系统采用SpringBoot作为核心开发框架，结合Vue前端技术实现前后端分离架构，选用MySQL数据库存储业务数据，B/S架构确保系统的可访问性和易维护性。系统围绕用户购物体验和管理者运营需求展开设计，涵盖从商品浏览到订单完成的全流程业务闭环。前台为用户提供礼品信息浏览、个性化搜索筛选、购物车管理、在线支付、订单跟踪

By Ne0inhk
AI Agent 架构详解：感知-决策-执行的三位一体（基于最新研究论文）

AI Agent 架构详解：感知-决策-执行的三位一体（基于最新研究论文）

玄同 765 大语言模型 (LLM) 开发工程师 | 中国传媒大学 · 数字媒体技术（智能交互与游戏设计） ZEEKLOG · 个人主页 | GitHub · Follow 关于作者 * 深耕领域：大语言模型开发 / RAG 知识库 / AI Agent 落地 / 模型微调 * 技术栈：Python | RAG (LangChain / Dify + Milvus) | FastAPI + Docker * 工程能力：专注模型工程化部署、知识库构建与优化，擅长全流程解决方案 「让 AI 交互更智能，让技术落地更高效」 欢迎技术探讨与项目合作，解锁大模型与智能交互的无限可能！ AI Agent 架构详解：感知-决策-执行的三位一体 从 ReAct 到 Plan-and-Execute，从单智能体到多智能体协作，AI Agent

By Ne0inhk
Spring Boot自动配置魔法与@EnableAutoConfiguration原理揭秘

Spring Boot自动配置魔法与@EnableAutoConfiguration原理揭秘

目录 🎯 先说说我被自动配置"坑"的经历 ✨ 摘要 1. 自动配置不是魔法，是精妙的设计 1.1 从Spring的"配置地狱"到Spring Boot的"零配置" 2. @EnableAutoConfiguration：自动配置的"开关" 2.1 解剖@SpringBootApplication 2.2 @EnableAutoConfiguration的工作原理 3. SpringFactoriesLoader：自动配置的"寻宝图" 3.1 spring.factories文件的秘密 3.2 自定义自动配置：你也成为"魔法师&

By Ne0inhk