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

最新推荐文章于 2024-11-08 22:47:45 发布

222100116林雄

最新推荐文章于 2024-11-08 22:47:45 发布

阅读量335

点赞数 5

文章标签： elasticsearch 大数据搜索引擎

本文链接：https://blog.csdn.net/qq_61579888/article/details/137053968

版权

本文讲述了两个学生在软件工程实践课程中的合作项目，涉及git协作、原型设计和Web应用开发，包括网页头部设计、选手排行、详细赛况等功能的实现，以及他们在项目中的心得和评价。

摘要由CSDN通过智能技术生成

@[toc]
## 1、作业链接
[仓库链接](https://gitcode.net/qq_61579888/pair-project)
[网页链接](https://aimerfor.github.io/project-java/)
[代码规范链接](https://github.com/chjw8016/alibaba-java-style-guide)

## 2、PSP表格
| PSP |Personal Software Process Stages|预估耗时（分钟）|实际耗时（分钟）|
|:------| :------|------|-------|
| Planning |计划 |90|80|
| • Estimate | • 估计这个任务需要多少时间 |30|20|
| • Discuss| • 讨论 |60|60|
| Development |开发 |1050|1330|
|• Analysis |• 需求分析 |30|30|
|• Learning| • 学习git使用和新技能|300|400|
|• Coding|• 编码实现|600|800|
|• Code Review|• 代码复审|60|60|
|• Test and Improvement| • 测试与改进|60|40|
| Reporting | 报告 |80|100|
|• Achievements Exhibition|• 成果展示|60|80|
|• Postmortem & Process Improvement Plan| • 事后总结, 并提出过程改进计划|20|20|
|| 合计|1220|1510|

## 3、成果展示
### 3.1、网页头
![img](https://img-community.csdnimg.cn/images/97d788d6d41441d1b557d603fa3d9021.png "#left")

这是网页头的设计，包括了导航栏和世界游泳锦标赛的图标，导航栏包括了五个链接可以跳转到指定网页。

### 3.2、选手排行
![img](https://img-community.csdnimg.cn/images/7b857640b4d14dfc8351d61a562011cc.png "#left")

这是选手排行功能的实现，可以点击指定比赛进行数据查看，后台数据处理后通过下拉表格将数据展示出来。
数据包括Final阶段的Overall Rank，Country，Athlete，Age，Points。

![img](https://img-community.csdnimg.cn/images/7b080c2e78d343c09afc32de2996f8a0.png "#left")

支持同时查看多个比赛的数据。

### 3.3、详细赛况
![img](https://img-community.csdnimg.cn/images/6a48bc168e8143b3abae0058383fb2fa.png "#left")

这是详细赛况功能实现，除了可以点击指定比赛进行数据查看外，还可以查看不同阶段的比赛比如Final，Semifinal，Preliminary三个不同阶段的比赛。
数据包括Overall Rank，Country，Athlete，Age，Points，Pts Behind。
该图片是Final阶段的部分数据。

![img](https://img-community.csdnimg.cn/images/c68b5d6ceaff43abbee1ff8cdad97767.png "#left")

该图片是Semifinal阶段的部分数据。

![img](https://img-community.csdnimg.cn/images/8f34e520456e46a9b26c33cd271072d6.png "#left")

当某个比赛该阶段没有比赛的时候，该比赛下将显示“暂无数据”。
该图片是Preliminary阶段的部分数据。

### 3.4、每日赛况
![img](https://img-community.csdnimg.cn/images/2520fe61091a4640a897e969440f3bf4.png "#left")

这是每日赛况功能的实现，通过标签显示多各个时间段的各个比赛。
当点击某个标签按钮的时候，可以跳转到详细赛况页面内指定阶段的指定比赛。
例如点击上述图片中Men 1m SpringBoard·Preliminaries的按钮，就可以实现跳转到下述页面：

![img](https://img-community.csdnimg.cn/images/f843665dd8dd4474a034d70f9f12eff4.png "#left")

### 3.5、奖牌榜
![img](https://img-community.csdnimg.cn/images/5c6d6e0e3eb94de6a553827e8bf02b6c.png "#left")

这是奖牌榜功能的实现，通过三种不同奖牌的颜色直观地展示各国获奖数据。

### 3.6、了解更多
![img](https://img-community.csdnimg.cn/images/effda0b7b9664eaea9b5fb64f0fef2cd.png "#left")

这是了解更多功能的实现，展示了世界游泳锦标赛的一些信息。

## 4、设计实现过程
### 4.1、功能结构图

![img](https://img-community.csdnimg.cn/images/ee19d865d9d0457e98054b629d3beb9b.png "#left")

### 4.2、设计思路

```javascript
window.onload = function(){
for (let a = 0;a<gamesname.length;a++){
let innercontent = "<tr>\n" +
" <th>Overall Rank</th>\n" +
" <th>Country</th>\n" +
" <th>Athlete</th>\n" +
" <th>Age</th>\n" +
" <th>Points</th>\n" +
" <th>Pts Behind</th>\n" +
" </tr>";
const jsonObject = gamesinfo[a];
const jsonArray = jsonObject["Heats"];
const jsonObject1 = jsonArray[0];
const jsonArray1 = jsonObject1["Results"];

for (let i = 0; i < jsonArray1.length; i++) {
const result = jsonArray1[i];
const total = result["TotalPoints"];
const fullName = result["FullName"];
const rank = result["Rank"];
const age = result["AthleteResultAge"];
const country = result["NAT"];
const pts = result["PointsBehind"];

innercontent+="<tr>\n" +
" <td>"+rank+"</td>\n" +
" <td>"+country+"</td>\n" +
" <td>"+fullName+"</td>\n" +
" <td>"+age+"</td>\n" +
" <td>"+total+"</td>\n" +
" <td>"+pts+"</td>\n" +
" </tr>"
}

document.getElementById(gamesname[a]).innerHTML = innercontent;
}
for (let a = 0;a<gamesname2.length;a++){
let innercontent = "<tr>\n" +
" <th>Overall Rank</th>\n" +
" <th>Country</th>\n" +
" <th>Athlete</th>\n" +
" <th>Age</th>\n" +
" <th>Points</th>\n" +
" <th>Pts Behind</th>\n" +
" </tr>";
const jsonObject = gamesinfo2[a];
const jsonArray = jsonObject["Heats"];
const jsonObject1 = jsonArray[0];
const jsonArray1 = jsonObject1["Results"];

for (let i = 0; i < jsonArray1.length; i++) {
const result = jsonArray1[i];
const total = result["TotalPoints"];
const fullName = result["FullName"];
const rank = result["Rank"];
const result1 = result["Competitors"];
const age = result1[0]["AthleteResultAge"]+"/"+result1[1]["AthleteResultAge"];
const country = result["NAT"];
const pts = result["PointsBehind"];

innercontent+="<tr>\n" +
" <td>"+rank+"</td>\n" +
" <td>"+country+"</td>\n" +
" <td>"+fullName+"</td>\n" +
" <td>"+age+"</td>\n" +
" <td>"+total+"</td>\n" +
" <td>"+pts+"</td>\n" +
" </tr>"
}

document.getElementById(gamesname2[a]).innerHTML = innercontent;
}
init();
}
```
这是详细赛况处理数据并显示的功能，数据提取部分与个人实战一的实现类似，即使用多个js对象存放提取到数据，层层提取，在将网页数据存放在创建的js对象中，在初始化以及切换比赛阶段时都调用一次js文件中的函数，将指定数据提起出来后再构建一定格式的html元素，即表格元素，最后是使用DOM将html文档写入原html指定ID的元素中。

```javascript
function init() {
let name =["women 1m springboard+preliminaries","men 1m springboard+preliminaries",
"women 1m springboard+finals","men 1m springboard+finals","men 3m synchronised2+finals",
"women 10m platform+preliminaries","men 3m springboard+preliminaries","women 10m platform+semifinals",
"men 3m springboard+semifinals","women 10m platform+finals","Men 3m springboard+finals",
"women 3m springboard+preliminaries","women 3m springboard+semifinals","women 3m springboard+finals",
"women 10m synchronised+finals","men 10m synchronised+finals","men 10m platform+preliminaries",
"men 10m platform+semifinals","women 3m synchronised+finals","men 10m platform+finals"
]
for (let i = 0;i < name.length;i++){
document.getElementById(name[i]).onclick = ()=>{
location.href = `../matchDetail/matchDetail.html?${name[i]}`;
}

}
}
```
```javascript
function init() {
const name = [ "women%201m%20springboard",
"women%203m%20springboard",
"women%2010m%20platform",
"women%203m%20synchronised",
"women%2010m%20synchronised",
"men%201m%20springboard",
"men%203m%20springboard",
"men%2010m%20platform",
"men%203m%20synchronised",
"men%2010m%20synchronised"];
let id = location.search.slice(1);
if(id != null){
console.log(id);
for (let i = 0;i < name.length;i++){
if(id.includes(name[i])){
let id1 = name[i].replaceAll("%20"," ")
let type = id1.concat("1");
document.getElementById(type.toString()).open="open";
location.href=`#${type.toString()}`;
if (id.includes("preliminaries")){
console.log("preliminaries")
changeToPreliminary();
}else if (id.includes("semifinals")){
changeToSemifinal();
console.log("semifinals")
}else {
changeToFianl();
}
break;
}
}
}
}
```
这是每日赛况点击跳转实现指定数据的功能。
每日赛况页面设置init()函数实现点击事件检索和含参跳转。
详细赛况页面采用init()函数初始化页面实现参数检索。
当有参数传入时对参数进行校验从而打开相应标签按钮。

## 5、结对讨论
这里线下讨论的过程，同一个宿舍并没有进行线上讨论：
![img](https://img-community.csdnimg.cn/images/aa7bfb29f83c4cad96cb2652b0901790.jpg "#left")、

## 6、心路历程与收获
>222100116林雄:对js相关方法进行了复习，特别是含参跳转的几个方式，以及在js对于json文件的处理上有了初步实现。第一次实现了结对编码，在git的使用上了解了更多功能，以及熟悉了github的pages部署静态页面功能，很有收获的一次实践。

>222100117欧裕强:在这次实践中我复习了web前端有关的知识，更好地学习了有关git合作的经验，并且对于结对合作有更深的认识，在合作的过程也发现从前并没有进行过前后端分离开发而最终使用了纯前端开发，知道自己的能力还有很大的不足。
## 7、对对方的评价
>222100116林雄TO222100117欧裕强：裕强是个很有执行力的开发员，在项目实现上的细节把控的很到位，知识面也很广，知道很多所需要的函数和方法及其实现。伟大，无需多言！

>222100117欧裕强TO222100116林雄：林雄是个解决问题能力很强的队友，在开发过程中遇到困难时，能够很好地查阅相关资料并且很快找到问题的解决方法，学习能力强，对于团队的开发必不可少。