582
社区成员
发帖
与我相关
我的任务
分享结对第二次作业--编程实现
| 这个作业属于哪个课程 | 软件工程-23年春季学期 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业--编程实现 |
| 结对学号 | 222000224 022000405 |
| 这个作业的目标 | 编程实现上一次原型设计作业的部分功能 |
| 其他参考文献 | GoogleStyleGuides、CSDN、《构建之法》 |
目录
- 声明
- GitCode仓库链接
- 代码规范链接
- PSP表格
- 成品展示
- 结对讨论过程描述
- 设计实现过程
- 心路历程
- 代码说明
- 收获
- 评价结对队友
- 关于本博客
声明
本项目的数据来源于 Official Website of the Australian Open 2023 | AO，该爬取行为仅用于课程教学。
GitCode仓库链接
代码规范链接
PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 10 | 10 |
| • Estimate | • 估计这个任务需要多少时间 | 10 | 10 |
| Discussion | 结对讨论 | 270 | 270 |
| • Analysis | • 分析功能，决定分工 | 120 | 150 |
| • Coding Standard | • 代码规范 | 120 | 100 |
| • Design Spec | • 生成设计文档 | 30 | 20 |
| Development | 开发 | 660 | 840 |
| • Design | • 具体设计 | 180 | 200 |
| • Coding | • 具体编码 | 360 | 540 |
| • Code Review | • 代码复审 | 120 | 100 |
| Reporting | 报告 | 140 | 130 |
| • Test Report | • 撰写博客 | 90 | 100 |
| • Size Measurement | • 计算工作量 | 20 | 10 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 30 | 20 |
| 合计 | 1080 | 1450 |
成品展示
澳大利亚网球公开赛
视频演示：
结对讨论过程描述
由于两人为舍友，大多数交流都由口头完成。
附一些提交记录
设计实现过程
心路历程
我们在设计项目时，最先想到的是参考上次的原型模型和澳大利亚网球公开赛的官网。因此我们的成品也与这两者在外观和交互逻辑上都高度还原。
导航栏与标题栏部分：
- 我们复刻了官网的标题栏样式，包括标题两侧的两个svg图案，关于如何使右侧的图案居下显示，这也是一度让我们头疼的问题之一。
- 关于控件在鼠标悬停时的动画效果，先前我们完全没有接触过，最后我们查询资料后决定采用了css的transition属性来实现。
在实现每日赛况时，我们也遇到了许多问题：
- 由于我们的数据是从网上爬取的，因此我们需要对数据进行处理，使其能够被我们的网页正确解析。
- 日期选择栏的交互逻辑，我们认为官网通过左右两个按钮来切换日期的方式不够人性化，因此我们采用了滚动条的方式来选择日期。
- 我们认为AO官网页面对于页面大小的适配非常人性化，因此我们花了大工夫来还原这个效果（使用了flex和flex-basis属性），详见视频演示。
选手排名部分： - 与每日赛况类似，我们也仿照了官网对于页面大小的适配，使得页面在不同大小的屏幕上都能够正常显示。当网页窗口足够宽时，并排显示两列选手的数据，当网页窗口较窄时，将选手的数据显示为一列，此时网页会首先分别展示男子和女子ACE选手的信息，然后再分别双方的详细数据。同时，在各个窗口大小下，双方选手的半身像也能以合适的大小和位置显示，详见视频演示。
- 为了使表格中每一行的颜色交错，我们在css中定义了两种不同的表格行样式，然后通过对表格行的奇偶性进行分别应用来实现。
晋级图部分：
- 最为困扰我们的莫过于赛事间的连线实现。如果将连线元素放入赛事数据元素中，将会使网页元素的位置乱套。因此我们创建了一个与整个晋级图面板尺寸相同的连线元素，浮于数据上方。我们在js中获取了各个赛事元素相对连线面板的位置坐标，并按照一定的逻辑连接绘制出来。
- 同样是为了实现页面适配，我们为晋级图面板加入了滚动条，使得当网页窗口较窄时，用户可以通过滚动条来查看完整的晋级图。
- 由于时间原因，我们没有将完整的晋级图数据封入网页中，因此呈现出的数据可能与真实数据存在出入。
- 由于每场比赛的回合数不同，用于展示比分的控件较难以设计。
代码说明
导航栏的样式及过渡动画实现的css代码片段：
```css
/导航栏/
.nav-link {
margin: 5px auto;
padding: 5px;
}
#navbar-nav{
position: relative;
display: flex;
flex-wrap:nowrap;
align-items: center;
justify-content: space-between;
padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
align-items: center; /* 将列表项垂直居中 /
height: 50px; / 设置列表项高度 */
gap: 10px;
padding:10px 30% 0px 30%;
}
#navbar-nav .nav-item .nav-link{
flex-wrap:nowrap ;
}
/选中动画 条/
#navbar-nav .nav-item .nav-link {
position: relative;
}
#navbar-nav .nav-item .nav-link::after {
content: '';
display: block;
width: 0%;
height: 2px;
background-color:rgb(45, 125, 245);
position: absolute;
bottom: -2px;
left: 25%;
transition: width 0.3s ease-out;
}
#navbar-nav .nav-item .nav-link:hover::after,
#navbar-nav .nav-item .nav-link:focus::after {
width: 50%;
}
/选项激活/
#navbar-nav .nav-item .active {
font-weight: bold;
color: rgb(0,157,255);
}
/选中动画 字体/
.nav-link-animate {
transition: color 0.5s ease;
}
.nav-link-animate:hover {
color: rgb(45, 125, 245);
}
#navbar-nav .nav-item .active::after {
content: '';
display: block;
width: 50%;
height: 2px;
background-color: rgb(0,157,255);
margin-top: 4px;
}
思路介绍：为导航栏的每个选项添加一个active类，当点击某个选项时，为其添加active类，同时移除其他选项的active类。这样，我们就能够通过active类来改变选项的样式。
为每个选项添加一个下划线，当选项被激活时，下划线的宽度变为50%，同时，选项的颜色也会发生变化。
导航栏中澳大利亚网球公开赛的logo显示参考了官网，采用了svg的矢量图形式：
```html
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 88 44" height='30px'>
<title>Australian Open Logo</title>
<path
d="M65.4 31.1c-5.2 0-9.4-4.2-9.4-9.5 0-5.2 4.2-9.5 9.4-9.5s9.4 4.2 9.4 9.5-4.2 9.5-9.4 9.5M65.5 0C53.6 0 44 9.7 44 21.7s9.6 21.7 21.5 21.7S87 33.7 87 21.7C86.9 9.7 77.3 0 65.5 0">
</path>
<path d="M25 1h-6.9L0 42.5h13.4L21.6 21l8.1 21.5h13.4z"></path>
</svg>
/*svg颜色*/
path {
fill: rgb(0,145,210);
}
每日赛况中，用于自适应网页大小的html代码片段:
#con1{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.score-row {
flex-basis: 320px;
flex-grow: 1;
width: 100%;
height: 200px;
margin: 10px;
border: 1px solid #e6e6e6;
-webkit-transition: all .25s ease;
transition: all .25s ease
}
思路介绍：当网页宽度小于等于768px时，flex-basis的值为320px，此时，每行显示一个元素；当网页宽度大于768px时，flex-basis的值为100%，此时，每行显示两个元素。
选手排名中，用于自适应网页大小的html代码片段:
<div style="width:90%;margin:0 5%;display: flex;flex-wrap: wrap;justify-content: center;">
<div style="flex: 1 0 auto;flex-basis:420px;width:100%;left:0%;">
<div class="containerL">
...
</div>
</div>
<div style="flex: 1 0 auto;flex-basis:420px;width:100%;right:0%;">
<div class="containerR">
...
</div>
</div>
</div>
<div style="width:90%;margin:0 5%;display: flex;flex-wrap: wrap;justify-content: center;">
<div style="flex: 1 0 auto;flex-basis:420px;width:100%;left:0;">
<div class="container2L">
<p class="title" id="Title1">Men’s Singles Aces <br> Leaders</p>
</div>
<div class="containerTableL">
...
</div>
</div>
<div style="flex: 1 0 auto;flex-basis:420px;width:100%;right:0">
<div class="container2R">
<p class="title" id="Title2">Women’s Singles Aces <br> Leaders</p>
</div>
<div class="containerTableR">
...
</div>
</div>
</div>
晋级图中用于连线的js代码片段:
var cards = document.querySelectorAll(".match-c");
var lines = document.getElementById("lines");
for (var i = 0; i < cards.length; i++) {
const rect = cards[i].getBoundingClientRect();
const refRect = lines.getBoundingClientRect();
var y = rect.top + rect.height / 2 - refRect.top;
var x1 = rect.left - 55 - refRect.left;
var x2 = rect.left - refRect.left;
var x3 = rect.right - refRect.left;
var x4 = rect.right + 55 - refRect.left;
/*将x1,x2,x3,x4用path连线*/
var path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
var path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
var path3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
path1.setAttribute("x1", x1);
path1.setAttribute("y1", y);
path1.setAttribute("x2", x2);
path1.setAttribute("y2", y);
path1.setAttribute("d", "M" + x1 + " " + y + " " + x2 + " " + y);
path1.setAttribute("class", "connection");
path2.setAttribute("x1", x2);
path2.setAttribute("y1", y);
path2.setAttribute("x2", x3);
path2.setAttribute("y2", y);
path2.setAttribute("d", "M" + x2 + " " + y + " " + x3 + " " + y);
path2.setAttribute("class", "connection_2");
path3.setAttribute("x1", x3);
path3.setAttribute("y1", y);
path3.setAttribute("x2", x4);
path3.setAttribute("y2", y);
path3.setAttribute("d", "M" + x3 + " " + y + " " + x4 + " " + y);
path3.setAttribute("class", "connection");
lines.appendChild(path1);
lines.appendChild(path2);
if (i != cards.length - 1) {
lines.appendChild(path3);
}
/*x1="646" y1="237" x2="756" y2="468" class="connection" id="line11*/
}
var links = [[1, 2], [4, 5], [8, 9], [11, 12], [3, 6], [10, 13], [7, 14]];
for (var i = 0; i < links.length; i++) {
var rectA = cards[links[i][0] - 1].getBoundingClientRect();
var rectB = cards[links[i][1] - 1].getBoundingClientRect();
var refRect = lines.getBoundingClientRect();
var y1 = rectA.top + rectA.height / 2 - refRect.top;
var y2 = rectB.top + rectB.height / 2 - refRect.top;
var x = rectA.right - refRect.left + 55;
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("x1", x);
path.setAttribute("y1", y1);
path.setAttribute("x2", x);
path.setAttribute("y2", y2);
path.setAttribute("d", "M" + x + " " + y1 + " " + x + " " + y2);
path.setAttribute("class", "connection");
lines.appendChild(path);
}
思路介绍：首先获取所有的比赛卡片，然后遍历所有的卡片，获取每个卡片的位置信息，然后根据这些位置信息计算出每两个卡片之间的连线的起点和终点的坐标，然后使用svg的path标签将这些坐标连接起来，实现连线的效果。
收获
- 222000224赵翊琛：
通过本次作业，我学会了如何使用js获取控件的位置信息，并为其添加子元素、如何使用svg绘制图形、如何使用css实现各种尺寸的设备显示的响应式布局。 - 022000405陈炜彬：
通过本次作业，更加熟练地掌握了网页开发，在设计并实现页面的过程中巩固了知识，更深入了解了bootstrape框架的使用技巧，并顺利实现想要的表现效果，自己在本次作业中收获良多。评价结对队友
- 222000224 赵翊琛 对 022000405 陈炜彬 的评价：
虽然对方一开始不知道从哪（ChatGPT）搞来了很多奇奇怪怪的代码把布局搞得弄得很乱，调了很久才把一些细节弄成想要的样子。但是对方也完成了很多我做不到的东西，比如svg的绘制，css的动画效果。总体来说，对方的代码质量很高，而且对于一些细节的处理也很到位，希望以后能够继续合作。 - 022000405 陈炜彬 对 222000224 赵翊琛 的评价：
基础扎实，技术过硬，帮我解决了许多开发中遇到的问题，教会了我很多的新东西，精益求精，将细节做到最好，好队友！关于本博客
为了方便两个人共同维护博客，我们将博客托管在了GitCode上，仓库地址
...全文
请发表友善的回复…
发表回复
