软件工程实践结对作业二

221900331郑江涛 学生 2022-03-24 23:26:04
这个作业属于哪个课程2022年福大-软件工程;软件工程实践-W班
这个作业要求在哪里软件工程实践结对作业二
结对学号221900305、221900331
这个作业的目标记录PSP表格、编程实现冬奥会网页、部署发布
其他参考文献CSDN、博客园等

目录

  • 一、git仓库链接和代码规范链接
  • 二、PSP表格
  • 三、成品展示
  • 3.1 访问地址
  • 3.2 作品展示
  • 3.2.1 首页
  • 3.2.2 冬奥简介
  • 3.2.3 奖牌总榜/地图
  • 3.2.4 详细赛程
  • 3.2.5 项目介绍
  • 3.2.6 精彩瞬间
  • 3.2.7 新闻速递
  • 四、结对讨论过程描述
  • 五、设计实现过程
  • 六、代码说明
  • 七、心路历程和收获
  • 八、评价结对队友

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

git仓库:https://gitcode.net/qq_52783287/pairproject/-/tree/master/221900305_221900331/2022
代码规范:https://gitcode.net/qq_52783287/pairproject/-/blob/dev/221900305_221900331/2022/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.md

二、PSP表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划2020
• Estimate• 估计这个任务需要多少时间2020
Development开发32453690
• Analysis• 需求分析 (包括学习新技术)120150
• Design Spec• 生成设计文档2015
• Design Review• 设计复审2015
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)1515
• Design• 具体设计2025
• Coding• 具体编码28803270
• Code Review• 代码复审1510
• Test• 测试(自我测试,修改代码,提交修改)5040
• Team Communication• 结对讨论120150
Reporting报告4555
• Test Repor• 测试报告2030
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1515
合计33103765

三、成品展示

3.1 访问地址

119.23.153.214

3.2 作品展示

3.2.1 首页

  • 首页总体上参照了原型的设计,简介明了。通过点击首页中间的冰墩墩进去下一功能界面。

    img

3.2.2 冬奥简介

  • 冬奥简介页面作为一个中间页,右上角menu为跳转的导航栏。同时往下拉有一些图文介绍,并且点击图片旁的按钮也可以跳转到功能页面。

img

3.2.3 奖牌总榜/地图

  • 奖牌地图展示了所有参与比赛的国家获得的奖牌数的热区,鼠标移动还能查看各个国家具体的奖牌数。随后将页面向右移动,展示的是奖牌总榜,有各个国家的具体排名和信息。接着向右移动是一些精彩图片的展示。

    在这里插入图片描述

3.2.4 详细赛程

  • 详细赛程我们做了两种显示方法和筛选。
  • 第一种是以类似于下拉列表的方式展示赛程,点击表头可以展开当日的赛程。搜索时输入日期项目或场馆的关键字,便可以展示出搜索结果。

    在这里插入图片描述

  • 第二种是类似于冬奥会网站的样式,点击时间轴可以切换到当日的赛程,并且可以根据三个下拉列表的选项组合筛选赛程。

    在这里插入图片描述

    3.2.5 项目介绍

  • 该页面对有15个项目的图片,点击可以跳转到该项目的子页面。在子页面中有项目的介绍以及该项目的赛程,点击详细可以查看当日该项目的全部赛程。

img

img

img

3.2.6 精彩瞬间

  • 该页面通过动图展示了一些精彩图片。

img

3.2.7 新闻速递

  • 该页面展示了一些实事新闻,并用轮播图美化界面。同时有对一些著名选手的人物介绍,点击可以跳转到百度百科详细查看。

    img

img

四、结对讨论过程描述

  • 线下交流远比线上交流来的效率高,由于我们的宿舍相距非常近,经常在遇到一些重大的决策问题、功能开发问题就会在碰面,只有一些细小的事情和文件交流在线上进行。

img

  • 刚拿到题目,第一步就是和队友商讨如何通过git协作/代码规范。相比第一次个人实战考察基础Git使用,这一次主要考察Git的合作。有过前几次作业的经验,对于git的使用也有了大体上的了解,于是我们俩就进行了一番讨论,一起研读作业博客中的关于gitcode使用部分的要求,最终摸索出了怎么做,下面是首次讨论,后来发现通过代码仓项目管理邀请成员加入,给最高的权限似乎更方便。

    img

  • 到了编程部分,我们花了一些时间确定了开发方式、实现功能和主要分工,并通过git的拉取推送进行了一些代码的交流。

    img


    img

