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

222000209洪桢翔 2023-03-24 22:37:39

作业基本信息

这个作业属于哪个课程软件工程-23年春季学期
这个作业要求在哪里结对第二次作业--编程实现
结对学号222000208&222000209
这个作业的目标设计一套方案，向客户推销。描述大致方案，以向客户证明你正确理解了客户的需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划。
其他参考文献《构建之法》、W3Chtml、css、javascript教程

目录

  • 作业基本信息
  • 一、git仓库链接和代码规范链接
  • gitcode地址
  • 云服务器链接
  • 代码规范链接
  • psp表格
  • 二、成品展示
  • 三、结对讨论过程描述
  • 四、设计实现过程
  • （1）功能结构树
  • （2）使用的方法及功能
  • （3）主要页面结构
  • （4）数据主要存储
  • 五、代码说明
  • （1）页面母版的实现：
  • （2）主页面轮播图
  • （3）选手排名
  • （4）每日赛程
  • （5）晋级图
  • 六、心路历程及收获
  • 七、评价结对队友

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

gitcode地址

前往gitcode地址

云服务器链接

云服务器链接

代码规范链接

html编码规范
css编码规范

psp表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划6050
• Estimate• 估计这个任务需要多少时间6050
Development开发14101285
• Analysis• 需求分析 (明确相应的html+css+js技术）120110
• Design Spec• 生成设计文档3040
• Design Review• 设计复审3035
• Coding Standard• 代码规范 (商讨合适的三种语言规范)3020
• Design• 具体设计讨论分工120100
• Coding• 具体协作编码960880
• Code Review• 代码讨论及测试6050
• Test• 测试（自我测试，修改代码，提交修改）6050
Reporting报告120125
• Test Repor• 测试结果讨论6070
• Size Measurement• 计算工作量3030
• Postmortem & Process Improvement Plan• 事后总结, 并讨论提出过程改进计划3025
合计15901455

二、成品展示

主页面：

在这里插入图片描述


主页面轮播图：

在这里插入图片描述


选手排名-man部分

在这里插入图片描述


选手排名-women部分

在这里插入图片描述

每日赛况-第一天

在这里插入图片描述

每日赛况-第二天

在这里插入图片描述

晋级图

在这里插入图片描述

晋级图鼠标悬停高亮提示

在这里插入图片描述

了解更多-简介

在这里插入图片描述

了解更多-赛场信息

在这里插入图片描述

三、结对讨论过程描述

在通过对上次的原型设计成品进行讨论并对要求进行详细分析之后，我们总结了如下几个分任务：

  • 每日赛程界面的实现
  • 选手排名界面的实现
  • 晋级图的界面实现
  • 其他附加功能界面（如主页面以及了解更多）的实现

由于完成的时间较为紧迫，且我们都没有web框架的使用经验，加上通过对各种主流web框架进行参考之后我们发现这些框架的学习成本也比较大。结合我们的原型设计之后，我们决定采用纯前端的方式，使用html+css+js进行原型页面的实现。
在数据方面，由于澳大利亚网球公开赛上爬取的数据很多，若要导入数据库的话数据量庞大，耗费时间长，数据导入相对比较困难，所以我们通过javascript进行原型中部分主要数据的填充。
在对原型进行分析之后，我们认为本次任务的难点主要聚焦在晋级图这一项上。由于html+css+js的实现不如原型工具的排布那么方便，导致实现起来有些许困难。最后我们通过html表格以及css排版，结合js的按钮点击，虽然调整表格之间的定位计算对于人工来说比较麻烦一些，但好在最后也是成功实现了和原型相似的晋级图。
讨论gitcode合并：

在这里插入图片描述


在这里插入图片描述

讨论晋级图出现的问题：

在这里插入图片描述

讨论照片：

四、设计实现过程

（1）功能结构树

在这里插入图片描述

（2）使用的方法及功能

（3）主要页面结构

由于是使用的html+css+js进行编写，所有页面的html都有相应的html、css和js，其中通过header.css控制所有页面页眉和导航栏的样式。

在这里插入图片描述

（4）数据主要存储

因为没有使用数据库，主要在javascript中存放数据，并在点击相应组件时对相应的数据进行填充。
以赛事数据为例：

在这里插入图片描述

五、代码说明

（1）页面母版的实现：

主要通过css控制所有的页面中母版的样式（包括页眉，导航栏，页脚），在每个文件中引入即可通过一个母版的css文件完成所有页面母版样式的控制。
html：

<!-- 页眉 -->
<div id = "topimg">
    <img id = "AO" src="images/AO.jpg">
</div>

<!-- 导航栏 -->
<div id = "header">
    <span id = "mainpage">主页面</span>
    <span id="page1">选手排名</span>
    <span id="page2">每日赛程</span>
    <span id="page3">晋级图</span>
    <span id = "more">了解更多</span>
</div>

css：

/*html主体背景颜色*/
html,body{
    margin: 0;
    padding: 0;
    background: rgba(129, 211, 248, 0.2);
}

body{
    min-width: 1000px;
    position: relative;
}

/*页眉图片AO*/
#topimg{
    margin: 0 auto;
    width: 1024px;
    height: 242px;
}

