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

这个作业属于哪个课程	软件工程
这个作业要求在哪里	结对第二次作业–编程实现
结对学号	222000204、222000436
这个作业的目标	编程实现上一次原型设计作业的部分功能
其他参考文献	w3c在线教程，csdn

目录：

1. git仓库链接和项目访问链接
2. PSP表格
3. 成品展示
4. 设计实现过程
   4.1. Singles Aces Leaders页面
   4.2. 每日赛程页面
   4.3. 晋级图页面
5. 结对讨论过程描述
6. 代码说明
7. 心路历程和收获
8. 评价结对队友

git仓库链接和项目访问链接

git仓库链接
项目访问链接

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	20
• Estimate	• 估计这个任务需要多少时间	1000	1200
Development	开发	210	240
• Analysis	• 需求分析 （包括学习新技术）	20	25
• Design Spec	• 生成设计文档	10	5
- Design Review	- 设计复审	10	15
- Coding Standard	- 代码规范(为目前的开发制定合适的规范)	50	50
- Design	- 具体设计	100	120
- Coding	- 具体编码	500	620
- Code Review	- 代码复审	10	10
- Test	- 测试(自我测试，修改代码，提交修改)	20	20
Reporting	报告	40	55
- Test Report	- 测试报告	10	10
- Size Measurement	- 计算工作量	10	15
Postmortem & Process Improvement Plan	- 事后总结, 并提出过程改进计划	20	30
单元格	合计	2040	2435

成品展示

设计实现过程

我们是纯前端开发的，只用到了html，css，js三样技术，以实现展示功能为主要目的，主要对以下三个页面进行分析设计。

Singles Aces Leaders页面

选手排行页面，引入事先做好的导航栏样式，然后排行榜用表格的形式展现出来，数据部分是用于存在js代码中，最后对选手排行的样式稍加整改，完成页面。

每日赛程页面

每日赛程页面，引入事先做好的导航栏样式，然后赛程用表格的形式展现出来，天数实现了day1，其他的因时间不足关系没整，最后对每日赛程的样式稍加整改，完成页面。

晋级图页面

晋级图页面，引入事先做好的导航栏样式，然后用div标签多层嵌套完成每个赛区的内容，之后通过svg标签提供的始终点坐标，在js中实现画线的功能，接着实现鼠标移入比赛时高亮边框显示，最后对晋级图的样式稍加整改，完成页面。

结对讨论过程描述

代码说明

主要代码
数据放入js中，再循环输出放入表格。

   var arr = [{
        name: 'Ben Shelton',
        rank: 1,
        matches: 5,
        aces: 85
    },
    {
        name: 'Stefanos Tsitsipas',
        rank: 2,
        matches: 7,
        aces: 84
    },
    {
        name: 'Karen Khachanov',
        rank: 3,
        matches: 6,
        aces: 83
    },
    {
        name: 'Hubert Hurkacz',
        rank: 4,
        matches: 4,
        aces: 68
    }]
    var myTable1 = document.getElementById('table1');
    var tbody = myTable1.querySelector('tbody');
    for (var i = 0; i < arr.length; i++) {//    根据数据创建行的
        var tr = document.createElement('tr');
        if (i % 2 == 0) {
            //tr.style.cssText = "background-color:gray;";
        }
        tbody.appendChild(tr);
        for (var k in arr[i]) {    //创建列的
            var td = document.createElement('td');
            td.innerHTML = arr[i][k];

            tr.appendChild(td);
        }
    }

动态画线的函数：获取svg标签提供的始终点坐标，输出线段。

function drawTwoLine (id1, id2) {
  let obj1 = document.getElementById(id1);
  let obj2 = document.getElementById(id2);
  console.log(obj1);
  console.log(obj2);
  let obj1_x1 = obj1.getAttribute("x1");
  let obj1_y1 = obj1.getAttribute("y1");
  let obj1_x2 = obj1.getAttribute("x2");
  let obj1_y2 = obj1.getAttribute("y2");
  let obj1_x = obj1_x1;
  let obj1_y = obj1_y1;
  let obj2_x1 = obj2.getAttribute("x1");
  let obj2_y1 = obj2.getAttribute("y1");
  let obj2_x2 = obj2.getAttribute("x2");
  let obj2_y2 = obj2.getAttribute("y2");
  let obj2_x = obj2_x1;
  let obj2_y = obj2_y1;
  t1 = setInterval(function () {
    if (obj1_x == obj1_x2 && obj1_y == obj1_y2 && obj2_x == obj2_x2 && obj2_y == obj2_y2) {
      clearInterval(t1);
    }
    if (obj1_x < obj1_x2) {
      obj1_x++;
    }
    if (obj1_y < obj1_y2) {
      obj1_y++;
    } else if (obj1_y > obj1_y2) {
      obj1_y--;
    }
    let obj1_value = "M" + obj1_x1 + " " + obj1_y1 + " " + obj1_x + " " + obj1_y;
    obj1.setAttribute("d", obj1_value);

    if (obj2_x < obj2_x2) {
      obj2_x++;
    }
    if (obj2_y < obj2_y2) {
      obj2_y++;
    } else if (obj2_y > obj2_y2) {
      obj2_y--;
    }
    let obj2_value = "M" + obj2_x1 + " " + obj2_y1 + " " + obj2_x + " " + obj2_y;
    obj2.setAttribute("d", obj2_value);
  }, 10);
}

function showRes (id) {
  let obj = document.getElementById(id);
  let opacity = 0;
  t2 = setInterval(function () {
    opacity = opacity + 1;
    if (opacity == 10) {
      clearInterval(t2);
    }
    obj.style.opacity = opacity / 10;
  }, 10);
}

心路历程和收获

我们会的技术不多，前端如vue这样的框架不会，后端如springboot也不行，只能退而求次，拿目前学过的简单的web技术来逐步实现功能，不过html，css，js的技术也忘了差不多，所以都是边看教程边写，对web技术也更加熟悉了一些，也算是这次编程最大的收获了吧。

评价结对队友

222000204对队友的评价：队友十分给力，相互配合及时完成任务。
222000436对队友的评价：牛逼。