JavaScript-and-Html-Web-Pages

PKU 2025 Spring Course:JavaScript and Html Web Pages

小组成员：吴锐 魏知原 吴宇航

日期： 2025年5月29日

---

1. 项目简介

• 目标：构建高校数字化教学平台前端
• 技术栈：HTML5, CSS3 (TailwindCSS), JavaScript
• 核心依赖：Font Awesome, FullCalendar, Chart.js

---

2. 网站整体结构

• 目录结构：components / assets / data / pages
• 公共组件：header、sidebar、footer、通知框
• 响应式：移动端 & 桌面端适配 (媒体查询 + 弹性布局)

---

3. 首页模块

• 欢迎页 (welcome.html)
• 公告预览 (announcements-preview.html)
  • 动态加载 JSON 数据
  • 卡片模板渲染 (createHomeAnnouncementCard)
• 快捷入口：轮播 & 卡片布局

---

4. 日历功能 (my-calendar)

• FullCalendar 集成
• 事件来源：本地 JSON 或后端 API
• 定制样式：my-calendar.css 覆盖默认主题
• 交互：点击事件弹出详情或链接跳转

---

5. 通知列表 (notifications)

• 列表与日历两种视图切换
• 搜索 & 过滤：按课程、类型、时间
• 详情弹窗 (detailModal) 动态填充
• 前端状态：已读/未读切换更新样式

---

6. 个人中心 (profile)

• 显示与编辑用户信息
• 头像上传预览 (FileReader API)
• 通知提示 (自定义 notification 组件)
• 表单校验与异步提交

---

7. 系统设置 (settings)

• 主题 & 布局密度切换
• 通知配置：邮箱 & 推送
• 数据持久化：localStorage 保存偏好
• 模块化：settings.js 逻辑封装

---

8. 公共组件与样式

• 头部、侧边栏组件化加载 (sidebar-load.js)
• Font Awesome 版本管理与兼容性
• TailwindCSS + 自定义工具类 (custom.css)
• 统一的卡片、按钮样式 (.btn-primary, .card-hover)

---

9. 数据交互与本地存储

• fetch API 异步加载 JSON 数据
• error handling & loading states
• localStorage 用于保存用户偏好与临时状态

---

10. 前端交互 & 动画

• CSS 过渡与 Tailwind util 类
• 弹窗 (modal) 显示/隐藏控制
• 菜单与侧边栏折叠动画
• 通知滑入滑出效果

---

11. 难点 & 优化

• 社交图标兼容：Font Awesome 4.7 vs 6.x
• 性能：减少重绘、懒加载组件
• 扩展性：模块化目录与函数封装

---

12. 总结与展望

• 已实现核心功能与模块化布局
• 后续：后端接口对接、深色模式支持、SSR/静态生成

---

Q&A

欢迎提问！