#AO{
    width: 1024px;
    height: 242px;
}

/*header的样式修改*/
#header{
    margin: 0 auto;
    border-width: 1px;

    background: rgba(129, 211, 248, 0.4);

    width: 1000px;
    height: 85px;
    margin-top: 50px;

    color: rgba(2, 125, 180, 0.98);
    font-size: 25px;
    font-weight: bold;
    font-style: 微软雅黑;

    display: flex;
    justify-content: center;
    align-items: center;
}

#mainpage{
    margin-right: 80px;
}

#page1{
    margin-right: 80px;
}

#page2{
    margin-right: 80px;
}

#page3{
    margin-right: 80px;
}

js：

//导航栏功能
    document.getElementById("mainpage").onclick = function () {
        window.location.href = '主页面.html';
    }

    document.getElementById("page1").onclick = function () {
        window.location.href = '选手排名.html';
    }
    document.getElementById("page2").onclick = function () {
        window.location.href = '每日赛程.html';
    }
    document.getElementById("page3").onclick = function () {
        window.location.href = '晋级图.html';
    }

    document.getElementById("more").onclick = function () {
        window.location.href = '了解更多.html';
    }

（2）主页面轮播图

主要设置轮播图的三张图片通过固定的时间间隔进行轮播，通过轮播循环函数控制图片的轮播，当控制轮播的数组越界时会从头开始。通过onmouseover函数和onmouseout函数实现当鼠标放在轮播图上时停止轮播，并通过setInterval函数设置轮播切换的时间。点击轮播图下方的小图标也可以进行轮播图的指定切换。
实现轮播图主要使用的js代码：

var content = this.document.getElementsByClassName("content")[0];

// 获取ul中的li
var li = content.getElementsByTagName("li");

function fun(i, j)      
    li[i].style.opacity=1;
    li[j].style.opacity=0;
    li[i + 3].style.backgroundColor = "#ffffff";

    // 把图标改成透明
    li[j + 3].style.backgroundColor = "#00000000";
}

// 默认情况下轮播图为第一张
fun(0, 1);//初始化下
var i = 0;
function auto()
{//轮播循环函数
    i ++;
    if(i >= 3)
    {
        i = 0;
        fun(0, 2);
    }
    else
    {
        // 反之递归
        fun(i, i - 1);
    } 
}
// 设置变化的时间
timer = this.setInterval(auto, 3000);

// 设置鼠标在轮播图上的时候 轮播图就停止播放
content.onmouseover = function () 
{ 
    //鼠标划上去，停止轮播
    clearInterval(timer);
}

// 设置鼠标在轮播图上的时候 轮播图就继续播放
content.onmouseout = function () 
{ 
    timer = setInterval(auto, 2000); //调用定时器
}
var j = 0;
for(; j < 3; j++)
{
    li[j + 3].index = j;
    li[j + 3].onclick = function()
    {
        fun(this.index, i)
        i = this.index;
    }
}
}

（3）选手排名

