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

[222000111赖安顺]

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第二次作业--编程实现
结对学号	222000110、222000111
这个作业的目标	采用web技术来实现原型中的功能
其他参考文献	无

目录

目录

• 目录
• 1、git仓库链接和代码规范链接
• 2、PSP表格
• 3、成品展示
• 3.1成品链接
• 3.2标题及导航栏
• 3.3页脚
• 3.4首页
• 3.5每日赛程
• 3.6选手排名
• 3.7晋级图
• 4、结对讨论过程描述
• 5、设计实现过程
• 6、代码说明
• 6.1导航栏实现
• 6.2选手排名实现
• 6.3晋级图实现
• 7、心路历程和收获
• 8、评价结对队友

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

仓库地址
代码规范

2、PSP表格

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

3、成品展示

3.1成品链接

成品链接

3.2标题及导航栏

我们总共在导航栏设置四个选项，用户可以通过点击相应的导航栏标签跳转到相应的界面

3.3页脚

页脚包含了基本的信息和相关版权的消息

3.4首页

在首页的开头有走马灯轮流播放各个选手的相关信息，用户通过这个了解自己喜欢选手的成绩

在首页中还包含这次澳大利亚网球公开赛举办地点的相关信息和相关的新闻

3.5每日赛程

我们按照澳大利亚网球公开赛比赛场地的不同，将比赛信息进行折叠

在点击不同场地标签时就会显示出详细的比赛信息，
且获胜者的姓名字体将被加粗

按照要求界面支持通过切换日期查看不同比赛日的赛程

在每日赛程的信息中我们提供按钮可以跳转到当场比赛的详细赛况

3.6选手排名

在选手排名界面我们可以看到Singles Aces Leaders的排名，并且展示Name、Rank、Matches和Aces.

3.7晋级图

可以通过晋级图看到选手的晋升路线 ，晋级图中要有选手和姓名和比分，并高亮显示晋级选手

鼠标移动到某一场比赛时需要高亮或显示边框提示

4、结对讨论过程描述

刚拿到题目时我们首先讨论如何实现之前原型设计，决定使用vue框架和使用element组件来帮助我们实现相关功能，通过vue的在线学习了解到vue数据的导入，element官网学习各种组件的使用方法，当遇到更加细致的问题时，我们通过网上收集相关的信息来实现具体的细节。其中又学习了flex布局的相关知知识来优化美观设计。

5、设计实现过程

6、代码说明

6.1导航栏实现

使用了element组件中的导航栏组件，对不同的html界面进行标识，然后通过vue的method来实现点击后不同html界面切换

6.2选手排名实现

使用了表格的组件来实现，通过vue来实现数据的传输

6.3晋级图实现

使用了走马灯组件来实现不同阶段比赛的分布，采用多重div结合来实现国家图片，选手姓名和比分的具体情况

7、心路历程和收获

赖安顺：通过这次结对作业我学习到了快速构建基本框架的方法，了解到HTML和css布局的相关操作，我相信这会对我之后的学习很有帮助

何国铭：这次实践作业，让我学会了很多前端的技术和框架，同时还学会了如何将项目部署到云服务器上，尽管过程困难多多，但总体上还是收获满满

8、评价结对队友

赖安顺评何国铭：队友有很高的收集和执行能力，这让我感到很可靠。

何国铭评赖安顺：思维敏捷，踏实能干，总能想出一些不错的点子，有这样的队友我很满意。