五、设计实现过程

  • 确定项目开发方式
    刚拿到项目时第一时间想到的就是用上学期才学的三件套来写,本来在犹豫是否要学习新的框架,但感觉时间不是很充裕,就决定以html+css+js为基础进行前端开发,在js中读取json数据。

  • 爬取数据【该爬取行为仅用于课程教学!】
    由于之前的作业已经进行过数据爬取(在官网中的开发者模式获取json数据,并对json数据进行处理,存为单独的json文件),本次作业直接对已有的json文件进行读取。

  • 功能结构图

    在这里插入图片描述

  • 设计思路和实现过程

  • 本次作业是在上次作业原型的基础上进行的,因此在设计时首先就是对原型进行分析,分析原型可保留的地方和应该要修改的地方。大体上将项目分为五个部分:首页,奖牌榜,奖牌地图,赛程,其他功能。

  • 首页:主要参照了原型设计时的样式排版,但删除了导航栏,把进入子页面的触发事件改在冰墩墩身上,使网页更加美观和有趣。

  • 奖牌榜:我们用了一些css模板来使页面更加美观,在将奖牌榜嵌入css模板中时,遇到了大小不符合的问题。本来将表格嵌入时没遇到什么问题,但是当国旗导入时,图片的大小会出现冲突,无法与表格大小和子项大小兼容。试了许多百度的方法(如改变图片属性使其自适应大小)都没法解决,最后用傻办法将所有图片的尺寸改成与表格子项的大小一致。

  • 奖牌地图:刚开始在网上找了许多地图资源,但有些无法使用。后来我们找到了echart写的世界的疫情地图,于是根据教程导入到项目中,本以为改改地图上的数据是很容易的事,但在过程中对地图上数据的value类型一直没搞清楚。后来发现是类似于map类型的键值对,而一个国家只能对应一个值,最后我们对该值进行除法和取余,将其划分为多个数据,分别为奖牌总数和金银铜牌数。

  • 赛程:刚开始不知道如何不用后端读取数据,就想着简单一些,直接把数据写在代码里,就先做了第一个版本的赛程表,是用类似下拉列表的思路设计的,筛选过程是模糊搜索,输入关键字就能找出对应的赛程。但后来发现这样没法实现组合筛选,并且把数据写死在代码中明显是不合理的。因此后来我们通过请教同学以及百度查资料,学习了如何用js读取json数据,便根据原型的设计制作了新的赛程表,通过读取json文件来获取数据,通过三个下拉框实现组合筛选。

  • 其他功能和页面主要涉及到的是前端的页面设计,起到了美化整个网站的效果。我们设计了冬奥简介,项目介绍,精彩瞬间和新闻速递四个页面,主要是同过一些css和js的模板为页面增加了一些美观的图片和介绍。

六、代码说明

  • 这是对奖牌地图的处理代码,读取params.value的值后存放在value,并乘法和取余将其化为四个值,分别存放奖牌总数和金银铜牌数目。
 tooltip: {  
                trigger: 'item',  
                formatter: function (params) {  

                    var value = (params.value + '');  
                    var rank = Math.floor(value*100%100);
                    var gold = Math.floor(value*10000%100);
                    var silver = Math.floor(value*1000000%100);
                    var bronze = Math.floor(value*100000000%100);
                    if(value>0) 
                        string = params.name + '<br/>' + '金牌榜第' + rank + '名' + '<br/>' +
                     '金:' + gold +'<br/>' + '银:' + silver +'<br/>' + '铜:' + bronze ;
                    else
                     string = params.name ;
                    return string;  
                }  
            },
  • 在visualMap中对地图的属性进行修改,将不同数量的区间的国家颜色设为红黄灰,并将奖牌最大和最小值设为37和0.
 visualMap: {  
                min: 0,  
                max: 37,  
                text:['High','Low'],  
                realtime: false,  
                calculable: true,  
                color: ['#f82c00','#f8bd00','#eeeeee']  
            },  
  • 奖牌总榜用table实现,这是table的class属性增加样式,在td中用设置背景来插入国旗。
<table width=800px class=table4_8>
        <tr>
            <th width=100px >排名</th>
            <th>国家</th>
            <th width=67px>国旗 </th>
            <th> </th>>
            <th>金牌</th>
            <th>银牌</th>
            <th>铜牌</th>
            <th>总计</th>
           
        </tr>
        <tr>
            <td>1</td>
            <td> <strong>挪威</strong></td>
            <td style="background: url(../2022/public/nuowei.png);"> </td>
            <td>  </td>
            <td>16</td>
            <td>8</td>
            <td>13</td>
            <td>37</td>
        </tr>
  • 这是第一版赛程的筛选代码,为父tr绑定点击事件,当点击父tr时将其子tr全部展示出来。默认为全部隐藏状态。接着用jquery的filter函数实现对关键字的模糊筛选。
 $(function ()
  {
  //点击让其展示出列表 默认让其都隐藏
  $(".box tr.parent").click(function () {
   $(this)
    .toggleClass("selected")
    .siblings(".child_"+this.id).stop().toggle();
  }).click();//此行代码表示要立即执行
  //设置列表查询
  $("#filterName").keyup(function () {
   $("table tbody tr").stop().hide() //将tbody中的tr都隐藏
    .filter(":contains('"+($(this).val())+"')").show(); //,将符合条件的筛选出来
  });
 });
  • 下面是第二版赛程表的数据读取。传入参数s,根据s确定赛程的日期和对应的json文件。用XMLHttpRequest类的open函数读取json数据。