通过js进行点击后标签颜色的修改，从而达到区分正在查看的标签以及不在查看的标签的区别；在切换时使用js进行表格内容的填充。
表格的部分项及排版：

 <tr class="even">
                        <th></th>
                        <th>Rank</th>
                        <th>Matches</th>
                        <th>Aces</th>
                    </tr>
                    <tr class="odd">
                        <td id="u11">
                            <center>Ben Shelton</center>
                        </td>
                        <td id="u12">
                            <center>1</center>
                        </td>
                        <td id="u13">
                            <center>5</center>
                        </td>
                        <td id="u14">
                            <center>85</center>
                        </td>
                    </tr>

填充并切换数据使用的部分js：

document.getElementById("men").onclick = function () {
        document.getElementById("men").style.backgroundColor = "rgba(2,125,180,40%)";
        document.getElementById("women").style.backgroundColor = "#D7D7D7";

        document.getElementById("u11").innerHTML = "<center>Ben Shelton</center>";
        document.getElementById("u12").innerHTML = "<center>1</center>";
        document.getElementById("u13").innerHTML = "<center>5</center>";
        document.getElementById("u14").innerHTML = "<center>85</center>";

        document.getElementById("u21").innerHTML = "<center>Stefanos Tsitsipas</center>";
        document.getElementById("u22").innerHTML = "<center>2</center>";
        document.getElementById("u23").innerHTML = "<center>7</center>";
        document.getElementById("u24").innerHTML = "<center>84</center>";

        document.getElementById("u31").innerHTML = "<center>Karen Khachanov</center>";
        document.getElementById("u32").innerHTML = "<center>3</center>";
        document.getElementById("u33").innerHTML = "<center>6</center>";
        document.getElementById("u34").innerHTML = "<center>83</center>";

        document.getElementById("u41").innerHTML = "<center>Hubert Hurkacz/center>";
        document.getElementById("u42").innerHTML = "<center>4</center>";
        document.getElementById("u43").innerHTML = "<center>4</center>";
        document.getElementById("u44").innerHTML = "<center>68</center>";

        document.getElementById("u51").innerHTML = "<center>Tommy Paul</center>";
        document.getElementById("u52").innerHTML = "<center>5</center>";
        document.getElementById("u53").innerHTML = "<center>6</center>";
        document.getElementById("u54").innerHTML = "<center>67</center>";

        document.getElementById("u61").innerHTML = "<center>Novak Djokovic</center>";
        document.getElementById("u62").innerHTML = "<center>6</center>";
        document.getElementById("u63").innerHTML = "<center>7</center>";
        document.getElementById("u64").innerHTML = "<center>66</center>";

        document.getElementById("u71").innerHTML = "<center>FA.Aliassime</center>";
        document.getElementById("u72").innerHTML = "<center>7</center>";
        document.getElementById("u73").innerHTML = "<center>4</center>";
        document.getElementById("u74").innerHTML = "<center>65</center>";

        document.getElementById("u81").innerHTML = "<center>Alexei Popyrin</center>";
        document.getElementById("u82").innerHTML = "<center>8</center>";
        document.getElementById("u83").innerHTML = "<center>3</center>";
        document.getElementById("u84").innerHTML = "<center>64</center>";

        document.getElementById("u91").innerHTML = "<center>J.J. Wolf</center>";
        document.getElementById("u92").innerHTML = "<center>9</center>";
        document.getElementById("u93").innerHTML = "<center>4</center>";
        document.getElementById("u94").innerHTML = "<center>62</center>";

        document.getElementById("u101").innerHTML = "<center>Andrey Rublev</center>";
        document.getElementById("u102").innerHTML = "<center>10</center>";
        document.getElementById("u103").innerHTML = "<center>5</center>";
        document.getElementById("u104").innerHTML = "<center>61</center>";

        document.getElementById("u111").innerHTML = "<center>Frances Tiafoe</center>";
        document.getElementById("u112").innerHTML = "<center>11</center>";
        document.getElementById("u113").innerHTML = "<center>3</center>";
        document.getElementById("u114").innerHTML = "<center>59</center>";

        document.getElementById("u121").innerHTML = "<center>Taylor Fritz</center>";
        document.getElementById("u122").innerHTML = "<center>12</center>";
        document.getElementById("u123").innerHTML = "<center>2</center>";
        document.getElementById("u124").innerHTML = "<center>53</center>";
    }

