结对作业第二次——原型实现

这个作业属于哪个课程	<班级的链接>
这个作业要求在哪里	<作业要求的链接>
结对学号	<222100425、222100427>
这个作业的目标	<世界游泳锦标赛的赛事信息平台原型的实现>
其他参考文献	《构建之法》

零、作业要求描述

通过之前学习过的Web技术，实现之前用墨刀开发的原型。并且通过gitcode来实现两个人协同完成代码的任务。

一、git仓库链接和代码规范链接

链接: 仓库链接

二、PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
- Discussion	结对讨论	20	20
- Estimate	估计这个任务需要多少时间	10	10
Development	代码分工	30	30
- Analysis	代码实现	480	480
- Improvement	代码改进	120	140
Reporting	报告	120	120
- Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	60	50
合计		850	860

三、成品展示

3.1首页部分(demo.html)

首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。再往下是一个滚动图片栏，展示一些赛事照片，最下面是一些赛事信息。

3.2选手信息部分（players.html）：

选手信息页面是导航栏+图片+正文信息组成，展示了选手的展示Country，Athlete，Gender，DOB信息。

选手的详细信息如上图所示。

3.3每日赛况部分（daily_matches.html）：

采用导航栏+图片+展开菜单栏的形式展现。点击想要查找的赛事右边的剪头后：

展示所选比赛的比赛结果信息，分别按照选手的成绩排名顺序从上到下展示，有选手排名、国际、图片、姓名和成绩等信息展示。（因为我们采用纯前端开发，数据的输入是一项繁琐且无效的行为，所以我们采用只输入一次数据，主要展示表现的方法，数据可能会重复显示）

3.4详细赛况部分（detailed_matches.html）

采用导航栏+图片+展开菜单栏的形式展现。包含了赛事的事件和名称，点击想要查找的赛事右边的图标后跳转到到对应的赛事信息，即每日赛事信息部分。

如上图所示。

3.5奖牌榜（medal_standings.html）

采用导航栏+图片+表格信息的形式展现，表格信息包含排名，金银铜牌数和奖牌总个数的信息。

3.6了解更多

采用导航栏+图片+表格信息的形式展现，主要展示官网赛事的理念和呼吁。

四、结对讨论过程描述

刚开始我们两个人先各自了解作业的要求，然后先各自思考大致应该怎么做，之后两个人在集中讨论（因为我们俩个是舍友好哥们，绝大部分事件都是线下口头讨论的，所以线上的截图几乎没有）。最后经过我们俩人的细致考量，在评估了团队的Web编程能力和时间成本之后，我们选择了用纯前端（html+css和vue数据处理）的方式来进行原型的开发设计。页面的代码工作我们进行五五划分开发，博客的撰写也是五五开，旨在充分接触每一个开发的过程细节。因为Web前端开发比较表面简单，开发起来没有什么困难，通过csdn和百度查找出现的问题，很快就能把出现的错误解决了。
下面是截图部分：

五、设计实现过程

所需要的部分统一安排一个导航栏部分，总体颜色和助教所给的网站差不多，都是以蓝色为主题。首先设计首页部分：根据之前模型的要求，从助教给的网站上获取图片并放入。然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。代码采用html+CSS纯前端方式。
下面是功能结构图：

六、代码说明

1.首页部分代码
主要展示首页的整体构造，因为是纯前端的东西，只需要排版什么的，没有什么可以多讲的。
2.每日赛事代码部分

这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。
3.详细赛事代码部分

通过div区分，因为在css中class=container部分会自动绘制边框将每个赛事进行分开，然后再每个div中添加图标文字等赛事信息，最后通过最右边的图标点击后触发跳转页面的功能，跳转到每日赛事的页面。
4.其他的页面代码实现也是大同小异，在这里就不进行展示了。

七、心路历程和收获

通过这次结对作业，我们充分感受到了一加一大于二。两个人的有效合作让我们在需求分析以及开发上有了事半功倍的感觉，充分锻炼了我们两个人的沟通能力、表达能力和合作能力。并且我们也发现了自身的不足之处，合作时遇到问题应该先沟通，沟通完后再去解决问题不能一个人的蛮干。总而言之，这次的结对作业成果我们都很满意。

八、评价结对队友

222100425对222100427：队友尽心尽责、效率快、沟通很好，分工的部分完成的很好，我对最后的成果很满意。
222100427对222100425：队友分析能力和沟通能力都很好，解决问题很快，我对最后的成果很满意。