软件工程实践结对作业二

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

...全文
1391 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
助教_陈雨虹 2022-04-06
  • 打赏
  • 举报
 回复

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

221900331郑江涛 学生 2022-04-08
  • 举报
 回复
@助教_陈雨虹 谢谢助教的夸奖和喜欢！
221900331郑江涛 学生 2022-03-27
  • 打赏
  • 举报
 回复

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

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

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

221900331郑江涛 学生 2022-03-26
  • 举报
 回复
@Jingbin-Wang 谢谢老师的点评，我们会对问题进行优化，并改进博客！
软件工程实践结对作业二.md
软件工程实践结对作业二.md
PairProject:W班软件工程实践结对第二次作业仓库
结对第二次作业-顶会热词统计的实现 为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。 fork仓库，和伙伴商讨如何通过github协作/代码规范等 编程实现 功能一，操作爬取的论文列表 功能二，爬取结果分析展示 功能三，爬取论文信息（附加功能，实现有附加分） 其他附加功能 部署 发布发布版本，发起拉取请求 撰写博客，在预先之前提交一份博客 包含作业描述和目录 核对评分标准 上一次结对作业中，大家都和小伙伴完成了原型的设计，那么现在再联合小伙伴动手实现原型中的部分功能吧。采用网络技术来实现原型中的功能。 一，作业内容 1.基础功能 功能1：对已爬取的论文列表进行操作 可对论文列表进行删除； 可对论文列表进行查询详细信息（支持模糊查询，查询结果的展示，排序等功能可自行设计）； 功能2：分析已爬取到的论文信息，提取top10个热门领域或热门研究方向 形成如关键字图谱之类直观的查看方式
软件工程作业——四则运算生成器
软件工程结对作业。程序可基本实现添加括号，选择难度，保存算式及答案的功能。
基于Python语言的P4程序结对作业设计源码
该项目是一款基于Python语言的P4程序结对作业设计源码，总文件量为114个，其中Python源文件57个，JSON配置文件24个，P4配置文件11个，Markdown文档8个，PNG图像文件3个，许可证文件1个，以及多个Makefile文件。该项目旨在通过结对作业的形式，提升编程能力和团队合作精神。
thoughtworks笔试作业
thoughtworks公司的笔试作业，用C++完成，用到了单例模式，工厂模式。
2022年福大-软件工程、实践-W班

142

社区成员

922

社区内容

发帖
与我相关
我的任务
社区描述
2022年福大-软件工程;软件工程实践-W班
软件工程 高校
社区管理员
  • FZU_SE_teacherW
  • 丝雨_xrc
  • Lyu-
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章