（4）每日赛程

主要构建为上面的menubar以及下面表格中的数据填充。menubar方面通过js改变style.backgroundColor以及style.color实现点击后的背景颜色和文字颜色切换；下面的相应数据变化使用js里预设好的数据进行填充，和选手排名的数据填充类似。
menubar变色：

//menubar变化
        document.getElementById("sonmenu1").style.backgroundColor = 'rgba(2, 125, 180, 0.8)';
        document.getElementById("sonmenu1").style.color = 'white';
        document.getElementById("sonmenu2").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu2").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu3").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu3").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu4").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu4").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu5").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu5").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu6").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu6").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu7").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu7").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu8").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu8").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu9").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu9").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu10").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu10").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu11").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu11").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu12").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu12").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu13").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu13").style.color = 'rgba(2, 125, 180, 0.98)';
        document.getElementById("sonmenu14").style.backgroundColor = '#f0eeee';
        document.getElementById("sonmenu14").style.color = 'rgba(2, 125, 180, 0.98)';

部分内容填充展示：

//第一个表格
        document.getElementById("title1").innerHTML = "Women‘s Singles - 1h15m";
        document.getElementById("image1").src = "flags/捷克.png";
        document.getElementById("content1").innerHTML = "K.Siniakova  --  1  4";
        document.getElementById("image2").src = "flags/美国.png";
        document.getElementById("content2").innerHTML = "<b>C.Gauff  --  6  6</b>";

（5）晋级图

主要困难的地方在于存储信息的右列表格的定位以及晋级图之间的连线。定位以及连线都采用了absolute定位方式，连线通过以div左上角为原点进行多条直线位置的调整，使其在网页端看起来有了视觉上的组合。指针悬停高亮使用了css中的hover函数，通过悬停时改变背景颜色实现高亮切换。
晋级图之间的连线问题：
html：

<div  class="y y1"></div>
    <div  class="x x1"></div>
    <div  class="x x2"></div>
    <div  class="x x3"></div>

css：

.y{
    width: 3px;
    height: 163px;
    background-color: rgba(2, 125, 180, 0.98);
}

.y1{
    position: absolute;
    top: 235px;
    left: 512px;
}

.x{
    width: 56px;
    height: 3px;
    background-color: rgba(2, 125, 180, 0.98);
}

.x1{
    position: absolute;
    top: 235px;
    left: 456px;
}

.x2{
    position: absolute;
    top: 315px;
    left: 512px;
}

.x3{
    position: absolute;
    top: 395px;
    left: 456px;
}

指针悬停改变颜色：

.qua-rank:hover{
    background-color:rgba(2, 125, 180, 0.98);
}
.sem-rank1:hover{
    background-color:rgba(2, 125, 180, 0.98);
}

.sem-rank2:hover{
    background-color:rgba(2, 125, 180, 0.98);
}

.sem-rank3:hover{
    background-color:rgba(2, 125, 180, 0.98);
}

.sem-rank4:hover{
    background-color:rgba(2, 125, 180, 0.98);
}

六、心路历程及收获

222000208：

心路历程：由于结对双方对前后端的框架都不算熟悉，所以采用==HTML+CSS+JavaScript==的纯前段开发，在开发过程中对数据的存放和页面内容的改变都与结对队友进行商讨过，然后才进行编程，参照结对作业一里设计出的模型，来进行结对作业二的页面设计。

收获：对有关html、css和js的相关编程知识进行了巩固，除此之外也学习一些新的组件和div用法，与结对队友的交流和协作编程，也对我帮助很大。

222000209：

