结对第二次作业——编程实现

222200226黄文乐 2024-09-30 22:28:49

这个作业属于哪个课程	2401_CS_SE_FZU
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222200226，222200224
这个作业的目标	实现原型设计中所构想的功能:奖牌榜排名、每日赛程、对阵表
其他参考文献	构建之法
目录 1.仓库链接和代码规范链接 1.1仓库链接 1.2代码规范链接 1.3部署地址 2.psp表格 3.成品展示 3.1奖牌榜 3.2每日赛程 3.3对阵图 4.结对讨论过程描述 5.设计实现过程 5.1需求分析 5.2技术选型 6.代码说明 6.1奖牌榜 6.2每日赛程 6.3详细赛况 6.4对阵图 7.心路历程和收获 8.评价结对队友

1.仓库链接和代码规范链接

2.psp表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	20
• Estimate	• 估计这个任务需要多少时间	30	20
Development	开发	2000	2200
• Analysis	• 需求分析（包括学习新技术）	300	320
• Design Spec	• 生成设计文档	30	60
• Design Review	• 设计复审	30	30
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	40	60
• Design	• 具体设计	160	110
• Coding	• 具体编码	600	650
• Code Review	• 代码复审	290	380
• Test	• 测试（自我测试，修改代码，提交修改）	550	620
Reporting	报告	110	90
• Test Report	• 测试报告	50	40
• Size Measurement	• 计算工作量	30	30
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	20
合计		2140	2310

3.成品展示

3.1奖牌榜

奖牌榜排名显示所有国家的奖牌获取情况和奖牌排名

奖牌榜界面可以实现与每日赛程的跳转

3.2每日赛程

展示每日赛程，支持通过左上角的菜单切换日期查看对应日期赛程

展示abcd组小组赛赛事，可以通过点击页面上方的按键进行切换查看各组小组赛与1/4决赛、半决赛至决赛

3.3对阵图

直观展示了赛事的进程，实现鼠标移入时对应赛事高亮显示

4.结对讨论过程描述

5.设计实现过程

5.1需求分析

奖牌榜排名：需要显示排名、国家、金牌、银牌、铜牌和总数。
每日赛程：需要展示比赛类型、时间、项目、参赛国家和比分，并且能够通过日期切换查看不同赛程。
对阵表：需要以图表形式展示比赛进程和结果，鼠标移动到某场比赛时需要高亮显示

5.2技术选型

使用HTML、CSS、JavaScript技术
网页数据综合运用了本地JavaScript对象和外部API动态写入来获取
通过html来设计网页的布局，css设置类的样式、实现鼠标移入时的样式变化，JavaScript编写函数来实现页面跳转及其他具体功能。

###5.3功能架构图

6.代码说明

6.1奖牌榜

通过fetch从本地文件夹data中获得所需的json格式的数据，然后处理成所需的对应格式后排列到界面上

6.2每日赛程

通过api连接从对应的网站处获得每日赛程的数据json，在日期选择处修改对应的api源以获得不同的数据

6.3详细赛况

在每日赛程跳转时传递对应的活动id然后通过活动id得到所需的json数据，并用统一格式输出

6.4对阵图

主要对css样式进行设计，将1/4决赛的比赛、半决赛进行分类，使得界面较为协调。

7.心路历程和收获

222200226_黄文乐:我觉得这次实践非常有挑战性，首先时间就是一个大问题，但是终于还是在我和队友队友的共同努力下解决。感觉对新知识的学习能力又得到了极大的训练。
222200224_徐逸凡：这次的结对作业总体难度不大，主要是对前端的接触比较少，在学习完知识之后运用的还算熟练，绘制对阵图时对flex布局有了更深的理解，在项目之外，还积累了git技术的经验，使用分支，同步开发，提高了开发的效率