# zzsd_web **Repository Path**: leocc001/zzsd_web ## Basic Information - **Project Name**: zzsd_web - **Description**: 升达校园智慧服务小站-数智暖达 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-04-27 - **Last Updated**: 2026-04-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 升达校园智慧服务小站 - 数智暖达 ## 写在前面 > 作者：李飞良 赵晓鹏 > > 班级：2024级软件工程本科1班 > > 院系：信息工程学院 > > 学号：李飞良 202405010132 赵晓鹏 202405010127 > > qq邮箱：[2771169835@qq.com](mailto:2771169835@qq.com) > > 项目开源地址：https://gitee.com/leocc001/zzsd_web ### 职责分工 **李飞良：主要负责html、页面解耦、css、js代码开发** - html页面进行解耦，各个模块对应一个html页面，方便后期维护管理 - Css: 主题变量的定义、布局系统、组件样式代码开发、功能模块代码开发、动画与过渡代码开发、浏览器适配等功能实现 - Js : 全局状态管理、DOM渲染函数、轮播功能、交互功能、数据管理、工具函数、事件绑定等功能实现 **赵晓鹏：主要负责页面元素收集** - 提出功能需求，以及各个模块执行流程，例如：提出今日课表、教室查询、校园生活、学习资源、心灵驿站、校园风光等模块的功能实现，编写大致架构的html页面 - 收集官网JavaScript中的组件源代码 ### 为什么要参加这个活动 > 李飞良： > > 原本是学习后端开发Java方向，但是调研了市场发现，现在的后端开发，必须要会前端的知识，所以在学习后端开发的过程中，简单的学习了一些前端的组件，html ，css , JavaScript，Vue3。但是感觉掌握的不是很牢固，刚好学校有这个Web网页大赛就打算参加了，也是对自己学习前端知识的一个总结和整理吧，在写前端的页面过程中也遇到了很多问题。但是也没有放弃，通过不断的查阅资料，使用一些AI编程工具，做出了现在这个项目。虽然做的不是很好，但是也是在自己的能力范围内做出了一个还算可以的前端页面吧。 > > 有些东西要想完整的，需要后端来支持，比如用户登录，查询各个年级的课表，这些都需要数据库来支撑，所以在这个前端的页面中，数据展示部分我直接写死了。并不能进行的CRUD。 > > 因为精力有限，如果一边写代码一边设计的话，进程太慢了，所以我主要负责的是代码编写部分，组件收集部分交给了小伙伴 自我认为，我们做的项目虽然有些简陋，甚至很一言难尽，但是啊秉承学习的态度，我们还是会认真的介绍我这个项目。在开发的角度来说，做出一个项目只是其中的一部分，还有一部分就是能够让用户明白这个项目如何用。接下来有我来介绍一下这个项目。 ## 设计思路 整体架构 - **多页面应用架构**：采用传统的多页面设计，每个功能模块对应一个独立的HTML文件，通过导航栏进行切换 - **响应式设计**：使用CSS Grid和Flexbox实现响应式布局，适配不同屏幕尺寸 - **模块化开发**：将样式和脚本分离，使用共享的style.css和script.js文件，提高代码复用性 - **性能优化**：针对Edge浏览器进行了性能优化，减少高开销的模糊效果和动画 技术栈 - **前端框架**：原生HTML + CSS + JavaScript - **样式管理**：使用CSS变量实现主题一致性 - **数据存储**：使用localStorage实现数据持久化 - **交互体验**：通过CSS动画和JavaScript实现流畅的用户交互 - **外部资源**：集成了天气API、音乐播放等外部资源 > 这边集成的天气API和音乐播放直接写死到前端，并没有动态进行，原因如下 > > 数据问题：这仅仅是一个前端页面，并没有后端MySQL数据支撑，所以有些功能模块也是我直接写死的，例如没有默认的登录功能，没有对全年级没有对全年级课表的展示，在那些失物招领，和二手交易平台里面的内容都是直接写死在前端等等一系列东西。 > > API问题：例如集成天气API，这个不是免费的(费用还挺高)，学生邮箱认证可以免费使用一年，但是没有申请成功所以这边写死了，所以没有调用API ## 打开方式 ![输入图片说明](project/pdf_word_excel/image.png) ## 功能介绍 ### 1. 首页 (index.html) ![输入图片说明](project/pdf_word_excel/image2.png) - **校园概览**：展示学校基本信息和快速访问入口 - **天气信息**：显示实时天气和未来天气预报 - **校园公告**：滚动展示最新校园通知 - **校园数据概览**：展示学生人数、建筑面积等基本数据 - **快捷功能入口**：提供各模块的快速访问按钮 ### 2. 今日课表 (schedule.html) ![输入图片说明](project/pdf_word_excel/image3.png) > 可以查看今日、明日的课表，也可以选择周次，星期查看各星期的课程内容 - **课表切换**：支持今日/明日课表切换 - **周次选择**：可选择不同周次查看课表 - **星期选择**：可选择不同星期查看课表 - **课程详情**：显示课程名称、时间、地点和教师信息 - **课程提醒**：支持设置课程提醒功能 ### 3. 教室查询 (classroom.html) ![输入图片说明](project/pdf_word_excel/image4.png) > 可以查看本周教学楼的使用情况，方便同学们查找空教室 - **教学楼选择**：可选择不同教学楼 - **楼层选择**：可选择不同楼层 - **教室状态**：显示教室当前使用状态 - **空教室查询**：可查询特定时间段的空教室 - **教室预约**：支持预约空教室 ### 4. 校园生活 (campus-life.html) ![输入图片说明](project/pdf_word_excel/image5.png) > 通过随机数模拟了食堂的动态拥挤情况，也有失物招领，二手交易，都是动态实时变化 - **食堂拥挤度**：显示各食堂的实时拥挤程度 - **失物招领**：展示失物招领信息，支持轮播展示 - **二手交易**：提供二手物品交易平台 - **近期活动**：展示校园近期活动信息 ### 5. 学习资源 (study.html) ![输入图片说明](project/pdf_word_excel/image6.png) > 学习资料资源分为7大板块 - **常用链接：**集成郑州升达经贸管理学院官网，智慧校园的快捷入口 ![输入图片说明](project/pdf_word_excel/image7.png) > 例如点击学校官网即可进入学校官网 - **学习资料下载**：方便同学们下载学习资料 ![输入图片说明](project/pdf_word_excel/image8.png) > 点击下载按钮，即可下载资料到本地 - **学习计划制定**：允许用户创建和管理学习计划 ![输入图片说明](project/pdf_word_excel/image9.png) > 可以写出学习计划，等计划完成，可以标记已完成或者删除即可 - **学习打卡功能**：记录每日学习时长和完成情况 ![输入图片说明](project/pdf_word_excel/image10.png) > 可以实时打卡学习的情况，同时还会记录本日学习时间，本周学习时间，还有总学习时间 - **在线学习平台**：集成MOOC、学习通等平台的快捷入口 ![输入图片说明](project/pdf_word_excel/image11.png) > 集成了优秀的学习官网，可以点进去直接进入学习官网进行学习 - **学习笔记共享**：允许用户上传和下载学习笔记 ![输入图片说明](project/pdf_word_excel/image13.png) - 同时设有笔记分享功能和下载功能，大家可以上传自己的笔记，或者下载别人的笔记进行学习 - **AI小助手：**可以回答一些问题 ![输入图片说明](project/pdf_word_excel/image14.png) > 可以问一些常见的问题，AI小助手会回答 ### 6. 心灵驿站 (health.html) ![输入图片说明](project/pdf_word_excel/image15.png) - **心理咨询预约**：提供心理咨询服务预约功能 - **每日健康小贴士**：随机展示健康生活建议 - **今日心情**：记录和展示用户心情 - **减压音乐推荐**：提供舒缓音乐播放功能 - **健康饮食建议**：根据季节推荐健康饮食方案 - **运动打卡**：记录每日运动情况 - **即刻倾诉**：提供情绪倾诉和支持回复功能 > 心理咨询功能，可以选择预约时间和预约时段，然后提交预约便可预约成功 > > 每日健康小贴士，可以提醒健康，然后换一条的话可以更换 > > 今日心情，每天可以选择自己适合的心情 > > 减压音乐推荐可以点击音乐，然后进行音乐播放 > > 健康饮食建议，会根据季节给你推荐合适的食物 > > 要及时倾诉，如果有什么学习压力或者心理压力的话，可以把这些写在这上面，然后提交倾诉，下面会有解析 > > 然后运动打卡可以记录运动时长、运动感受 ### 7. 校园风光 (scenery.html) ![输入图片说明](project/pdf_word_excel/image16.png) - **风光展示**：展示校园美景照片 - **照片****轮播**：支持照片轮播查看 - **照片详情**：点击查看照片详情 > 这些照片都是咱们升达的照片，大多数的照片都是在咱们升达的抖音官网找的 ## 各个模块的详细说明 ### 导航模块 - **响应式导航栏**：在桌面端显示完整导航菜单，在移动端显示汉堡菜单 - **导航切换**：点击导航项可切换到对应页面 - **当前页面标识**：当前页面在导航栏中高亮显示 ### 课表模块 - **周次计算**：根据当前日期自动计算周次 - **课程数据**：使用模拟数据展示课程信息 - **课表渲染**：根据选择的周次和星期动态渲染课表 - **课程提醒**：使用浏览器通知实现课程提醒功能 ### 教室查询模块 - **教室数据**：使用模拟数据展示教室信息 - **状态显示**：通过不同颜色标识教室使用状态 - **空教室筛选**：根据时间筛选空教室 - **预约功能**：实现教室预约和管理 ### 校园生活模块 - **食堂拥挤度**：使用模拟数据展示食堂拥挤情况 - **失物招领轮播**：自动轮播展示失物招领信息 - **二手交易**：展示二手物品信息，支持联系卖家 - **活动日历**：展示近期校园活动 ### 学习资源模块 - **学习计划**：支持创建、编辑和删除学习计划 - **学习打卡**：记录学习时长和内容，生成统计数据 - **平台集成**：提供常用学习平台的快捷链接 - **笔记共享**：支持上传和下载学习笔记 ### 心灵驿站模块 - **心理咨询**：提供预约表单和咨询信息 - **健康小贴士**：随机生成健康生活建议 - **心情记录**：记录用户每日心情并给予反馈 - **音乐播放**：集成音乐播放器，提供舒缓音乐 - **饮食建议**：根据季节提供健康饮食建议 - **运动打卡**：记录运动情况，生成历史记录 - **即刻倾诉**：提供情绪倾诉功能，给予支持回复 ### 校园风光模块 - **照片展示**：以轮播形式展示校园照片 - **照片详情**：点击照片查看大图和详情 - **用户上传**：支持用户上传校园照片 - **照片管理**：管理已上传的照片 ### 数据存储模块 - **本地存储**：使用localStorage存储用户数据 - **数据持久化**：确保刷新页面后数据不丢失 - **数据管理**：提供数据的增删改查功能 ### 交互体验模块 - **动画效果**：添加平滑的过渡动画 - **响应式设计**：适配不同屏幕尺寸 - **用户反馈**：提供操作反馈和提示 - **错误处理**：处理各种异常情况 ## 技术亮点 1. **模块化设计**：将功能划分为独立模块，便于维护和扩展 2. **响应式布局**：使用现代CSS布局技术实现响应式设计 3. **性能优化**：针对不同浏览器进行性能优化 4. **用户体验**：注重细节，提供流畅的交互体验 5. **数据持久化**：使用localStorage实现数据持久化 6. **外部资源集成**：集成天气API、音乐播放等外部资源 7. **模拟数据**：提供丰富的模拟数据，方便展示功能 ## 总结 郑州升达经贸管理学院校园智慧服务系统是一个功能全面、设计美观、用户体验良好的多页面Web应用。系统涵盖了校园生活的各个方面，包括课表查询、教室管理、校园生活、学习资源、心理健康和校园风光等模块，为学生提供了便捷的校园服务。 系统采用现代前端技术栈，实现了响应式设计、模块化开发和性能优化，确保在不同设备上都能提供良好的用户体验。同时，系统集成了多种外部资源，丰富了功能内容。 通过本系统，学生可以方便地查询课表、预约教室、了解校园动态、管理学习计划、关注心理健康，以及欣赏校园风光，为校园生活提供了全方位的支持。