function Search (s) 
{
    var url = "data//02" + s.substr(2,3) + ".json";
    var request = new XMLHttpRequest();
    request.open("GET",url);
    request.send(null);
    request.onload = function() 
    {
        if (request.status == 200) 
        {
            var json = JSON.parse(request.responseText);
            var matchData = document.getElementById("match");
            for (var i=0;json.data.matchList[i]!=null;i++)
             {
                var row = document.createElement("tr");
                var dateCell = document.createElement('td');
                var sportCell = document.createElement('td');
                var matchCell = document.createElement('td');
                var placeCell = document.createElement('td');
  • 用appendChild和createElement函数动态生成赛程表格,根据指定格式输出。
                matchData.appendChild(row);
                row.appendChild(dateCell);
                row.appendChild(sportCell);
                row.appendChild(matchCell);
                row.appendChild(placeCell);
                
                var dateCellText = document.createTextNode(json.data.matchList[i].startdatecn);
                var sportCellText = document.createTextNode(json.data.matchList[i].itemcodename);
                var matchCellText;
                if (json.data.matchList[i].homename == "") 
                     matchCellText = document.createTextNode(json.data.matchList[i].title);
                else 
                     matchCellText = document.createTextNode(json.data.matchList[i].title+ "  " + json.data.matchList[i].homename + "VS" + json.data.matchList[i].awayname);    
                var placeCellText = document.createTextNode(json.data.matchList[i].venuename);
                
                dateCell.appendChild(dateCellText);
                sportCell.appendChild(sportCellText);
                matchCell.appendChild(matchCellText);
                placeCell.appendChild(placeCellText);
            }
        }
    }
}
  • 编写函数根据日期读取json数据,根据需要得到有用的数据。
