鸿蒙电商购物车全栈项目：用户管理、商品列表与购物车实现

项目架构图

内容承接与核心价值

本文是鸿蒙电商购物车全栈项目的核心篇章，完成基础功能实现。

学习目标：

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

学习重点：

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

一、用户管理基础

1.1 用户管理定义

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

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

1.2 用户管理架构

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

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

二、用户管理实战

2.1 实战目标

基于项目架构，实现以下功能：

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

2.2 用户注册实现

1. 用户注册工具类

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;
    }
}

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 () => {
                    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: '注册失败' });
        }
    }
}

2.3 用户登录实现

1. 用户登录工具类

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;
    }
}

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 () => {
                    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: '密码重置邮件发送失败' });
        }
    }
}

2.4 用户信息管理实现

1. 用户信息管理工具类

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;
    }
}

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 () => {
                    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: '修改密码失败' });
        }
    }
}

三、商品列表实战

3.1 实战目标

基于项目架构，实现以下功能：

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

3.2 商品列表实现

1. 商品列表工具类

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;
    }
}

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 () => {
                    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);
    }
}

3.3 商品详情实现

1. 商品详情工具类

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;
    }
}

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 () => {
                        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: '添加到购物车失败' });
        }
    }
}

四、购物车管理实战

4.1 实战目标

基于项目架构，实现以下功能：

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

4.2 购物车管理工具类

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;
    }
}

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 () => {
                                    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: '清空购物车失败' });
        }
    }
}

五、项目配置与部署

5.1 配置文件修改

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

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

5.2 项目部署

1. 编译项目

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

2. 部署到设备

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

3. 测试功能

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

六、项目运行与效果验证

6.1 效果验证

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

七、总结

本文完成了鸿蒙电商购物车全栈项目的核心模块开发：

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

后续章节将逐步完善订单管理、支付管理及性能优化等内容。

鸿蒙电商购物车全栈项目：用户管理、商品列表与购物车实现