引言想用鸿蒙NEXT开发一个完整的培训班管理系统却不知道从何下手项目结构混乱、模块划分不清晰、代码难以维护别担心本文将手把手带你从零搭建一个高内聚低耦合的鸿蒙NEXT项目架构涵盖需求分析、架构设计、目录规划、环境搭建和基础框架实现让你的培训班管理系统开发事半功倍一、需求分析1.1 业务背景培训班管理系统是一个典型的教育类应用主要用于管理培训机构的日常运营包括学员管理、课程管理、报名管理、考勤管理等核心功能。1.2 功能需求核心功能模块模块功能点优先级学员管理学员信息录入、查询、修改、删除P0课程管理课程信息维护、课程表展示P0报名管理学员报名、退费、课程选择P0考勤管理签到签退、考勤统计P1数据统计学员统计、课程统计、收入统计P1用户角色管理员系统管理、数据统计、权限管理教师课程管理、考勤管理、学员查看学员课程查看、报名、个人信息管理1.3 界面原型┌─────────────────────────────────────┐ │ 首页 (TabBar) │ ├─────────────────────────────────────┤ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ 学员 │ │ 课程 │ │ 报名 │ │ 我的 │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ └─────────────────────────────────────┘二、架构设计2.1 整体架构采用分层架构设计将应用分为以下层次┌─────────────────────────────────────┐ │ UI层 (ArkUI) │ ├─────────────────────────────────────┤ │ ViewModel层 │ ├─────────────────────────────────────┤ │ Service层 │ ├─────────────────────────────────────┤ │ Data层 │ └─────────────────────────────────────┘2.2 技术选型技术领域技术方案说明UI框架ArkUI鸿蒙原生UI框架状态管理State/Prop/Link组件状态管理数据持久化Preferences RDB轻量级关系型数据库网络请求ohos.net.http系统HTTP API路由管理Navigation NavRouter页面导航2.3 模块划分TrainingManagement/ ├── entry/ # 主模块 │ ├── src/main/ets/ │ │ ├── pages/ # 页面 │ │ ├── components/ # 公共组件 │ │ ├── viewmodel/ # 视图模型 │ │ ├── service/ # 业务服务 │ │ ├── model/ # 数据模型 │ │ ├── common/ # 公共工具 │ │ └── resources/ # 资源文件 │ └── src/main/resources/ # 系统资源 └── features/ # 功能模块 ├── student/ # 学员模块 ├── course/ # 课程模块 ├── enrollment/ # 报名模块 └── attendance/ # 考勤模块三、目录结构规划3.1 完整目录结构entry/src/main/ets/ ├── pages/ │ ├── Index.ets # 首页 │ ├── StudentList.ets # 学员列表页 │ ├── StudentDetail.ets # 学员详情页 │ ├── CourseList.ets # 课程列表页 │ ├── CourseDetail.ets # 课程详情页 │ ├── EnrollmentPage.ets # 报名页面 │ └── MyPage.ets # 个人中心 ├── components/ │ ├── common/ │ │ ├── TitleBar.ets # 标题栏 │ │ ├── SearchBar.ets # 搜索栏 │ │ ├── EmptyView.ets # 空状态视图 │ │ └── LoadingView.ets # 加载视图 │ ├── student/ │ │ ├── StudentCard.ets # 学员卡片 │ │ └── StudentForm.ets # 学员表单 │ └── course/ │ ├── CourseCard.ets # 课程卡片 │ └── CourseSchedule.ets # 课程表 ├── viewmodel/ │ ├── StudentViewModel.ets # 学员视图模型 │ ├── CourseViewModel.ets # 课程视图模型 │ └── EnrollmentViewModel.ets # 报名视图模型 ├── service/ │ ├── StudentService.ets # 学员服务 │ ├── CourseService.ets # 课程服务 │ └── EnrollmentService.ets # 报名服务 ├── model/ │ ├── Student.ets # 学员模型 │ ├── Course.ets # 课程模型 │ └── Enrollment.ets # 报名模型 ├── common/ │ ├── Constants.ets # 常量定义 │ ├── Utils.ets # 工具类 │ └── DatabaseHelper.ets # 数据库帮助类 └── resources/ ├── base/element/ # 元素资源 ├── base/media/ # 媒体资源 └── base/profile/ # 配置文件3.2 模块职责说明目录职责说明pages页面层负责UI展示和用户交互components组件层可复用的UI组件viewmodel视图模型层管理页面状态和业务逻辑service服务层处理业务逻辑和数据操作model模型层定义数据结构common公共层工具类和常量定义四、开发环境搭建4.1 DevEco Studio安装下载DevEco Studio访问华为开发者联盟官网下载最新版本DevEco Studio 5.0安装配置系统要求 - Windows 10/11 64位 - 内存16GB以上 - 硬盘100GB以上可用空间SDK配置打开DevEco Studio进入Settings → HarmonyOS SDK下载API 12及以上版本4.2 项目创建创建新项目打开DevEco Studio选择Create HarmonyOS Project选择Empty Ability模板配置项目信息Project Name: TrainingManagementBundle Name: com.example.trainingCompile SDK: API 12Model: Stage项目初始化# 项目结构生成后检查以下文件 - entry/src/main/ets/entryability/EntryAbility.ets - entry/src/main/ets/pages/Index.ets - entry/src/main/module.json54.3 开发工具配置代码风格配置// .eslintrc.json { extends: typescript-eslint/recommended, rules: { indent: [error, 2], quotes: [error, single], semi: [error, always] } }Git配置# 初始化Git仓库 git init git add . git commit -m 初始化鸿蒙培训班管理系统项目五、基础框架代码实现5.1 数据模型定义// model/Student.ets export interface Student { id: string; name: string; phone: string; email: string; gender: number; // 0: 未知, 1: 男, 2: 女 birthday: string; address: string; avatar: string; createTime: string; updateTime: string; }// model/Course.ets export interface Course { id: string; name: string; description: string; teacher: string; price: number; duration: number; // 课时 maxStudents: number; currentStudents: number; startTime: string; endTime: string; status: number; // 0: 未开始, 1: 进行中, 2: 已结束 createTime: string; updateTime: string; }// model/Enrollment.ets export interface Enrollment { id: string; studentId: string; courseId: string; enrollTime: string; status: number; // 0: 已报名, 1: 已上课, 2: 已退费 remark: string; createTime: string; updateTime: string; }5.2 数据库帮助类// common/DatabaseHelper.ets import rdb from ohos.data.relationalStore; const DB_NAME training_management.db; const DB_VERSION 1; export class DatabaseHelper { private static instance: DatabaseHelper; private rdbStore: rdb.RdbStore | null null; private constructor() {} static getInstance(): DatabaseHelper { if (!DatabaseHelper.instance) { DatabaseHelper.instance new DatabaseHelper(); } return DatabaseHelper.instance; } async init(context: Context): Promisevoid { const config: rdb.StoreConfig { name: DB_NAME, securityLevel: rdb.SecurityLevel.S1 }; this.rdbStore await rdb.getRdbStore(context, config, DB_VERSION); await this.createTables(); } private async createTables(): Promisevoid { const createStudentTable CREATE TABLE IF NOT EXISTS student ( id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT, email TEXT, gender INTEGER DEFAULT 0, birthday TEXT, address TEXT, avatar TEXT, create_time TEXT, update_time TEXT ) ; const createCourseTable CREATE TABLE IF NOT EXISTS course ( id TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, teacher TEXT, price REAL, duration INTEGER, max_students INTEGER, current_students INTEGER DEFAULT 0, start_time TEXT, end_time TEXT, status INTEGER DEFAULT 0, create_time TEXT, update_time TEXT ) ; const createEnrollmentTable CREATE TABLE IF NOT EXISTS enrollment ( id TEXT PRIMARY KEY, student_id TEXT NOT NULL, course_id TEXT NOT NULL, enroll_time TEXT, status INTEGER DEFAULT 0, remark TEXT, create_time TEXT, update_time TEXT, FOREIGN KEY (student_id) REFERENCES student(id), FOREIGN KEY (course_id) REFERENCES course(id) ) ; await this.rdbStore?.executeSql(createStudentTable); await this.rdbStore?.executeSql(createCourseTable); await this.rdbStore?.executeSql(createEnrollmentTable); } getRdbStore(): rdb.RdbStore | null { return this.rdbStore; } }5.3 工具类// common/Utils.ets export class Utils { /** * 生成唯一ID */ static generateId(): string { return ${Date.now()}_${Math.random().toString(36).substr(2, 9)}; } /** * 格式化日期 */ static formatDate(date: Date, format: string YYYY-MM-DD HH:mm:ss): string { const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); const day String(date.getDate()).padStart(2, 0); const hours String(date.getHours()).padStart(2, 0); const minutes String(date.getMinutes()).padStart(2, 0); const seconds String(date.getSeconds()).padStart(2, 0); return format .replace(YYYY, String(year)) .replace(MM, month) .replace(DD, day) .replace(HH, hours) .replace(mm, minutes) .replace(ss, seconds); } /** * 验证手机号 */ static isValidPhone(phone: string): boolean { const phoneRegex /^1[3-9]\d{9}$/; return phoneRegex.test(phone); } /** * 验证邮箱 */ static isValidEmail(email: string): boolean { const emailRegex /^[^\s][^\s]\.[^\s]$/; return emailRegex.test(email); } /** * 显示提示信息 */ static showToast(message: string): void { // 使用系统Toast API console.info(message); } }5.4 常量定义// common/Constants.ets export class Constants { // 数据库版本 static readonly DB_VERSION 1; // 性别常量 static readonly GENDER_UNKNOWN 0; static readonly GENDER_MALE 1; static readonly GENDER_FEMALE 2; // 课程状态 static readonly COURSE_STATUS_NOT_STARTED 0; static readonly COURSE_STATUS_IN_PROGRESS 1; static readonly COURSE_STATUS_ENDED 2; // 报名状态 static readonly ENROLLMENT_STATUS_ENROLLED 0; static readonly ENROLLMENT_STATUS_ATTENDED 1; static readonly ENROLLMENT_STATUS_REFUNDED 2; // 页面路由 static readonly PAGE_INDEX pages/Index; static readonly PAGE_STUDENT_LIST pages/StudentList; static readonly PAGE_STUDENT_DETAIL pages/StudentDetail; static readonly PAGE_COURSE_LIST pages/CourseList; static readonly PAGE_COURSE_DETAIL pages/CourseDetail; static readonly PAGE_ENROLLMENT pages/EnrollmentPage; static readonly PAGE_MY pages/MyPage; }5.5 首页实现// pages/Index.ets import { Constants } from ../common/Constants; Entry Component struct Index { State currentIndex: number 0; private tabItems: TabBarItem[] [ { title: 学员, icon: $r(app.media.ic_student) }, { title: 课程, icon: $r(app.media.ic_course) }, { title: 报名, icon: $r(app.media.ic_enrollment) }, { title: 我的, icon: $r(app.media.ic_my) } ]; build() { Column() { // 标题栏 TitleBar({ title: 培训班管理系统 }) // 内容区域 Tabs({ barPosition: BarPosition.End }) { TabContent() { StudentList() } .tabBar(this.TabBarItem(0)) TabContent() { CourseList() } .tabBar(this.TabBarItem(1)) TabContent() { EnrollmentPage() } .tabBar(this.TabBarItem(2)) TabContent() { MyPage() } .tabBar(this.TabBarItem(3)) } .onChange((index: number) { this.currentIndex index; }) } .width(100%) .height(100%) .backgroundColor(#F5F5F5) } Builder TabBarItem(index: number) { Column() { Image(this.tabItems[index].icon) .width(24) .height(24) .fillColor(this.currentIndex index ? #007DFF : #999999) Text(this.tabItems[index].title) .fontSize(12) .fontColor(this.currentIndex index ? #007DFF : #999999) .margin({ top: 4 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } } interface TabBarItem { title: string; icon: Resource; }5.6 标题栏组件// components/common/TitleBar.ets Component export struct TitleBar { Prop title: string ; Prop showBack: boolean false; backCallback: () void () {}; build() { Row() { // 返回按钮 if (this.showBack) { Image($r(app.media.ic_back)) .width(24) .height(24) .onClick(() { this.backCallback(); }) } // 标题 Text(this.title) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#333333) .layoutWeight(1) .textAlign(TextAlign.Center) } .width(100%) .height(56) .padding({ left: 16, right: 16 }) .backgroundColor(#FFFFFF) } }六、踩坑记录6.1 数据库初始化问题问题数据库初始化时表创建失败。原因SQL语句中的外键约束导致创建失败。解决方案// 先创建主表再创建外键表 await this.rdbStore?.executeSql(createStudentTable); await this.rdbStore?.executeSql(createCourseTable); await this.rdbStore?.executeSql(createEnrollmentTable);6.2 资源引用问题问题图片资源无法加载。原因资源路径配置错误。解决方案// 确保资源文件放在正确的目录 entry/src/main/resources/base/media/6.3 组件通信问题问题父子组件数据不同步。原因Prop装饰器是单向数据流。解决方案// 使用Link实现双向数据绑定 Link isRefresh: boolean;七、总结与预告本文要点回顾需求分析明确了培训班管理系统的功能需求和用户角色架构设计采用分层架构分离UI、业务逻辑和数据层目录规划按照功能模块划分提高代码可维护性环境搭建详细介绍了DevEco Studio的安装和配置基础框架实现了数据模型、数据库、工具类等基础代码下期预告下期我们将深入讲解UI界面篇包括学员列表页面实现课程详情页面设计报名页面交互优化响应式布局适配互动引导如果本文对你有帮助请点赞、收藏、关注有任何问题欢迎在评论区留言我会及时回复。系列文章导航第1篇项目架构篇本文第2篇UI界面篇第3篇状态管理篇第4篇数据持久化篇第5篇性能优化篇
【2026最新】鸿蒙NEXT培训班管理系统实战：从零搭建完整项目架构
发布时间：2026/5/17 7:29:04
引言想用鸿蒙NEXT开发一个完整的培训班管理系统却不知道从何下手项目结构混乱、模块划分不清晰、代码难以维护别担心本文将手把手带你从零搭建一个高内聚低耦合的鸿蒙NEXT项目架构涵盖需求分析、架构设计、目录规划、环境搭建和基础框架实现让你的培训班管理系统开发事半功倍一、需求分析1.1 业务背景培训班管理系统是一个典型的教育类应用主要用于管理培训机构的日常运营包括学员管理、课程管理、报名管理、考勤管理等核心功能。1.2 功能需求核心功能模块模块功能点优先级学员管理学员信息录入、查询、修改、删除P0课程管理课程信息维护、课程表展示P0报名管理学员报名、退费、课程选择P0考勤管理签到签退、考勤统计P1数据统计学员统计、课程统计、收入统计P1用户角色管理员系统管理、数据统计、权限管理教师课程管理、考勤管理、学员查看学员课程查看、报名、个人信息管理1.3 界面原型┌─────────────────────────────────────┐ │ 首页 (TabBar) │ ├─────────────────────────────────────┤ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ 学员 │ │ 课程 │ │ 报名 │ │ 我的 │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ └─────────────────────────────────────┘二、架构设计2.1 整体架构采用分层架构设计将应用分为以下层次┌─────────────────────────────────────┐ │ UI层 (ArkUI) │ ├─────────────────────────────────────┤ │ ViewModel层 │ ├─────────────────────────────────────┤ │ Service层 │ ├─────────────────────────────────────┤ │ Data层 │ └─────────────────────────────────────┘2.2 技术选型技术领域技术方案说明UI框架ArkUI鸿蒙原生UI框架状态管理State/Prop/Link组件状态管理数据持久化Preferences RDB轻量级关系型数据库网络请求ohos.net.http系统HTTP API路由管理Navigation NavRouter页面导航2.3 模块划分TrainingManagement/ ├── entry/ # 主模块 │ ├── src/main/ets/ │ │ ├── pages/ # 页面 │ │ ├── components/ # 公共组件 │ │ ├── viewmodel/ # 视图模型 │ │ ├── service/ # 业务服务 │ │ ├── model/ # 数据模型 │ │ ├── common/ # 公共工具 │ │ └── resources/ # 资源文件 │ └── src/main/resources/ # 系统资源 └── features/ # 功能模块 ├── student/ # 学员模块 ├── course/ # 课程模块 ├── enrollment/ # 报名模块 └── attendance/ # 考勤模块三、目录结构规划3.1 完整目录结构entry/src/main/ets/ ├── pages/ │ ├── Index.ets # 首页 │ ├── StudentList.ets # 学员列表页 │ ├── StudentDetail.ets # 学员详情页 │ ├── CourseList.ets # 课程列表页 │ ├── CourseDetail.ets # 课程详情页 │ ├── EnrollmentPage.ets # 报名页面 │ └── MyPage.ets # 个人中心 ├── components/ │ ├── common/ │ │ ├── TitleBar.ets # 标题栏 │ │ ├── SearchBar.ets # 搜索栏 │ │ ├── EmptyView.ets # 空状态视图 │ │ └── LoadingView.ets # 加载视图 │ ├── student/ │ │ ├── StudentCard.ets # 学员卡片 │ │ └── StudentForm.ets # 学员表单 │ └── course/ │ ├── CourseCard.ets # 课程卡片 │ └── CourseSchedule.ets # 课程表 ├── viewmodel/ │ ├── StudentViewModel.ets # 学员视图模型 │ ├── CourseViewModel.ets # 课程视图模型 │ └── EnrollmentViewModel.ets # 报名视图模型 ├── service/ │ ├── StudentService.ets # 学员服务 │ ├── CourseService.ets # 课程服务 │ └── EnrollmentService.ets # 报名服务 ├── model/ │ ├── Student.ets # 学员模型 │ ├── Course.ets # 课程模型 │ └── Enrollment.ets # 报名模型 ├── common/ │ ├── Constants.ets # 常量定义 │ ├── Utils.ets # 工具类 │ └── DatabaseHelper.ets # 数据库帮助类 └── resources/ ├── base/element/ # 元素资源 ├── base/media/ # 媒体资源 └── base/profile/ # 配置文件3.2 模块职责说明目录职责说明pages页面层负责UI展示和用户交互components组件层可复用的UI组件viewmodel视图模型层管理页面状态和业务逻辑service服务层处理业务逻辑和数据操作model模型层定义数据结构common公共层工具类和常量定义四、开发环境搭建4.1 DevEco Studio安装下载DevEco Studio访问华为开发者联盟官网下载最新版本DevEco Studio 5.0安装配置系统要求 - Windows 10/11 64位 - 内存16GB以上 - 硬盘100GB以上可用空间SDK配置打开DevEco Studio进入Settings → HarmonyOS SDK下载API 12及以上版本4.2 项目创建创建新项目打开DevEco Studio选择Create HarmonyOS Project选择Empty Ability模板配置项目信息Project Name: TrainingManagementBundle Name: com.example.trainingCompile SDK: API 12Model: Stage项目初始化# 项目结构生成后检查以下文件 - entry/src/main/ets/entryability/EntryAbility.ets - entry/src/main/ets/pages/Index.ets - entry/src/main/module.json54.3 开发工具配置代码风格配置// .eslintrc.json { extends: typescript-eslint/recommended, rules: { indent: [error, 2], quotes: [error, single], semi: [error, always] } }Git配置# 初始化Git仓库 git init git add . git commit -m 初始化鸿蒙培训班管理系统项目五、基础框架代码实现5.1 数据模型定义// model/Student.ets export interface Student { id: string; name: string; phone: string; email: string; gender: number; // 0: 未知, 1: 男, 2: 女 birthday: string; address: string; avatar: string; createTime: string; updateTime: string; }// model/Course.ets export interface Course { id: string; name: string; description: string; teacher: string; price: number; duration: number; // 课时 maxStudents: number; currentStudents: number; startTime: string; endTime: string; status: number; // 0: 未开始, 1: 进行中, 2: 已结束 createTime: string; updateTime: string; }// model/Enrollment.ets export interface Enrollment { id: string; studentId: string; courseId: string; enrollTime: string; status: number; // 0: 已报名, 1: 已上课, 2: 已退费 remark: string; createTime: string; updateTime: string; }5.2 数据库帮助类// common/DatabaseHelper.ets import rdb from ohos.data.relationalStore; const DB_NAME training_management.db; const DB_VERSION 1; export class DatabaseHelper { private static instance: DatabaseHelper; private rdbStore: rdb.RdbStore | null null; private constructor() {} static getInstance(): DatabaseHelper { if (!DatabaseHelper.instance) { DatabaseHelper.instance new DatabaseHelper(); } return DatabaseHelper.instance; } async init(context: Context): Promisevoid { const config: rdb.StoreConfig { name: DB_NAME, securityLevel: rdb.SecurityLevel.S1 }; this.rdbStore await rdb.getRdbStore(context, config, DB_VERSION); await this.createTables(); } private async createTables(): Promisevoid { const createStudentTable CREATE TABLE IF NOT EXISTS student ( id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT, email TEXT, gender INTEGER DEFAULT 0, birthday TEXT, address TEXT, avatar TEXT, create_time TEXT, update_time TEXT ) ; const createCourseTable CREATE TABLE IF NOT EXISTS course ( id TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, teacher TEXT, price REAL, duration INTEGER, max_students INTEGER, current_students INTEGER DEFAULT 0, start_time TEXT, end_time TEXT, status INTEGER DEFAULT 0, create_time TEXT, update_time TEXT ) ; const createEnrollmentTable CREATE TABLE IF NOT EXISTS enrollment ( id TEXT PRIMARY KEY, student_id TEXT NOT NULL, course_id TEXT NOT NULL, enroll_time TEXT, status INTEGER DEFAULT 0, remark TEXT, create_time TEXT, update_time TEXT, FOREIGN KEY (student_id) REFERENCES student(id), FOREIGN KEY (course_id) REFERENCES course(id) ) ; await this.rdbStore?.executeSql(createStudentTable); await this.rdbStore?.executeSql(createCourseTable); await this.rdbStore?.executeSql(createEnrollmentTable); } getRdbStore(): rdb.RdbStore | null { return this.rdbStore; } }5.3 工具类// common/Utils.ets export class Utils { /** * 生成唯一ID */ static generateId(): string { return ${Date.now()}_${Math.random().toString(36).substr(2, 9)}; } /** * 格式化日期 */ static formatDate(date: Date, format: string YYYY-MM-DD HH:mm:ss): string { const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); const day String(date.getDate()).padStart(2, 0); const hours String(date.getHours()).padStart(2, 0); const minutes String(date.getMinutes()).padStart(2, 0); const seconds String(date.getSeconds()).padStart(2, 0); return format .replace(YYYY, String(year)) .replace(MM, month) .replace(DD, day) .replace(HH, hours) .replace(mm, minutes) .replace(ss, seconds); } /** * 验证手机号 */ static isValidPhone(phone: string): boolean { const phoneRegex /^1[3-9]\d{9}$/; return phoneRegex.test(phone); } /** * 验证邮箱 */ static isValidEmail(email: string): boolean { const emailRegex /^[^\s][^\s]\.[^\s]$/; return emailRegex.test(email); } /** * 显示提示信息 */ static showToast(message: string): void { // 使用系统Toast API console.info(message); } }5.4 常量定义// common/Constants.ets export class Constants { // 数据库版本 static readonly DB_VERSION 1; // 性别常量 static readonly GENDER_UNKNOWN 0; static readonly GENDER_MALE 1; static readonly GENDER_FEMALE 2; // 课程状态 static readonly COURSE_STATUS_NOT_STARTED 0; static readonly COURSE_STATUS_IN_PROGRESS 1; static readonly COURSE_STATUS_ENDED 2; // 报名状态 static readonly ENROLLMENT_STATUS_ENROLLED 0; static readonly ENROLLMENT_STATUS_ATTENDED 1; static readonly ENROLLMENT_STATUS_REFUNDED 2; // 页面路由 static readonly PAGE_INDEX pages/Index; static readonly PAGE_STUDENT_LIST pages/StudentList; static readonly PAGE_STUDENT_DETAIL pages/StudentDetail; static readonly PAGE_COURSE_LIST pages/CourseList; static readonly PAGE_COURSE_DETAIL pages/CourseDetail; static readonly PAGE_ENROLLMENT pages/EnrollmentPage; static readonly PAGE_MY pages/MyPage; }5.5 首页实现// pages/Index.ets import { Constants } from ../common/Constants; Entry Component struct Index { State currentIndex: number 0; private tabItems: TabBarItem[] [ { title: 学员, icon: $r(app.media.ic_student) }, { title: 课程, icon: $r(app.media.ic_course) }, { title: 报名, icon: $r(app.media.ic_enrollment) }, { title: 我的, icon: $r(app.media.ic_my) } ]; build() { Column() { // 标题栏 TitleBar({ title: 培训班管理系统 }) // 内容区域 Tabs({ barPosition: BarPosition.End }) { TabContent() { StudentList() } .tabBar(this.TabBarItem(0)) TabContent() { CourseList() } .tabBar(this.TabBarItem(1)) TabContent() { EnrollmentPage() } .tabBar(this.TabBarItem(2)) TabContent() { MyPage() } .tabBar(this.TabBarItem(3)) } .onChange((index: number) { this.currentIndex index; }) } .width(100%) .height(100%) .backgroundColor(#F5F5F5) } Builder TabBarItem(index: number) { Column() { Image(this.tabItems[index].icon) .width(24) .height(24) .fillColor(this.currentIndex index ? #007DFF : #999999) Text(this.tabItems[index].title) .fontSize(12) .fontColor(this.currentIndex index ? #007DFF : #999999) .margin({ top: 4 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } } interface TabBarItem { title: string; icon: Resource; }5.6 标题栏组件// components/common/TitleBar.ets Component export struct TitleBar { Prop title: string ; Prop showBack: boolean false; backCallback: () void () {}; build() { Row() { // 返回按钮 if (this.showBack) { Image($r(app.media.ic_back)) .width(24) .height(24) .onClick(() { this.backCallback(); }) } // 标题 Text(this.title) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#333333) .layoutWeight(1) .textAlign(TextAlign.Center) } .width(100%) .height(56) .padding({ left: 16, right: 16 }) .backgroundColor(#FFFFFF) } }六、踩坑记录6.1 数据库初始化问题问题数据库初始化时表创建失败。原因SQL语句中的外键约束导致创建失败。解决方案// 先创建主表再创建外键表 await this.rdbStore?.executeSql(createStudentTable); await this.rdbStore?.executeSql(createCourseTable); await this.rdbStore?.executeSql(createEnrollmentTable);6.2 资源引用问题问题图片资源无法加载。原因资源路径配置错误。解决方案// 确保资源文件放在正确的目录 entry/src/main/resources/base/media/6.3 组件通信问题问题父子组件数据不同步。原因Prop装饰器是单向数据流。解决方案// 使用Link实现双向数据绑定 Link isRefresh: boolean;七、总结与预告本文要点回顾需求分析明确了培训班管理系统的功能需求和用户角色架构设计采用分层架构分离UI、业务逻辑和数据层目录规划按照功能模块划分提高代码可维护性环境搭建详细介绍了DevEco Studio的安装和配置基础框架实现了数据模型、数据库、工具类等基础代码下期预告下期我们将深入讲解UI界面篇包括学员列表页面实现课程详情页面设计报名页面交互优化响应式布局适配互动引导如果本文对你有帮助请点赞、收藏、关注有任何问题欢迎在评论区留言我会及时回复。系列文章导航第1篇项目架构篇本文第2篇UI界面篇第3篇状态管理篇第4篇数据持久化篇第5篇性能优化篇
相关文章
可穿戴电子模块化连接方案：5mm微型按扣实现电路板与织物的可插拔连接
1. 项目概述与核心思路在折腾可穿戴电子项目时，最让人头疼的问题之一，就是如何让电路板与衣物既可靠连接，又能方便地拆下来。传统的做法要么是用导电胶带粘（不牢靠、易氧化），要么是直接把线焊死在板子上然后…
手机号归属地查询系统：3步构建可视化定位工具
手机号归属地查询系统：3步构建可视化定位工具 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mirrors/lo/l…
开源办公套件自动化部署与集成实战：基于OpenOffice的服务化解决方案
1. 项目概述：为什么我们需要一个“开源”的办公套件？如果你在GitHub上搜索过办公软件相关的仓库，大概率会看到过longyangxi/OpenOffice这个项目。乍一看，你可能会以为这是一个Apache OpenOffice的镜像或者某个分支。但点进去仔细研…
LinuxARP邻居表自动化巡检实践
LinuxARP邻居表自动化巡检实践这是一篇面向中级 Linux 使用者的技术文章，主题聚焦在ARP邻居表，重点讨论邻居解析、网关可达和地址冲突。在真实生产环境中，ARP邻居表相关问题往往不会以单一错误形式出现，而是混杂在日志、权限、资源…
图片去水印软件哪个好用？2026年热门工具对比与好用推荐指南
引言：为什么需要图片去水印工具 在日常工作和生活中，我们经常会遇到需要处理带有水印的图片的情况。这些水印可能来自社交媒体平台、图片素材库、电商平台或创意分享社区。对于需要重新编辑、二次创作或合法使用这些图片的用户来说，快速、干净…
Windows Cleaner终极指南：3步彻底解决C盘爆红问题，让电脑重获新生！
Windows Cleaner终极指南：3步彻底解决C盘爆红问题，让电脑重获新生！ 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 还在为Wind…
如何为VLC播放器安装VeLoCity皮肤：终极美化指南
如何为VLC播放器安装VeLoCity皮肤：终极美化指南 【免费下载链接】VeLoCity-Skin-for-VLC Castom skin for VLC Player 项目地址: https://gitcode.com/gh_mirrors/ve/VeLoCity-Skin-for-VLC 厌倦了VLC播放器单调的默认界面？想要让媒体播放体验更符…
释放Windows磁盘空间：DriverStore Explorer帮你清理隐藏的驱动冗余
释放Windows磁盘空间：DriverStore Explorer帮你清理隐藏的驱动冗余 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你是否曾经疑惑过为什么Windows系统用久了C盘空间会越来越…
LoRA模型合并实战指南：使用vLLM与CopaW融合多技能大语言模型
1. 项目概述：LoRA模型合并的“瑞士军刀”最近在折腾大语言模型微调的朋友，估计没少跟LoRA（Low-Rank Adaptation）打交道。这玩意儿确实好用，用少量显存和数据集就能让一个通用大模型学会新技能，比如写代码、…
【实用小程序】超轻量级文件上传下载中心 (File Download Server)
站内源码及jar包下载 一、项目概述 文件下载中心一个基于 Java 内置 HTTP 服务器（com.sun.net.httpserver）构建的轻量级文件管理服务。它零第三方依赖，单 JAR 包即可运行，适合在内网环境或临时场景中快速搭建文件共享站点。 你的团队需要临时共享一批日志文件或交付物，…
py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)
加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南 【免费下载链接】markor Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, .. 项目地址: https://gitcode.com/gh_mirrors/ma/markor 在移动设备上寻找一款…
【实用小程序】超轻量级文件上传下载中心 (File Download Server)
站内源码及jar包下载 一、项目概述 文件下载中心一个基于 Java 内置 HTTP 服务器（com.sun.net.httpserver）构建的轻量级文件管理服务。它零第三方依赖，单 JAR 包即可运行，适合在内网环境或临时场景中快速搭建文件共享站点。 你的团队需要临时共享一批日志文件或交付物，…
py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)
加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南 【免费下载链接】markor Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, .. 项目地址: https://gitcode.com/gh_mirrors/ma/markor 在移动设备上寻找一款…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…