HarmonyOS NEXT 头像制作项目系列教程之 --- 数据结构设计

头像
全栈若城
     北京
    阅读 27 分钟

    项目源码地址

    项目源码已发布到GitCode平台, 方便开发者进行下载和使用。
    harmonyOSAvatar

    项目效果演示

    主页面效果如下：

    侧边栏效果如下

    前言

    在开发HarmonyOS头像编辑器应用时，合理的数据结构设计是应用稳定运行的基础。本文将详细介绍头像编辑器中的数据模型设计，包括节日分类、背景图片和头像装饰图片的数据结构，以及它们之间的关联关系。通过本教程，您将了解如何构建类似的数据模型，为开发类似应用提供参考。

    数据模型概览

    头像编辑器应用主要包含以下几个核心数据模型：

    1. FestivalClass：节日分类数据模型，用于侧边栏一级列表展示
    2. FestivalBgClass：节日背景图片数据模型，提供头像制作的背景图片
    3. PhotoClass：头像装饰图片数据模型，提供各种装饰元素
    4. btnContentClass：按钮内容数据模型，用于界面交互元素

    这些数据模型通过统一的导出文件（Index.ets）进行管理，便于在应用的不同部分进行引用。

    数据模型详解

    注意:以下提供的数据源均为完整的数据, 可以直接使用, 但是还是建议开发者将数据存放到本地进行访问使用,避免因其他原因导致数据无法正常访问.

    1. 节日分类数据模型（FestivalClass）

    // 侧边栏 一级列表名称
export class FestivalClass {
  id: string;   // 节日唯一标识
  cid: string;  // 分类ID
  name: string; // 节日名称

  constructor(id: string, cid: string, name: string) {
    this.id = id
    this.cid = cid
    this.name = name
  }
}

    FestivalClass 是侧边栏一级列表的数据模型，包含三个属性：

    • id：节日的唯一标识，用于关联其他数据模型
    • cid：分类ID，用于后端数据关联
    • name：节日名称，用于界面显示

    应用中预定义了多个节日分类，如万圣节、圣诞节、元旦节等，存储在 festivalList 数组中：

    export const festivalList: FestivalClass[] = [
   new FestivalClass('1650683207212647089', '62636d324324b900017a5413', '万圣节' ),
  new FestivalClass('1650683835580676621', '62636f96cdf479000190a95b', '圣诞节' ),
  new FestivalClass('1650684660323916490', '626372e45731c7000174b34a', '元旦节' ),
  new FestivalClass('1650692755504052343', '626392246099e40001c5104f', '元宵节' ),
  new FestivalClass('1650695656023780869', '62639dc5296d9e00011a7181', '中秋节' ),
  new FestivalClass('1650696118506238899', '62639f9c611ce500015b51f2', '情人节' ),
  new FestivalClass('1650697135231280090', '6263a309296d9e00011b3c7f', '春节' ),
  new FestivalClass('1651312490431994916', '626369f377a7c600012bad7f', '劳动节' ),
  new FestivalClass('1656644092306170680', '62be61b79b54e30001ef5461', '建党101周年' ),
  new FestivalClass('1658203003755019189', '62d62b61fd3e32000198a493', '王者荣耀' ),
  new FestivalClass('1653720061940633883', '6291c37406b1e20001dee324', '端午节' ),
  new FestivalClass('1664621641821766999', '626d05e010ec0f00014b21f1', '国庆新款' ),
  new FestivalClass('1650682541774561616', '626d05e010ec0f00014b21f1', '国庆节' ),
  new FestivalClass('1653720045809883074', '6291c37406b1e20001dee324', '端午安康' ),
  new FestivalClass('1650682527390524316', '626d05e010ec0f00014b21f1', '渐变头像' ),
  new FestivalClass('1653720081216161902', '6291c37406b1e20001dee324', '端午挂件' ),
  new FestivalClass('1664621627242008060', '626d05e010ec0f00014b21f1', '其他' ),

];

    2. 节日背景图片数据模型（FestivalBgClass）

    // 头像制作中背景图相关内容/数据
