【江鸟中原】课表管理系统
《鸿蒙智能课程表应用开发总结》 本项目基于HarmonyOS系统开发了一款集成化教学管理应用,实现课程、作业、考试和成绩的统一管理。应用采用ArkUI框架和TypeScript语言开发,具有以下特点: 双角色设计:支持学生和教师两种使用模式,满足不同需求 智能提醒:考试倒计时自动变色预警,成绩分级颜色标识 高效管理:教师端可便捷管理课程、发布作业、安排考试和录入成绩 跨设备协同:利用鸿蒙分布式能力
鸿蒙智能课程表应用项目总结报告
一、项目背景与意义
在数字化校园建设的大背景下,高校师生对于教学信息管理的需求日益增长。传统的教学管理方式往往依赖于纸质通知或分散的在线平台,导致信息查询不便、更新滞后。为此,我们基于鸿蒙系统(HarmonyOS)开发了一款智能课程表应用,旨在通过一个统一的界面,集中管理课程、作业、考试和成绩等信息,提升教学管理的效率和用户体验。
本应用充分利用了鸿蒙系统的分布式能力和ArkUI框架的声明式UI开发优势,实现了跨设备的无缝协同和流畅的用户交互。通过本地数据管理,应用能够快速响应用户操作,即使在离线状态下也能正常使用,满足了校园场景中网络环境复杂的需求。
二、项目目标与范围
(一)核心目标
- 打造一个集成化的教学信息管理平台,覆盖课程、作业、考试和成绩等核心功能。
- 提供双角色切换功能,满足学生和教师不同的使用需求。
- 利用鸿蒙系统的特性,实现跨设备的数据同步和功能协同。
- 优化用户界面和交互流程,提升信息查询和管理的便捷性。
(二)功能范围
- 学生端功能:
- 查看个人课程表,按周次和星期筛选课程。
- 浏览作业列表,标记作业完成状态。
- 查看考试安排,包括考试时间、地点和倒计时提醒。
- 查询成绩,了解各课程的评分情况。
- 教师端功能:
- 发布和管理课程信息,包括上课时间、地点和教学周次。
- 发布作业,设定截止日期,并可查看学生的完成情况。
- 安排考试,录入考试时间、地点和相关说明。
- 管理学生成绩,录入和修改学生的成绩记录。
- 查看学生列表,了解学生的基本信息和选课情况。
三、技术架构与选型
(一)技术栈
|
技术层级 |
选型 |
说明 |
|
操作系统 |
HarmonyOS 3.1 |
提供分布式能力,支持跨设备协同 |
|
UI框架 |
ArkUI |
声明式UI开发,代码简洁,易于维护 |
|
编程语言 |
TypeScript |
类型安全,开发效率高 |
|
数据存储 |
本地状态管理(@State) |
快速响应,支持离线使用 |
|
开发工具 |
DevEco Studio 4.0 |
专为鸿蒙应用开发设计,功能强大 |
(二)架构设计
- 表示层:使用ArkUI框架构建用户界面,通过声明式语法实现UI的快速开发和更新。
- 业务逻辑层:处理用户交互,管理数据的增删改查,实现角色切换等功能。
- 数据模型层:定义课程、作业、考试、成绩和学生等数据实体,确保数据的一致性和完整性。
四、详细功能实现
(一)数据模型设计
1. 课程类(Course)
export class Course {
id: string = generateUUID()
name: string = '' // 课程名称
teacher: string = '' // 授课教师
location: string = '' // 上课地点
startTime: string = '' // 开始时间(如:08:00)
endTime: string = '' // 结束时间(如:09:40)
day: number = 0 // 星期几(0-6 代表周一到周日)
weeks: number[] = [] // 教学周次数组(如:[1,2,3,...,16])
constructor(init?: Partial<Course>) {
if (init) Object.assign(this, init)
}
}
2. 作业类(Assignment)
export class Assignment {
id: string = generateUUID()
courseName: string = '' // 所属课程
title: string = '' // 作业标题
deadline: string = '' // 截止日期(YYYY-MM-DD)
isCompleted: boolean = false // 完成状态
teacher: string = '' // 发布教师
constructor(init?: Partial<Assignment>) {
if (init) Object.assign(this, init)
}
}
3. 考试类(Exam)
export class Exam {
id: string = generateUUID()
courseName: string = ''
examDate: string = '' // 考试日期
examTime: string = '' // 考试时间(如:09:00-11:00)
location: string = '' // 考试地点
teacher: string = ''
constructor(init?: Partial<Exam>) {
if (init) Object.assign(this, init)
}
}
4. 成绩类(Grade)
5. 学生类(Student)
export class Student {
id: string = generateUUID()
name: string = ''
studentId: string = '' // 学号
major: string = '' // 专业
courses: string[] = [] // 所选课程名称数组
constructor(init?: Partial<Student>) {
if (init) Object.assign(this, init)
}
}
(二)核心业务逻辑
1. 角色切换机制
- 使用 @State userType: 'student' | 'teacher' = 'student' 记录当前角色。
- 顶部切换按钮通过 @Click 事件修改 userType,触发 UI 重新渲染。
2. 课程表生成算法
// 获取当前天的课程
getTodayCourses(): Course[] {
return this.getCourses().filter(
c => c.day === this.currentDay && c.weeks.includes(this.currentWeek)
)
}
// 获取指定时间段的课程
getCourseInSlot(timeIndex: number): Course | null {
const today = this.getTodayCourses()
const slot = this.timeSlots[timeIndex] // "08:00-09:40"
return today.find(c => `${c.startTime}-${c.endTime}` === slot) || null
}
3. 考试倒计时与颜色预警
getCountdownText(examDate: string): string {
const diff = Math.ceil(
(new Date(examDate).getTime() - Date.now()) / 86400000
)
if (diff < 0) return '已过期'
if (diff === 0) return '今天考试'
if (diff === 1) return '明天考试'
return `还剩${diff}天`
}
getCountdownColor(examDate: string): Color {
const diff = Math.ceil(
(new Date(examDate).getTime() - Date.now()) / 86400000
)
if (diff <= 7) return Color.Red
if (diff <= 14) return Color.Orange
return Color.Green
}
4. 成绩颜色映射
getGradeColor(score: number): Color {
if (score >= 90) return Color.Green
if (score >= 80) return Color.Blue
if (score >= 60) return Color.Orange
return Color.Red
}
(三)UI 交互细节
1. 课程表卡片
- 有课时:彩色背景(根据课程名哈希取色),显示课程名、教师、地点。
- 无课时:灰色边框,提示“无课程”,教师端增加“点击添加”按钮。
2. 作业列表项
- 学生端:显示完成状态,可点击切换。
- 教师端:显示“编辑”按钮,点击可修改作业信息。
3. 考试列表项
- 学生端:显示倒计时,根据剩余天数显示不同颜色。
- 教师端:显示“编辑”按钮,点击可修改考试信息。
4. 学生管理
- 教师可查看学生列表,点击“成绩管理”按钮,弹出成绩录入对话框。
- 对话框支持录入平时成绩、考试成绩,自动计算总评成绩。
五、测试与优化
(一)测试用例
|
模块 |
测试点 |
预期结果 |
|
角色切换 |
点击顶部切换按钮 |
UI 更新为对应角色界面 |
|
课程表 |
切换周次、星期 |
课程列表正确刷新 |
|
作业 |
学生点击作业项 |
完成状态切换 |
|
考试 |
考试日期临近 |
倒计时颜色变红 |
|
成绩 |
教师录入成绩 |
总评成绩自动计算 |
(二)性能优化
- 使用 LazyForEach 替代 ForEach 优化长列表性能。
- 图片资源压缩至 100KB 以内,减少包体积。
- 避免在 build() 中创建临时对象,减少 GC 压力。
六、运行效果图
1. 学生系统-课程表周视图

2. 学生系统-作业列表

- 学生系统-考试时间及成绩展示


4. 教师系统-添加课程弹窗

5. 教师系统-学生个人信息,成绩,课程,考试安排管理



七、结论与展望
1. 千行 ArkTS,0 崩溃,双角色切换丝滑。
2. 课程/作业/考试/成绩 4 大模块,本地状态即改即显。
3. 倒计时自动变色、弹窗一键录入
更多推荐



所有评论(0)