心路历程：在使用git时，之前一直用的git bash上传文件，后来学到了网页端上传，大大提高了便捷度，并且也可以看出上传的文件是否有更新，由系统检测代替人工检查完美地节省了大量时间；由于对框架不是很熟悉，采用的是html+css+js式的纯前端编程，通过对三项的组合式编写，在巩固三种语言的知识的同时也学到了一些新的，最有收获的就是轮播图的设计等组件。但在用html+css+js设计中我也对vue框架进行了一定的了解，实现的项目虽然和框架有些许相似但仍有差距，框架整体更加显得整洁美观，此后也会找机会进行框架项目的实践。

收获：对原有知识进行巩固的同时也学习了很多新的html组件的实现方式，进一步提高了自己代码的规范性，同时明白了和队友统一代码风格之后都会对双方的编程便利程度大有裨益。

七、评价结对队友

222000208：认真、负责，在沟通交流中十分顺畅与愉快，讨论好了大致的问题和编程方向后，顺利的进行了分工，能高效地完成对应的分工，并且还额外完成了一些附加的工作，对结对作业又很高的积极性，很好的推进了网页开发的进程，期待下一次合作。

222000209：能够高质量地完成相应负责地模块，同时对我的编写代码规范方面有很大的帮助。态度认真负责，在进行问题地询问和讨论时能够很好地进行问题的拆解和提炼，在进行讨论的时候也能很明确地给出自己的观点，很大程度上地促进了双方讨论地发展，很期待下一次的合作~

...全文
38 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
2020级计算机系软件工程第二次结对编程作业.zip
2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip
PairProject:W班软件工程实践结对第二次作业仓库
结对第二次作业-顶会热词统计的实现 为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。 fork仓库，和伙伴商讨如何通过github协作/代码规范等 编程实现 功能一，操作爬取的论文列表 功能二，爬取结果分析展示 功能三，爬取论文信息（附加功能，实现有附加分） 其他附加功能 部署 发布发布版本，发起拉取请求 撰写博客，在预先之前提交一份博客 包含作业描述和目录 核对评分标准 上一次结对作业中，大家都和小伙伴完成了原型的设计，那么现在再联合小伙伴动手实现原型中的部分功能吧。采用网络技术来实现原型中的功能。 一，作业内容 1.基础功能 功能1：对已爬取的论文列表进行操作 可对论文列表进行删除； 可对论文列表进行查询详细信息（支持模糊查询，查询结果的展示，排序等功能可自行设计）； 功能2：分析已爬取到的论文信息，提取top10个热门领域或热门研究方向 形成如关键字图谱之类直观的查看方式
第2次作业 结对作业1
第2次作业 结对作业1
基于Python语言的P4程序结对作业设计源码
该项目是一款基于Python语言的P4程序结对作业设计源码，总文件量为114个，其中Python源文件57个，JSON配置文件24个，P4配置文件11个，Markdown文档8个，PNG图像文件3个，许可证文件1个，以及多个Makefile文件。该项目旨在通过结对作业的形式，提升编程能力和团队合作精神。
安曼-201d17
代码201：软件开发基础 欢迎使用Code 201！ 这是一门基于您对HTML，CSS，JavaScript，git和常规Web开发的基础知识的课程，为您深入学习任何Code 301类奠定了基础。 介绍 一般课程安排为： 全职 兼职 话题 第一周 第1周和第2周 基本HTML，CSS和Javascript 第二周 第三周和第四周 使用DOM 第三周 第五周和第六周 与图书馆合作 第四周 第七周和第八周 项目周 作业 实验时间代码分配遵循每个上课时间。 您可以在每个类文件夹的子目录中找到这些分配。 作业内容每天都会非常具体，具体取决于主题。 一些实验作业将是结对编程作业。 有关完成和提交作业的说明，请参见相应子目录的README文件。 作业是使用专业级git-flow提交的。 如果您还没有这样做，是时候熟悉git核心命令了。 不用担心，我们会根据需要为您提供逐步帮助。 备忘单和资源
2023年福大-软件工程实践-W班

688

社区成员

800

社区内容

发帖
与我相关
我的任务
社区描述
2023年福州大学软件工程实践课程W班的教学社区
软件工程团队开发软件构建 高校 福建省·福州市
社区管理员
  • FZU_SE_teacherW
  • 张书旖
  • 郭渊伟
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章