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

Windows系统上Python如何升级及版本管理

Windows系统上Python如何升级及版本管理

前言 用户经常在使用python时候，发现版本升级过快，不同的项目可能用到不同的python版本，本文就windows下，关于Python 3.11 升级到 Python 3.12做一个简单的记录和介绍。希望能帮助到你。 一、版本确认与环境准备 1. 检查当前版本 在命令提示符中输入：         python --version 若显示Python 3.11.x，则说明当前环境为目标升级前状态。 1. 备份关键数据 对于需要升级的项目，可以导出依赖列表： pip freeze > requirements.txt 备份项目文件和配置文件至安全目录。 二、升级路径选择 （一）官方安装程序升级（推荐） 1. 下载 Python 3.12 安装包 访问Python 官方下载页面，选择Windows installer

By Ne0inhk
Python爬虫（54）Python数据治理全攻略：从爬虫清洗到NLP情感分析的实战演进

Python爬虫（54）Python数据治理全攻略：从爬虫清洗到NLP情感分析的实战演进

目录 * 引言：数据价值炼金术的三大挑战 * 一、项目背景：某跨境电商平台评论治理需求 * 二、智能爬虫系统架构设计 * 2.1 分布式爬虫实现 * 2.2 原始数据质量探查 * 三、Pandas数据清洗进阶实践 * 3.1 复合去重策略 * 3.1.1 精确去重增强版 * 3.1.2 语义去重深度优化 * 3.2 智能缺失值处理 * 3.2.1 数值型字段混合填充 * 3.2.2 文本型字段深度填充 * 四、Great Expectations数据质量验证体系 * 4.1 高级验证规则配置 * 4.2 自动化验证工作流 * 五、NLP情感分析深度集成 * 5.

By Ne0inhk
Python数学可视化——显函数、隐函数及复杂曲线的交互式绘图技术

Python数学可视化——显函数、隐函数及复杂曲线的交互式绘图技术

Python数学可视化——显函数、隐函数及复杂曲线的交互式绘图技术 一、引言 在科学计算和数据分析中，函数与方程的可视化是理解数学关系和物理现象的重要工具。本文基于Python的Tkinter和Matplotlib库，实现一个功能完善的函数与方程可视化工具，支持显函数、隐函数、特殊曲线（如心形线）及物理场分布（如电势）的交互式绘图，并提供安全的表达式解析、图像保存等功能。 二、核心技术架构 2.1 系统架构与技术选型 * 界面层：使用Tkinter构建GUI，包含类型选择、表达式输入、预设函数下拉菜单等控件 * 计算层： * 显函数：通过np.linspace生成采样点，安全计算函数值 * 隐函数：基于等高线算法contour绘制等值线 * 安全机制：通过正则表达式过滤非法字符，限制白名单函数防止代码注入 * 可视化层：Matplotlib实现图表渲染，支持动态更新和交互式工具条 2.2 安全表达式解析 defis_valid_expression(expr):""

By Ne0inhk
2025年中秋月亮只有94.91%圆？Python告诉你真相

2025年中秋月亮只有94.91%圆？Python告诉你真相

前言： 又是一年中秋节，祝大家中秋快乐！作为程序员的我们，还有谁和我一样在外奔波而不能回家，想和大家说一声辛苦啦！既然不能回家吃月饼、赏明月，那我是不是也能用代码写下属于自己的中秋记忆，为朋友们送去我们自己特殊的中秋祝福，让技术和传统节日碰撞出新的火花。 本文目录： * 一、月相计算：今晚的月亮到底有多圆 * 1. 月相可视化 * 二、月饼切分算法：公平分配的艺术 * 1. 经典切分策略 * 2. 进阶问题：不过圆心的切分 * 三、诗词生成：中秋凑诗 * 四、月球数据可视化：用数据看月亮 * 1. 先画月球表面：模拟环形山地形 * 2. 再做月相动画：看一个月月亮怎么变 * 五、中秋快乐，记得吃月饼🥮 * 写在最后 一、月相计算：今晚的月亮到底有多圆 今天是中秋节，刷朋友圈的时候突然想到一个问题：今年中秋的月亮到底有多圆？作为Python开发者，我决定用代码来算一算。顺便整理了几个和中秋相关的有趣项目，

By Ne0inhk