function CombinationQuery (DateOption,SportOption,PlaceOption)
{
    var url = "data//02" + DateOption.substr(8,9) + ".json";
    var request = new XMLHttpRequest();
    request.open("GET",url);
    request.send(null);
    request.onload = function()
     {
        if (request.status == 200) 
        {
            var f = true;
            var json = JSON.parse(request.responseText);
            var matchData = document.getElementById("match");
        
  • 下面是对赛程的组合查询,在其中筛选日期和场馆符合条件的比赛;若是没有找到,则输出无此比赛。
for (var i=0;json.data.matchList[i]!=null;i++)
{
    if (json.data.matchList[i].itemcodename == SportOption && json.data.matchList[i].venuename == PlaceOption) 
    {
        var row = document.createElement("tr");
        var dateCell = document.createElement('td');
        var sportCell = document.createElement('td');
        var matchCell = document.createElement('td');
        var placeCell = document.createElement('td');
                    
        var dateCellText = document.createTextNode(json.data.matchList[i].startdatecn);
        var sportCellText = document.createTextNode(json.data.matchList[i].itemcodename);
        var    matchCellText;
        if (json.data.matchList[i].homename == "") 
            matchCellText = document.createTextNode(json.data.matchList[i].title);
        else 
            matchCellText = document.createTextNode(json.data.matchList[i].title+ "  " + json.data.matchList[i].homename + "VS" + json.data.matchList[i].awayname);
                    
        var placeCellText = document.createTextNode(json.data.matchList[i].venuename);
                    
        dateCell.appendChild(dateCellText);
        sportCell.appendChild(sportCellText);
        matchCell.appendChild(matchCellText);
        placeCell.appendChild(placeCellText);
                    
        matchData.appendChild(row);
        row.appendChild(dateCell);
        row.appendChild(sportCell);
        row.appendChild(matchCell);
        row.appendChild(placeCell);
        f = false;
    }
}
  • 这里的代码是项目介绍里具体项目页面的动画js。循环控制点的移动和图片的出现。
for(var i=0;i<odiv_length;i++)
{
    if(i%4==0)
    {
        odiv[i].className='f-border';
    }
    var n=parseInt( i / 4) % 2==0?num++:num--
    wheel=odiv_t.offsetHeight/5*n
    odiv[i].style.transform='translateY('+wheel+'px)';

    (function(i)
    {
        setTimeout(function()
        {
            odiv[ln].classList.remove('active');
            odiv[i].classList.add('active'); 
            ln = i;
            if(i==odiv_length-1)
            {
               setTimeout(function(){
                odiv[i].classList.remove('active');
               },500)
            }
            timeline_box[parseInt(i/4)].style.opacity= 1;  
            timeline_box[parseInt(i/4)].style.transform='scaleX(1)';       
        },150*i)
    }(i))
}
  • 该循环为box添加图片,并设置鼠标移入事件和移出事件。
for(var i=0;i<timelenght;i++)
{
    timeline_box[i].index=i;
    timeline_box[i].onmouseover=function()
    {
    timeline_box[this.index].style.transform=this.index%2?'translateY(10px)':'translateY(-10px)'
    imgs[this.index].style.transform='rotate(360deg)' ; 
    }
    timeline_box[i].onmouseout=function()
    {
        timeline_box[this.index].style.transform='translateY(0)';
        imgs[this.index].style.transform='rotate(0)' ; 
    }
}

七、心路历程和收获

  • 221900305:

    结对的过程真的没有看起来那么容易,尤其这是我们第一次接触和使用git去共同管理一个项目。在代码的过程中深刻体会到了与对方的沟通是多么重要,有时候因为没有及时沟通,然后一方写完得代码或功能另一方可能不够满意,便要多浪费许多时间。并且在两边同时改代码的时候容易造成代码的冲突。有一次他没有及时拉取我提交的代码,我便拉取了他的代码,导致我写的部分代码没掉了,还好在gitcode的提交记录中可以找回。这让我之后对拉取和提交格外谨慎。总之,结对做项目真是非常锻炼人的过程,虽然项目的难度并不是很大,这个过程中我还是收获了许多,锻炼了代码能力,学会了与他人沟通,熟练掌握了对git等项目管理网站的的使用,也为后面更大更难的团队项目打下了基础。

  • 221900331:

    阅读《构建之法》第四章和完成这次的作业有很多的收获,第一个便是git的使用。从第一次作业对git的懵懂,到后面的担惊受怕,生怕误操作,再到后来的慢慢熟练,不再犹豫。Git的使用虽然不是什么技术,但是一次很好的成长,让我们意识到了软件开发中细节的重要性。这次的作业我们注重在了前端,复习和学习了很多前端的知识,如何布局,如何设计一个好看的界面,为后面的团队项目奠定了基础。结对的过程也愈发的熟练,有了第一次结对和第一次团队协作,再进行结对作业,也比较的熟练,完成的效率比上一次高得多,并且还认识到了结对的更多好处,就是分工可以让工作量不再看起来那么多,遇到问题也能相互想办法,多一个人多一份力。

八、评价结对队友

  • 221900305 to 221900331:

    与zjt的合作过程还算是比较顺利,主要是因为我们比较熟,并且语言表达能力和欲望都是比较强的。因此在沟通的过程中没有太多的矛盾和意外,任务的推进就会比较顺利。他的代码能力虽然不强,但是他比较善于做一些组织和部署,类似项目经理的角色吧,我认为这种合作关系也是比较合理的。

  • 221900331 to 221900305:

    JarenD非常的认真负责,能够十分负责任的完成任务,还帮我解决了很多问题,给这次结对作业带来了极大的活力。他的感染力不仅体现在代码上,还体现在出言献策、解决问题上。我还需要向他多多学习!

...全文
1073 5 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复

网站做的真好看啊!博客做的很详细,针对设计过程展开也很丰富,很用心!

221900331郑江涛 学生 04-08
  • 举报
回复
@小球同学bbu 谢谢助教的夸奖和喜欢!
221900331郑江涛 学生 03-27
  • 打赏
  • 举报
回复

邹欣老师给所有同学的附加问题: 假如有另几个体育盛会 (全运会, 亚运会)需要你们做类似的工作, 你的代码能否快速地部分重构,就能解决新的需求? 还是说必须改写所有的模块? 请问哪些是需要重构的,哪些不用?
答:奖牌总榜和与赛程相关的一些功能是需要重构的;而奖牌地图和部分赛程功能仅需修改传入数据和进行部分调整即可;其他附加功能则需更改内容,代码部分无需过多改动。

Jingbin-Wang 教师 03-26
  • 打赏
  • 举报
回复

卡片设计的项目介绍和冬奥介绍,很赞!每日赛事界面中日期的选择不够友好,背景图有些干扰用户对赛程的查看,建议优化。建议尽量避免大段代码粘贴。

221900331郑江涛 学生 03-26
  • 举报
回复
@FZU_SE_teacherW 谢谢老师的点评,我们会对问题进行优化,并改进博客!
发帖
2022年福大-软件工程、实践-W班

136

社区成员

2022年福大-软件工程;软件工程实践-W班
软件工程 高校
社区管理员
  • FZU_SE_teacherW
  • 丝雨_xrc
  • Lyu-
加入社区
帖子事件
编辑了帖子 (查看)
2022-03-26 17:23
创建了帖子
2022-03-24 23:26
社区公告
暂无公告