鸿蒙电商购物车全栈项目:用户管理、商品列表与购物车实现
本文介绍了基于鸿蒙系统的电商购物车全栈项目开发,涵盖用户管理(注册、登录、信息管理)、商品列表(展示、详情、搜索)及购物车管理(添加、修改数量、删除)的核心功能实现。通过 ArkTS 语言结合单例模式封装工具类,实现了分层架构下的业务逻辑处理,并完成了项目配置与部署验证。代码示例展示了页面组件构建、状态管理及路由跳转等关键步骤,为开发者提供了完整的参考实现。

本文介绍了基于鸿蒙系统的电商购物车全栈项目开发,涵盖用户管理(注册、登录、信息管理)、商品列表(展示、详情、搜索)及购物车管理(添加、修改数量、删除)的核心功能实现。通过 ArkTS 语言结合单例模式封装工具类,实现了分层架构下的业务逻辑处理,并完成了项目配置与部署验证。代码示例展示了页面组件构建、状态管理及路由跳转等关键步骤,为开发者提供了完整的参考实现。

本文是鸿蒙电商购物车全栈项目的核心篇章,完成基础功能实现。
学习目标:
学习重点:
用户管理是指对应用的用户进行管理,主要包括以下方面:
用户管理采用分层架构,由以下部分组成:
基于项目架构,实现以下功能:
entry/src/main/ets/utils/UserRegistrationUtil.ets
import user from '@ohos.user';
// 用户注册工具类
export class UserRegistrationUtil {
private static instance: UserRegistrationUtil | null = null;
private userHelper: user.UserHelper | null = null;
// 单例模式
static getInstance(): UserRegistrationUtil {
if (!UserRegistrationUtil.instance) {
UserRegistrationUtil.instance = new UserRegistrationUtil();
}
return UserRegistrationUtil.instance;
}
// 初始化用户注册
async init(): Promise<void> {
if (!this.userHelper) {
this.userHelper = user.createUserHelper();
}
}
// 用户注册
async register(email: string, password: string): Promise<user.UserRegistrationResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.register(email, password);
return result;
}
// 发送验证码
async sendVerificationCode(email: string): Promise<user.SendVerificationCodeResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.sendVerificationCode(email);
return result;
}
}
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 () => {
await this.sendVerificationCode();
},
disabled: !this.email
});
ButtonComponent({
text: '注册',
onClick: async () => {
await this.register();
},
disabled: !this.email || !this.password || !this.verificationCode
});
}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');
}
aboutToAppear() {
// 初始化用户注册
UserRegistrationUtil.getInstance().init();
}
async sendVerificationCode(): Promise<void> {
const result = await UserRegistrationUtil.getInstance().sendVerificationCode(this.email);
if (result.success) {
promptAction.showToast({ message: '验证码发送成功' });
} else {
promptAction.showToast({ message: '验证码发送失败' });
}
}
async register(): 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: '注册失败' });
}
}
}
entry/src/main/ets/utils/UserLoginUtil.ets
import user from '@ohos.user';
// 用户登录工具类
export class UserLoginUtil {
private static instance: UserLoginUtil | null = null;
private userHelper: user.UserHelper | null = null;
// 单例模式
static getInstance(): UserLoginUtil {
if (!UserLoginUtil.instance) {
UserLoginUtil.instance = new UserLoginUtil();
}
return UserLoginUtil.instance;
}
// 初始化用户登录
async init(): Promise<void> {
if (!this.userHelper) {
this.userHelper = user.createUserHelper();
}
}
// 用户登录
async login(email: string, password: string): Promise<user.UserLoginResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.login(email, password);
return result;
}
// 忘记密码
async forgetPassword(email: string): Promise<user.ForgetPasswordResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.forgetPassword(email);
return result;
}
}
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 () => {
await this.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();
}
async login(): 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: '登录失败' });
}
}
async forgetPassword(): Promise<void> {
const result = await UserLoginUtil.getInstance().forgetPassword(this.email);
if (result.success) {
promptAction.showToast({ message: '密码重置邮件已发送' });
} else {
promptAction.showToast({ message: '密码重置邮件发送失败' });
}
}
}
entry/src/main/ets/utils/UserInformationManagementUtil.ets
import user from '@ohos.user';
// 用户信息管理工具类
export class UserInformationManagementUtil {
private static instance: UserInformationManagementUtil | null = null;
private userHelper: user.UserHelper | null = null;
// 单例模式
static getInstance(): UserInformationManagementUtil {
if (!UserInformationManagementUtil.instance) {
UserInformationManagementUtil.instance = new UserInformationManagementUtil();
}
return UserInformationManagementUtil.instance;
}
// 初始化用户信息管理
async init(): Promise<void> {
if (!this.userHelper) {
this.userHelper = user.createUserHelper();
}
}
// 获取用户信息
async getUserInformation(): Promise<user.UserInformation> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.getUserInformation();
return result;
}
// 修改用户信息
async modifyUserInformation(information: user.UserInformation): Promise<user.ModifyUserInformationResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.modifyUserInformation(information);
return result;
}
// 修改密码
async modifyPassword(oldPassword: string, newPassword: string): Promise<user.ModifyPasswordResult> {
if (!this.userHelper) {
return null;
}
const result = await this.userHelper.modifyPassword(oldPassword, newPassword);
return result;
}
}
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 () => {
await this.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 () => {
await this.modifyPassword();
},
disabled: !this.oldPassword || !this.newPassword
});
}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');
}
aboutToAppear() {
// 初始化用户信息管理
UserInformationManagementUtil.getInstance().init();
// 获取用户信息
this.getUserInformation();
}
async getUserInformation(): Promise<void> {
this.userInformation = await UserInformationManagementUtil.getInstance().getUserInformation();
this.name = this.userInformation?.name ?? '';
this.avatarUrl = this.userInformation?.avatarUrl ?? '';
}
async modifyUserInformation(): 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: '修改用户信息失败' });
}
}
async modifyPassword(): 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: '修改密码失败' });
}
}
}
基于项目架构,实现以下功能:
entry/src/main/ets/utils/ProductListUtil.ets
import product from '@ohos.product';
// 商品列表工具类
export class ProductListUtil {
private static instance: ProductListUtil | null = null;
private productHelper: product.ProductHelper | null = null;
// 单例模式
static getInstance(): ProductListUtil {
if (!ProductListUtil.instance) {
ProductListUtil.instance = new ProductListUtil();
}
return ProductListUtil.instance;
}
// 初始化商品列表
async init(): Promise<void> {
if (!this.productHelper) {
this.productHelper = product.createProductHelper();
}
}
// 获取商品列表
async getProductList(): Promise<Array<product.Product>> {
if (!this.productHelper) {
return [];
}
const result = await this.productHelper.getProductList();
return result;
}
// 搜索商品
async searchProduct(keyword: string): Promise<Array<product.Product>> {
if (!this.productHelper) {
return [];
}
const result = await this.productHelper.searchProduct(keyword);
return result;
}
}
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 () => {
await this.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();
}
async getProductList(): Promise<void> {
this.productList = await ProductListUtil.getInstance().getProductList();
}
async searchProduct(): Promise<void> {
this.productList = await ProductListUtil.getInstance().searchProduct(this.searchKeyword);
}
}
entry/src/main/ets/utils/ProductDetailUtil.ets
import product from '@ohos.product';
// 商品详情工具类
export class ProductDetailUtil {
private static instance: ProductDetailUtil | null = null;
private productHelper: product.ProductHelper | null = null;
// 单例模式
static getInstance(): ProductDetailUtil {
if (!ProductDetailUtil.instance) {
ProductDetailUtil.instance = new ProductDetailUtil();
}
return ProductDetailUtil.instance;
}
// 初始化商品详情
async init(): Promise<void> {
if (!this.productHelper) {
this.productHelper = product.createProductHelper();
}
}
// 获取商品详情
async getProductDetail(productId: number): Promise<product.Product> {
if (!this.productHelper) {
return null;
}
const result = await this.productHelper.getProductDetail(productId);
return result;
}
// 添加到购物车
async addToCart(productId: number, quantity: number): Promise<product.AddToCartResult> {
if (!this.productHelper) {
return null;
}
const result = await this.productHelper.addToCart(productId, quantity);
return result;
}
}
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 () => {
await this.addToCart();
},
disabled: !this.product
});
}
}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');
}
aboutToAppear() {
// 初始化商品详情
ProductDetailUtil.getInstance().init();
// 初始化购物车管理
CartManagementUtil.getInstance().init();
// 获取商品详情
this.getProductDetail();
}
async getProductDetail(): Promise<void> {
const params = router.getParams() as { productId: number };
this.productId = params.productId;
this.product = await ProductDetailUtil.getInstance().getProductDetail(this.productId);
}
async addToCart(): Promise<void> {
const result = await CartManagementUtil.getInstance().addToCart(this.productId, this.quantity);
if (result.success) {
promptAction.showToast({ message: '添加到购物车成功' });
} else {
promptAction.showToast({ message: '添加到购物车失败' });
}
}
}
基于项目架构,实现以下功能:
entry/src/main/ets/utils/CartManagementUtil.ets
import cart from '@ohos.cart';
// 购物车管理工具类
export class CartManagementUtil {
private static instance: CartManagementUtil | null = null;
private cartHelper: cart.CartHelper | null = null;
// 单例模式
static getInstance(): CartManagementUtil {
if (!CartManagementUtil.instance) {
CartManagementUtil.instance = new CartManagementUtil();
}
return CartManagementUtil.instance;
}
// 初始化购物车管理
async init(): Promise<void> {
if (!this.cartHelper) {
this.cartHelper = cart.createCartHelper();
}
}
// 获取购物车列表
async getCartList(): Promise<Array<cart.CartItem>> {
if (!this.cartHelper) {
return [];
}
const result = await this.cartHelper.getCartList();
return result;
}
// 添加商品到购物车
async addToCart(productId: number, quantity: number): Promise<cart.AddToCartResult> {
if (!this.cartHelper) {
return null;
}
const result = await this.cartHelper.addToCart(productId, quantity);
return result;
}
// 修改购物车商品数量
async modifyCartItemQuantity(cartItemId: number, quantity: number): Promise<cart.ModifyCartItemQuantityResult> {
if (!this.cartHelper) {
return null;
}
const result = await this.cartHelper.modifyCartItemQuantity(cartItemId, quantity);
return result;
}
// 删除购物车商品
async deleteCartItem(cartItemId: number): Promise<cart.DeleteCartItemResult> {
if (!this.cartHelper) {
return null;
}
const result = await this.cartHelper.deleteCartItem(cartItemId);
return result;
}
// 清空购物车
async clearCart(): Promise<cart.ClearCartResult> {
if (!this.cartHelper) {
return null;
}
const result = await this.cartHelper.clearCart();
return result;
}
}
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 () => {
await this.modifyCartItemQuantity(item.cartItemId, item.quantity - 1);
},
disabled: item.quantity <= 1
});
Text(`${item.quantity}`).fontSize(14).textColor('#000000');
ButtonComponent({
text: '+',
onClick: async () => {
await this.modifyCartItemQuantity(item.cartItemId, item.quantity + 1);
},
disabled: item.quantity >= 10
});
}.width('auto').height('auto');
ButtonComponent({
text: '删除',
onClick: async () => {
await this.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 () => {
await this.clearCart();
},
disabled: this.cartList.length === 0
});
}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');
}
aboutToAppear() {
// 初始化购物车管理
CartManagementUtil.getInstance().init();
// 获取购物车列表
this.getCartList();
}
async getCartList(): Promise<void> {
this.cartList = await CartManagementUtil.getInstance().getCartList();
}
async modifyCartItemQuantity(cartItemId: number, quantity: number): Promise<void> {
const result = await CartManagementUtil.getInstance().modifyCartItemQuantity(cartItemId, quantity);
if (result.success) {
this.getCartList();
} else {
promptAction.showToast({ message: '修改购物车商品数量失败' });
}
}
async deleteCartItem(cartItemId: number): Promise<void> {
const result = await CartManagementUtil.getInstance().deleteCartItem(cartItemId);
if (result.success) {
this.getCartList();
} else {
promptAction.showToast({ message: '删除购物车商品失败' });
}
}
async clearCart(): Promise<void> {
const result = await CartManagementUtil.getInstance().clearCart();
if (result.success) {
this.getCartList();
} else {
promptAction.showToast({ message: '清空购物车失败' });
}
}
}
在 entry/src/main/module.json5 中添加用户管理、商品列表、购物车配置:
{
"module": {
"requestPermissions": [],
"abilities": [],
"widgets": [],
"pages": []
}
}
在 DevEco Studio 中点击「Build」→「Build HAP」,编译项目。
将编译后的 HAP 文件部署到鸿蒙设备上。
本文完成了鸿蒙电商购物车全栈项目的核心模块开发:
后续章节将逐步完善订单管理、支付管理及性能优化等内容。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online