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

[222000203陈英杰]

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第二次作业--编程实现
结对学号	22200203、222000227
这个作业的目标	结对合作，编码实现
其他参考文献	CSDN、《构建之法》

目录

• 1.git仓库地址
• 2.PSP表格
• 3.服务器的访问链接
• 4.成品展示
• 5.结对讨论过程
• 6.设计实现过程
• 7.代码说明
• 8.心路历程与收获
• 9.评价结对队友

1.git仓库地址

点击这里

2.PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	20
Estimate	估计这个任务需要多少时间	30	20
Development	·开发	1050	1335
Analysis	需求分析(包括学习新技术)	240	300
Design Spec	讨论设计思路	30	45
Design Review	设计复审	30	20
Coding Standard	代码规范 (为目前的开发制定合适的规范)	60	30
Design	具体设计	30	30
Coding	具体编码	600	880
Code Review	代码复审	60	30
Test	测试（自我测试，修改代码，提交修改）	210	230
Reporting	·报告	100	120
Test Report	测试报告	60	40
Size Measurement	计算工作量	20	20
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	50
	合计	1260	1565

3.服务器的访问链接

http://43.137.15.200/Daily_fixtures.html

4.成品展示

我们完成了最基本的三个功能的三个，和了解更多的页面和一些小功能。

• 选手排名
  主要完成了显示排名的两个表格，还做了一个下拉列表，暂时只做了变换第一个表格中的数据模块。

• 每日赛程
  完成了展示每一天的赛事（现只做了day1到day3），显示比赛类型(女单男单等)、比赛场地、参与选手、比赛时间和比分，且获胜者姓名加粗显示。
  支持通过切换日期查看不同比赛日的赛程。

• 晋级图
  可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手，鼠标移动到某一场比赛时需要高亮或显示边框提示。
  可通过滚动条去找想要的赛事。

• 了解更多
  通过图文简单的介绍了一下澳大利亚网球公开赛的历史

5.结对讨论过程

刚拿到这个作业时，我们讨论了要用什么方式实现，最后受限于我们的编程水平，我们决定使用纯前端的方式实现编码。在我们实现编码的过程中也遇到了很多的阻碍，最后我们通过询问同学，上网查找相关资料解决了问题。我们之间的合作通过线上交流，通过gitcode共享代码。而且我们也会在线下进行讨论，分配工作，分享经验。

• 讨论过程
  

  

  
  

  

  
  

  

6.设计实现过程

我们的设计思路是先分工完成最基本的三个功能，如果时间有剩余我们再编写附加功能的代码。于是我们先完成三个模块的编码，再实现一个导航栏可以实现不同页面之间的跳转。最后我们粗略的编写了一个了解更多页面。

• 功能结构图
  

  

7.代码说明

这次作业代码实现过程与第一次个人作业大同小异，但在方法的实现中略有不同。首先从官网获取json数据。（用了上次获取的文件）

以每日赛程为例，在body中加入iframe标签，inframe内放置不同的html，添加按钮的onclick事件，，实现不同天数的跳转。

    <div id = "a">
        <iframe src="q1.html" width="1500px" height="600px" id="frame"></iframe>
    </div>

因为不知道每天有多少场比赛，所以需要动态生成控件来存放json的数据。首先写一个add（）函数来生成单场比赛的控件，以下是部分控件的代码：

    var div0 =document.createElement('div');
    div0.style.cssText = 'border:1px solid black;display:inline-block; width:400px; z-index:100; height:100px;white-space: nowrap;background-color:#ECECEC';

    var div1 =document.createElement('div');
    div1.style.cssText = 'width:300px; z-index:100; height:20px;display:inline-block;';
    div1.textContent = "";
    div1.textContent.fontsize(50);
    div0.append(div1);

    var div2 =document.createElement('div');
    div2.style.cssText = ' width:100px; z-index:100; height:20px;display:inline-block;font-size: 100%;line-height: 1;text-align:right';
    div2.textContent = "";
    div0.append(div2);

接下来往控件中写入所需的json文件中数据，以下是部分读取数据的代码：

    var xhr = new XMLHttpRequest();
    var text1 ="";
    xhr.open("GET", "D1.json", true);
    xhr.onload = function() {
        if (xhr.status == 200) {
            var jsonObj = JSON.parse(xhr.responseText);
            //div1.textContent = jsonObj.matches[0].event_uuid;
            var flag = 1;
            if(jsonObj.matches[num].teams[0].status == "Winner"){
                flag = 0;
            }
            if(flag == 0){
                div3.style.fontWeight = "bold";
                div4.style.fontWeight = "bold";
            }
            else{
                div5.style.fontWeight = "bold";
                div6.style.fontWeight = "bold";
            }
            var temp3 = jsonObj.matches[num].event_uuid;
            for(var i = 0;i < jsonObj.events.length; i++){
                if(temp3 == jsonObj.events[i].uuid){
                    div1.textContent = jsonObj.events[i].name;
                    break;
                    }
                }
            div2.innerText = "比赛持续时间:\n" + jsonObj.matches[num].duration;
            div2.style.justifyContent = "center";
            div2.style.alignItems = "center";
            ........
        }
    };
    xhr.send();

最后根据每天的比赛场次调用add()函数，实现动态生成控件

function load(){
    var l = 0;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "D1.json", true);
    xhr.onload = function() {
      if (xhr.status == 200) {
        var jsonObj = JSON.parse(xhr.responseText);
        l = jsonObj.matches.length;
    console.log(l);
    for(var i = 1;i < l;i++){
        add(i-1);
        var d_block =document.createElement('div');
        d_block.style.cssText = 'width:500px; z-index:100; height:50px;display:inline-block;font-size:50;';
        document.body.append(d_block);
        if(i%2 == 0){
            var brt = document.createElement('br');
            document.body.append(brt);
        }
    }
     }
     };
    xhr.send();
}

8.心路历程与收获

• 222000203陈英杰：

  在这次作业之前有学过web，这次作业算是一次不错的复习和检验。在这次结对作业中，我发现自己在web方面还有很多的不足，在页面布局方面做的并不好，页面的整体布局比较一般，还有像外框显示自己没法完成，全靠队友帮忙，从中也学到了不少知识。还有一点就是云服务器的配置和部署，因为之前没有做过，在这次云服务器部署中走了很多弯路，像是找的教程与我们的作业不符，导致配置完后，作业无法上传。不过最后还是解决了，也初步了解了云服务器的使用。

• 222000227周禹辰：

  这次作业采用全前端编写，在这过程中也遇到了许多没遇见过的问题，这些问题也在各种方式下解决了。这次的编码虽然有些坎坷，但是复习并且深入了web技术的学习，对于html、css、javascript等web技术也有了更深的理解，还是收获满满的。

9.评价结对队友

• 222000203陈英杰：

  周禹辰同学是个很厉害的人，这次作业中我有很多不懂的东西都是靠他来解决，像是边框的显示问题，还有在我写出来的一些bug也由他的帮助才解决。很开心能和他结对完成这次作业。

• 222000227周禹辰：

  通过上次的合作，我们的这次结对作业完成的更加得心应手。陈英杰同学每次都能保质保量地完成自己的工作，也能够解决我的一些问题，是不可多得的合作伙伴。有了上次的经验，我们这次的作业更加顺利，我们之间加起来的效率大于2，让编码压力也比单人编码时少了不少。