export class FestivalBgClass {
  id: string;      // 背景图唯一标识
  img: string;     // 背景图URL
  name: string;    // 背景图名称
  title: string;   // 背景图标题
  titleImg: string; // 标题图片URL
  hasSele: boolean; // 是否被选中
  
  constructor(id: string, img: string, name: string, title: string, titleImg: string, hasSele: boolean) {
    this.id = id
    this.img = img
    this.name = name
    this.title = title
    this.titleImg = titleImg
    this.hasSele = hasSele
  }
}

    FestivalBgClass 是头像制作中背景图的数据模型，包含六个属性：

    • id：背景图唯一标识，与节日分类中的cid关联
    • img：背景图片的URL地址
    • name：背景图名称
    • title：背景图标题，用于界面提示
    • titleImg：标题图片URL
    • hasSele：是否被选中的状态标记

    应用中预定义了多个节日背景图，存储在 FestivalBgList 数组中：

    export const FestivalBgList: FestivalBgClass[] = [
  new FestivalBgClass('626d05e010ec0f00014b21f1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/0.jpg', '国庆节','和我一起使用国庆节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/0.png', false  ),
  new FestivalBgClass('62636f96cdf479000190a95b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/1.jpg', '圣诞节','和我一起使用圣诞节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/1.png' , false ),
  new FestivalBgClass('6263a309296d9e00011b3c7f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/2.jpg', '春节','和我一起使用春节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/2.png', false  ),
  new FestivalBgClass('626392246099e40001c5104f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/3.jpg', '元宵节','和我一起使用元宵节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/3.png', false  ),
  new FestivalBgClass('626369f377a7c600012bad7f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/4.jpg', '劳动节','和我一起使用劳动节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/4.png' , false ),
  new FestivalBgClass('62639f9c611ce500015b51f2', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/5.jpg', '情人节','和我一起使用情人节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/5.png', false  ),
  new FestivalBgClass('626372e45731c7000174b34a', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/6.jpg', '元旦节','和我一起使用元旦节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/6.png', false  ),
  new FestivalBgClass('62639dc5296d9e00011a7181', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/7.jpg', '中秋节','和我一起使用中秋节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/7.png', false  ),
  new FestivalBgClass('6291c37406b1e20001dee324', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/8.jpg', '端午节','和我一起使用端午节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/8.png' , false ),
  new FestivalBgClass('62be61b79b54e30001ef5461', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/9.jpg', '七一建党节','快来领取你的建党头像吧','https://image.jushubiotech.com/rc/facemacker/bgimg/9.jpg', false  ),
  new FestivalBgClass('62d62b61fd3e32000198a493', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/10.png', '王者荣耀','快来领取你的王者头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/10.png' , false ),
  new FestivalBgClass('62636d324324b900017a5413', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/bgimg/11.jpg', '万圣节','和我一起使用万圣节头像吧','https://image.jushubiotech.com/rc/facemacker/titeImg/11.png', false  ),

];

    3. 头像装饰图片数据模型（PhotoClass）

    // 头像装饰的图片
export class PhotoClass {
  id: string;   // 装饰图片唯一标识
  img: string;  // 装饰图片URL
  cid: string;  // 分类ID，关联到节日分类

  constructor(id: string, img: string, cid: string) {
    this.id = id
    this.img = img
    this.cid = cid
  }
}

    PhotoClass 是头像装饰图片的数据模型，包含三个属性：

    • id：装饰图片唯一标识
    • img：装饰图片的URL地址
    • cid：分类ID，关联到节日分类的id，表明该装饰图片属于哪个节日分类

    应用中预定义了大量装饰图片，存储在 PhotoList 数组中：

    export const PhotoList: PhotoClass[] = [
  new PhotoClass('626d6ac48d55d0000183d4da', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/1.png', '1650682527390524316' ),
  new PhotoClass('626d6acecd9e47000121491a', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/2.png', '1650682527390524316' ),
  new PhotoClass('626d6ad78d55d0000183d587', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/3.png', '1650682527390524316' ),
  new PhotoClass('626d6b070a84cf00013d2e30', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/4.png', '1650682527390524316' ),
  new PhotoClass('626d6b100a84cf00013d2e89', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/5.png', '1650682527390524316' ),
  new PhotoClass('626d6b225e2c570001de9d17', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/6.png', '1650682527390524316' ),
  new PhotoClass('626d6b3cb76df100017606eb', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/7.png', '1650682541774561616' ),
  new PhotoClass('626d6b453894c10001b8c07d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/8.png', '1650682541774561616' ),
  new PhotoClass('626d6b52b5d7410001e9f623', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/9.png', '1650682541774561616' ),
  new PhotoClass('626d6b5fb5d7410001e9f69b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/10.png', '1650682541774561616' ),
  new PhotoClass('626d6b6d186bfc0001343020', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/11.png', '1650682541774561616' ),
  new PhotoClass('626d6b985e2c570001dea162', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/12.png', '1650682541774561616' ),
  new PhotoClass('626d6c95c016f40001dc7fd4', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/13.png', '1650682541774561616' ),
  new PhotoClass('626d6cbb6099e40001fb8ef6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/14.png', '1650682541774561616' ),
  new PhotoClass('626d6ccf77a7c6000168a52e', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/15.png', '1650682541774561616' ),
  new PhotoClass('626d6cdb5a5bf0000180a843', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/16.png', '1650682541774561616' ),
  new PhotoClass('626d6ce71b29930001a91f5d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/17.png', '1650682541774561616' ),
  new PhotoClass('626d6d17b5d7410001ea056b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/18.png', '1650682541774561616' ),
  new PhotoClass('626d6d2b186bfc0001343f83', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/19.png', '1650682541774561616' ),
  new PhotoClass('626d6d3f2a9fda0001957753', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/20.png', '1650682541774561616' ),
  new PhotoClass('626d6d5177a7c6000168a996', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/21.png', '1650682541774561616' ),
  new PhotoClass('626d6d658cc5730001a35cc4', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/22.png', '1650682541774561616' ),
  new PhotoClass('626d6d73c016f40001dc874c', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/23.png', '1650682541774561616' ),
  new PhotoClass('626d6d826099e40001fb95c3', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/24.png', '1650682541774561616' ),
  new PhotoClass('626d6d96cd9e47000121620c', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/25.png', '1650682541774561616' ),
  new PhotoClass('626d6db30a84cf00013d46e1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/26.png', '1650683207212647089' ),
  new PhotoClass('626d6dbf5ac7c500014d782d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/27.png', '1650683207212647089' ),
  new PhotoClass('626d6dc8b5d7410001ea0b1f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/28.png', '1650683207212647089' ),
  new PhotoClass('626d6dd1a6a721000138819e', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/29.png', '1650683207212647089' ),
  new PhotoClass('626d6dda0a84cf00013d4841', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/30.png', '1650683207212647089' ),
  new PhotoClass('626d6de577a7c6000168ae70', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/31.png', '1650683207212647089' ),
  new PhotoClass('626d6e1d308aaf0001ea6da6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/32.png', '1650683440871965125' ),
  new PhotoClass('626d6e2a3894c10001b8d9e4', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/33.png', '1650683440871965125' ),
  new PhotoClass('626d6e391b29930001a92aa1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/34.png', '1650683440871965125' ),
  new PhotoClass('626d6e5aa8598000012534e8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/35.png', '1650683440871965125' ),
  new PhotoClass('626d6e63a6a7210001388636', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/36.png', '1650683440871965125' ),
  new PhotoClass('626d6e71cd9e4700012168de', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/37.png', '1650683440871965125' ),
  new PhotoClass('626d6e7f2a9fda00019581eb', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/38.png', '1650683440871965125' ),
  new PhotoClass('626d6e8cb6fe290001428708', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/39.png', '1650683440871965125' ),
  new PhotoClass('626d6ef477a7c6000168b722', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/40.png', '1650683835580676621' ),
  new PhotoClass('626d6efdeb12470001141d65', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/41.png', '1650683835580676621' ),
  new PhotoClass('626d6f078cc5730001a369c7', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/42.png', '1650683835580676621' ),
  new PhotoClass('626d6f1b1b29930001a93196', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/43.png', '1650683835580676621' ),
  new PhotoClass('626d6f27b6fe290001428bfd', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/44.png', '1650683835580676621' ),
  new PhotoClass('626d6f3ca859800001253c10', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/45.png', '1650684660323916490' ),
  new PhotoClass('626d704eb6fe290001429546', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/46.png', '1650684660323916490' ),
  new PhotoClass('626d7059b76df100017631a0', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/47.png', '1650684660323916490' ),
  new PhotoClass('626d70645ac7c500014d8d92', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/48.png', '1650684660323916490' ),
  new PhotoClass('626d70704324b90001b73a2b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/49.png', '1650684660323916490' ),
  new PhotoClass('626d7083186bfc0001345a02', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/50.png', '1650684660323916490' ),
  new PhotoClass('626d70adcd9e470001217a1d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/51.png', '1650684660323916490' ),
  new PhotoClass('626d70b85a5bf0000180c710', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/52.png', '1650684660323916490' ),
  new PhotoClass('626d70caeb9d4c0001fae22d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/53.png', '1650684660323916490' ),
  new PhotoClass('626d70e03894c10001b8ef09', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/54.png', '1650684660323916490' ),
  new PhotoClass('626d70eb77a7c6000168c650', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/55.png', '1650684660323916490' ),
  new PhotoClass('626d70f55731c70001b22ccb', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/56.png', '1650684660323916490' ),
  new PhotoClass('626d7101cdf4790001cce824', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/57.png', '1650684660323916490' ),
  new PhotoClass('626d71119a3d14000128dd05', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/58.png', '1650684660323916490' ),
  new PhotoClass('626d711feb9d4c0001fae4a6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/59.png', '1650684660323916490' ),
  new PhotoClass('626d7132611ce50001903338', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/60.png', '1650684660323916490' ),
  new PhotoClass('626d7146b76df100017638c1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/61.png', '1650692755504052343' ),
  new PhotoClass('626d7151a6a7210001389d51', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/62.png', '1650692755504052343' ),
  new PhotoClass('626d715da859800001254c16', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/63.png', '1650692755504052343' ),
  new PhotoClass('626d71689a3d14000128df89', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/64.png', '1650692755504052343' ),
  new PhotoClass('626d7190cd9e4700012180df', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/65.png', '1650692755504052343' ),
  new PhotoClass('626d71a9eb9d4c0001fae8d6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/66.png', '1650692755504052343' ),
  new PhotoClass('626d71b9308aaf0001ea8992', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/67.png', '1650695656023780869' ),
  new PhotoClass('626d71c45731c70001b232c8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/68.png', '1650695656023780869' ),
  new PhotoClass('626d71cfeb1247000114339b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/69.png', '1650695656023780869' ),
  new PhotoClass('626d71db10ec0f000154d61b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/70.png', '1650695656023780869' ),
  new PhotoClass('626d71ed77a7c6000168cdfd', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/71.png', '1650695656023780869' ),
  new PhotoClass('626d71f7c016f40001dcaaa2', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/72.png', '1650695656023780869' ),
  new PhotoClass('626d72083894c10001b8f7b8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/73.png', '1650696118506238899' ),
  new PhotoClass('626d72148d55d0000184113b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/74.png', '1650696118506238899' ),
  new PhotoClass('626d722477a7c6000168cf97', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/75.png', '1650696118506238899' ),
  new PhotoClass('626d72354324b90001b74768', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/76.png', '1650696118506238899' ),
  new PhotoClass('626d724c5a5bf0000180d2aa', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/77.png', '1650696118506238899' ),
  new PhotoClass('626d7271a859800001255457', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/78.png', '1650696118506238899' ),
  new PhotoClass('626d727d611ce50001903c3d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/79.png', '1650696118506238899' ),
  new PhotoClass('626d7291cd9e470001218825', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/80.png', '1650696118506238899' ),
  new PhotoClass('626d729c186bfc0001346973', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/81.png', '1650696118506238899' ),
  new PhotoClass('626d72aeb5d7410001ea3119', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/82.png', '1650697135231280090' ),
  new PhotoClass('626d72bc186bfc0001346a52', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/83.png', '1650697135231280090' ),
  new PhotoClass('626d72c8eb12470001143a9a', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/84.png', '1650697135231280090' ),
  new PhotoClass('626d72d4b6fe29000142a826', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/85.png', '1650697135231280090' ),
  new PhotoClass('626d72ea8cc5730001a38758', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/86.png', '1650697135231280090' ),
  new PhotoClass('626d72fab76df100017644c3', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/87.png', '1650697135231280090' ),
  new PhotoClass('626d730c5a5bf0000180d811', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/88.png', '1650697135231280090' ),
  new PhotoClass('626d73204324b90001b74dcb', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/89.png', '1650697135231280090' ),
  new PhotoClass('626d732b186bfc0001346d77', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/90.png', '1650697135231280090' ),
  new PhotoClass('626d733e8d55d00001841920', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/91.png', '1650697135231280090' ),
  new PhotoClass('626d73495a5bf0000180d9ce', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/92.png', '1650697135231280090' ),
  new PhotoClass('626d735fa6a721000138b038', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/93.png', '1650697135231280090' ),
  new PhotoClass('626d736f308aaf0001ea959e', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/94.png', '1650697135231280090' ),
  new PhotoClass('626d737a186bfc0001346f81', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/95.png', '1650697135231280090' ),
  new PhotoClass('626d7384296d9e00014fe054', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/96.png', '1650697135231280090' ),
  new PhotoClass('626d739c77a7c6000168d9d8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/97.png', '1651312490431994916' ),
  new PhotoClass('626d73a8a859800001255cc8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/98.png', '1651312490431994916' ),
  new PhotoClass('626d73b4eb9d4c0001faf74d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/99.png', '1651312490431994916' ),
  new PhotoClass('626d73bf8cc5730001a38d2a', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/100.png', '1651312490431994916' ),
  new PhotoClass('626d73ca5e2c570001dee228', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/101.png', '1651312490431994916' ),
  new PhotoClass('626d73d5308aaf0001ea9846', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/102.png', '1651312490431994916' ),
  new PhotoClass('6291c422cc12f40001bfcdca', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/103.png', '1653720045809883074' ),
  new PhotoClass('6291c4307696a80001e83b37', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/104.png', '1653720045809883074' ),
  new PhotoClass('6291c439c988150001dfba2b', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/105.png', '1653720045809883074' ),
  new PhotoClass('6291c443f17d020001119eaa', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/106.png', '1653720045809883074' ),
  new PhotoClass('6291c4517ab3bd000101bd81', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/107.png', '1653720045809883074' ),
  new PhotoClass('6291c45b68cebc00013df2da', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/108.png', '1653720045809883074' ),
  new PhotoClass('6291c47a0d08220001a0223d', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/109.png', '1653720045809883074' ),
  new PhotoClass('6291c493302d9f00012cc3d9', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/110.png', '1653720045809883074' ),
  new PhotoClass('6291c4a8d5771c0001640267', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/111.png', '1653720045809883074' ),
  new PhotoClass('6291c4b21341c700011502d3', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/112.png', '1653720045809883074' ),
  new PhotoClass('6291c4e07696a80001e84fc7', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/113.png', '1653720045809883074' ),
  new PhotoClass('6291c4ed69276900015e1999', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/114.png', '1653720045809883074' ),
  new PhotoClass('6291c63266ea6e0001c1e568', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/115.png', '1653720045809883074' ),
  new PhotoClass('6291c6432f77c40001f0694c', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/116.png', '1653720061940633883' ),
  new PhotoClass('6291c64df792990001ab21f6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/117.png', '1653720061940633883' ),
  new PhotoClass('6291c6580cb5d50001340eb1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/118.png', '1653720061940633883' ),
  new PhotoClass('6291c66266ea6e0001c1eabf', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/119.png', '1653720061940633883' ),
  new PhotoClass('6291c675d3209100011a3a79', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/120.png', '1653720061940633883' ),
  new PhotoClass('6291c67eb717e800013c5fcd', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/121.png', '1653720061940633883' ),
  new PhotoClass('6291c688302d9f00012cf2ad', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/122.png', '1653720061940633883' ),
  new PhotoClass('6291c698302d9f00012cf437', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/123.png', '1653720081216161902' ),
  new PhotoClass('6291c6a3f17d02000111d9b2', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/124.png', '1653720081216161902' ),
  new PhotoClass('6291c6ad7ab3bd000101f84c', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/125.png', '1653720081216161902' ),
  new PhotoClass('6291c6b93c41470001b1b9cf', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/126.png', '1653720081216161902' ),
  new PhotoClass('6291c6d2302d9f00012cfa4e', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/127.png', '1653720081216161902' ),
  new PhotoClass('6291c6e169276900015e47e0', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/128.png', '1653720081216161902' ),
  new PhotoClass('6291c6ed9b54e300018b61d8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/129.png', '1653720081216161902' ),
  new PhotoClass('6291c6f566ea6e0001c1f9e7', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/130.png', '1653720081216161902' ),
  new PhotoClass('6291c6fd69276900015e4ae0', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/131.png', '1653720081216161902' ),
  new PhotoClass('6291c7069d20700001244ce6', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/132.png', '1653720081216161902' ),
  new PhotoClass('6291c70f69276900015e4ce3', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/133.png', '1653720081216161902' ),
  new PhotoClass('62be622cd3209100017c7fb3', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/134.png', '1656644092306170680' ),
  new PhotoClass('62be62400d0822000102e281', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/135.png', '1656644092306170680' ),
  new PhotoClass('62be624ac2cedc0001458b05', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/136.png', '1656644092306170680' ),
  new PhotoClass('62be62553c4147000114a9b1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/137.png', '1656644092306170680' ),
  new PhotoClass('62be625f7ab3bd0001637c01', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/138.png', '1656644092306170680' ),
  new PhotoClass('62be6269f7929900010fe074', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/139.png', '1656644092306170680' ),
  new PhotoClass('62be62717a1d270001d9241f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/140.png', '1656644092306170680' ),
  new PhotoClass('62d62b8fb717e80001b0878a', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/141.png', '1658203003755019189' ),
  new PhotoClass('62d62b999d20700001969a56', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/142.png', '1658203003755019189' ),
  new PhotoClass('62d62ba9cc12f40001313342', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/143.png', '1658203003755019189' ),
  new PhotoClass('62d62bb200a760000135ff18', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/144.png', '1658203003755019189' ),
  new PhotoClass('62d62bbef7929900011e3666', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/145.png', '1658203003755019189' ),
  new PhotoClass('62d62bced5771c0001d7d028', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/146.png', '1658203003755019189' ),
  new PhotoClass('62d62bdc7a1d270001e851c5', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/147.png', '1658203003755019189' ),
  new PhotoClass('62d62be80d0822000110ecf1', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/148.png', '1658203003755019189' ),
  new PhotoClass('62d62bf2b717e80001b090fa', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/149.png', '1658203003755019189' ),
  new PhotoClass('62d62bfd996ab20001558458', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/150.png', '1658203003755019189' ),
  new PhotoClass('62d62c0bc2cedc00014406a9', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/151.png', '1658203003755019189' ),
  new PhotoClass('63381ce70f90b7000105e0ea', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/152.png', '1664621641821766999' ),
  new PhotoClass('63381d32d76aaf0001704438', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/153.png', '1664621641821766999' ),
  new PhotoClass('63381d3f737e280001434d39', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/154.png', '1664621641821766999' ),
  new PhotoClass('63381d58d4c7ab000190c783', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/155.png', '1664621641821766999' ),
  new PhotoClass('63381d6711840a000129096e', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/156.png', '1664621641821766999' ),
  new PhotoClass('63381d896758c0000119c8d9', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/157.png', '1664621641821766999' ),
  new PhotoClass('63381d9df74ea000019fac9f', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/158.png', '1664621641821766999' ),
  new PhotoClass('63381db2d4c7ab000190ced0', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/159.png', '1664621641821766999' ),
  new PhotoClass('63381dd0f74ea000019fb0de', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/160.png', '1664621641821766999' ),
  new PhotoClass('63381ddcf74ea000019fb1d0', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/161.png', '1664621641821766999' ),
  new PhotoClass('63381de9fcf4a30001ddcfaf', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/162.png', '1664621641821766999' ),
  new PhotoClass('63381e0f737e280001436063', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/163.png', '1664621627242008060' ),
  new PhotoClass('63381e19fcf4a30001ddd401', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/164.png', '1664621627242008060' ),
  new PhotoClass('63381e236758c0000119d9bf', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/165.png', '1664621627242008060' ),
  new PhotoClass('63381e2e7d78ff0001269425', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/166.png', '1664621627242008060' ),
  new PhotoClass('63381e39fcf4a30001ddd6f8', 'https://jushubiotech.oss-cn-beijing.aliyuncs.com/rc/facemacker/167.png', '1664621627242008060' ),
];

    数据模型的导出与使用

    所有数据模型通过统一的导出文件（Index.ets）进行管理：

    export { btnContentClass } from './src/main/ets/utils/dataSource'
export { PhotoClass, PhotoList } from './src/main/ets/utils/photo'
export { FestivalClass, festivalList } from './src/main/ets/utils/festival'
export { FestivalBgClass, FestivalBgList } from './src/main/ets/utils/festivalBg'

    这种集中导出的方式有以下优点：

    1. 简化导入：在需要使用这些数据模型的组件中，只需从一个文件导入，而不需要分别导入多个文件
    2. 统一管理：便于统一管理所有数据模型，当需要修改或添加数据模型时，只需在相应文件中修改，然后确保在Index.ets中正确导出
    3. 提高可维护性：当项目规模扩大时，这种结构使代码更易于维护和扩展

    数据模型之间的关联关系

    这些数据模型之间存在明确的关联关系：

    1. FestivalClass 与 PhotoClass 的关联：

      • PhotoClass 中的 cid 属性关联到 FestivalClass 中的 id 属性
      • 这种关联使得可以根据节日分类筛选出相应的装饰图片

    2. FestivalClass 与 FestivalBgClass 的关联：

      • FestivalBgClass 中的 id 属性关联到 FestivalClass 中的 cid 属性
      • 这种关联使得可以根据节日分类选择相应的背景图片

    数据模型的应用场景

    1. 侧边栏节日分类展示：

      • 使用 festivalList 数据在侧边栏展示节日分类列表
      • 用户点击不同节日分类时，可以根据选中的节日id筛选相应的装饰图片

    2. 背景图片选择：

      • 使用 FestivalBgList 数据展示可选的背景图片
      • 用户可以选择不同的背景图片作为头像的底图

    3. 装饰图片选择：

      • 使用 PhotoList 数据展示可选的装饰图片
      • 根据用户选择的节日分类，筛选出对应的装饰图片供用户选择

    总结

    合理的数据结构设计是应用开发的基础。在HarmonyOS头像编辑器应用中，通过设计FestivalClass、FestivalBgClass、PhotoClass和btnContentClass等数据模型，并建立它们之间的关联关系，实现了节日分类、背景图片和装饰图片的有效管理和使用。

    这种数据结构设计具有以下特点：

    1. 模块化：每个数据模型负责特定的功能，职责明确
    2. 关联性：通过id和cid等属性建立数据模型之间的关联
    3. 可扩展性：可以方便地添加新的节日分类、背景图片和装饰图片
    4. 易维护性：通过统一的导出文件管理所有数据模型，提高代码的可维护性
    harmonyos-next
    全栈若城
    1 声望2 粉丝
    « 上一篇
    HarmonyOS NEXT 头像制作项目系列教程之 --- 静态库模块创建
    下一篇 »
    HarmonyOS NEXT 头像制作项目系列教程之 --- 数据模型详解与应用

    引用和评论

    推荐阅读
    头像
    告别繁琐开发！CodeBuddy - 程序员的效率倍增神器（二）

    全栈若城

    头像
    HarmonyOS 第一课：基础课程

    鸿蒙百晓生赞 7阅读 4.4k

    头像
    HarmonyOS应用开发学习笔记(2024-12-25)

    金刚鹦鹉赞 3阅读 1.3k评论 1

    头像
    HarmonyOS 第一课：高级课程

    鸿蒙百晓生赞 4阅读 2.8k

    头像
    鸿蒙生态学堂

    鸿蒙百晓生赞 5阅读 2.7k

    头像
    HarmonyOS 主题课：HarmonyOS SDK 开放能力

    鸿蒙百晓生赞 3阅读 2.4k

    头像
    HarmonyOS应用开发学习笔记(2024-12-30)

    金刚鹦鹉赞 2阅读 1.2k

    0 条评论
    得票最新