结对项目-小学生四则运算系统网页版项目报告
结对作业搭档:童宇欣
本篇博客结构一览:
1).前言(包括仓库地址等项目信息)
2).开始前PSP展示
3).结对编程对接口的设计
4).计算模块接口的设计与实现过程
5).计算模块接口部分的性能改进
6).计算模块部分单元测试展示
7).计算模块部分异常处理说明
8).界面模块的详细设计过程
9).界面模块与计算模块的对接
10).结对过程的描述
11).结对编程的优缺点
12).完成后实际的PSP
13).项目总结与改进
1)前言
本次结对项目,我们制作的是网页版的四则运算系统。在结对的过程中,我(王文雨)负责前端,童宇欣负责后端。一起进行了两部分功能的对接与融合
以下是我们的一些项目信息:
仓库地址(王文雨的仓库):https://coding.net/u/theMostCute/p/sizeyunsuanxitong/git/tree/master/?public=true
仓库地址(童宇欣的仓库):https://git.coding.net/honey_xiaoxinxin/FreshCalculate.git
网页版可测试的URL地址:http://47.93.197.5:8080/FirstCalculate/index.jsp
项目代码说明(以童宇欣的代码仓库内容为准):项目整体放在了Calculate文件夹下,里面包含命令行出题部分代码NewCalculate,以及网页版完整源代码(web文件夹下)。命令行测试入口为src下Command.java;在src下将其编译,即可输入数据进行测试运行。
2).开始前PSP展示
PSP
PSP2.1 |
任务内容 |
计划共完成需要的时间(min) |
Planning |
计划 |
20 |
Estimate |
估计这个任务需要多少时间,并规划大致工作步骤 |
10 |
Development |
开发 |
1000 |
Analysis |
需求分析 (包括学习新技术) |
20 |
Design Spec |
生成设计文档 |
20 |
Design Review |
设计复审 (和同事审核设计文档) |
10 |
Coding Standard |
代码规范 (为目前的开发制定合适的规范) |
1 |
Design |
具体设计 |
20 |
Coding |
具体编码 |
500 |
Code Review |
代码复审 |
20 |
Test |
测试(自我测试,修改代码,提交修改) |
15 |
Reporting |
报告 |
20 |
Test Report |
测试报告 |
10 |
Size Measurement |
计算工作量 |
10 |
3).结对编程对接口的设计
在《构建之法》书中没有找到有关信息,希望老师在设计要求的时候,可以告诉我们页数。我在网上查阅了资料。
Information Hiding信息隐藏:信息隐藏指在设计和确定模块时,使得一个模块内包含的特定信息(过程或数据),对于不需要这些信息的其他模块来说,是不可访问的。
Interface Design接口设计:是传统的后勤保障的一种要素也是一种后勤功能。
Loose Coupling松耦合:系统通常是基于消息的系统,此时客户端和远程服务并不知道对方是如何实现的。客户端和服务之间的通讯由消息的架构支配。只要消息符合协商的架构,则客户端或服务的实现就可以根据需要进行更改,而不必担心会破坏对方。
本次作业采用的是网页制作,整体采用MVC模型MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。本次作业进行了模块化编程,运算模块和界面模块相对较独立,尽量做到了低耦合度。让判断正误和计时以及条件受限放到前端制作,减少服务器的负担。
4).计算模块接口的设计与实现过程
我负责的有
①计算结果正误判断:
用js方法通过回答数组对答案数组的一一对应。
for(var i=0;i<huida.length;i++){anwser[i].style.display="inline-block";if(huida[i].value==daan[i].innerHTML){yesno[i].innerHTML="√";yesno[i].style.color="#1DF126";yes++;}else{yesno[i].innerHTML="×";yesno[i].style.color="red";no++;}}
②智能出题的条件判断,通过js方法,限制输入的条件
var oBiaodan=document.getElementById('oBiaodan'); $("#yiding").click(function(){var nummMax=document.getElementById('nummMax');var numm=document.getElementById('numm');var minn=document.getElementById('minn');var maxx=document.getElementById('maxx');if(numm.value==""){alert("请填写题目数量!!!");oBiaodan.onsubmit=function(){return false;} }if(numm.value<1||numm.value>10000){alert("题目数量超出范围,范围为1-10000");oBiaodan.onsubmit=function(){return false;} }if(minn.value==""||minn.value<1||minn.value>50){alert("请填写正确范围!!!下线范围1-100,上限范围50到1000 ");oBiaodan.onsubmit=function(){return false;} }if(maxx.value==""||maxx.value<50||maxx.value>1000){alert("请填写正确范围!!!下线范围1-100,上限范围50到1000 ");oBiaodan.onsubmit=function(){return false;} }});
5).计算模块接口部分的性能改进(这部分展示雨欣的成果)
1.性能分析改进
在运算模块的性能分析过程中,大约花费了2小时,首先经过性能分析知道了我有些资源在使用结束后是没有回收的,经过排查后,我发现了是在写入文件后没有关闭输出流,导致了资源没有完全回收。发现这一问题后,我针对它进行了改进,关闭了输出流。使项目的性能得到了提高。同时经过性能分析,我发现我整个程序消耗最大函数是出题过程中的MakeQuestion3,即出题过程中不仅要出题,还要判断题目是否符合要求,要调用调度场算法运算答案。因为这里要满足出题的时候必须在规定数字范围内,及整除等条件,不符合要求的算式都要重新出题。发现这一问题后,我也对我的程序进行了改进,将是否能整除这些判断在出两个数字的简单式子的时候直接进行了保证,使这里只需要判断每一步的运算结果是否在规定范围内,使整个程序的性能得到了提高。
2.性能分析截图
项目总体分析图,从内存,多线程,CPU等方面分析了计算模块的性能,截图如下:
性能分析过程截图:
首次按F4,出现以下截图。可见有些资源没有回收,经排查,我发现是我没有关闭写入文件的输出流。解决过这个问题后,我再一次进行了性能分析。
经过以上的分析,让我了解了性能分析的过程,也知道了性能分析的重要性。
6)计算模块部分单元测试展示
(1)分别对计算模块的Command.java和MakeQuestion.java进行了测试。写了如下两个单元测试类。
(2)以下是测试类的部分代码截图:
(3)构造测试数据思路
a.对于Command的测试,主要应保证参数的各种输入情况都有涉及。所以我就分别构造了:参数输入正确时的参数args数组;不包含必须输入的参数,并且-o参数后没有输入应有数字的args1数组;-n参数后不包含应有的数字的args2数组;及字母参数后数字范围有错的args3,args4,args5,args6。经过以上设计,最终Command类的测试覆盖率达90%以上。
b.对于MakeQuestion方法的测试,为保证测试覆盖率,应保证各种类型的参数都输入执行。所以这里就构造了有乘除的,有括号的;没有乘除的,没有括号的;及不同运算符个数限制;不同数量;不同范围限制这些情况。经过以上设计,最终MakeQuestion类的测试覆盖率达90%以上。
(4)测试覆盖率截图展示
以下分别为两个类测试覆盖率的截图展示以及部分代码执行情况展示:
由图可知,此次单元测试的覆盖率还是相对较高的,执行通过的绿色占大部分,但仍有一些呈现黄色和红色。也会继续改进,争取再次提高测试覆盖率。
7)计算模块部分异常处理说明
(1)没有输入必须的参数-m,-n
①通过if判断对这种异常进行了处理。设计了两个参数ifm和ifn判断是否有-m,-n的输入。
②单元测试样例
③错误对应场景:例如命令行没有输入-n或-m。发生错误时,会提示用户输入的参数中必须包含题目数量/对题目数值上下界的设定。请重新输入。
(2)输入的参数超出指定范围
①对于这种情况我设计了参数ifrun对能获取到数字但是数字超出范围的情况进行了判断,出现异常时ifrun值为false。
②单元测试样例
③错误对应场景:例如命令行输入-n 10 –m -1 3。发生错误时,会提示用户各个参数应有的界限,请用户重新输入。
(3)输入的字母后没有紧跟着对应数量的或对应形式的参数。
①对于这种情况用了try-catch语句判断处理异常。输入错误就会执行catch语句中内容,给出合理提示。
②单元测试样例
③错误对应场景:例如-n –m 1 100的输入。发生错误时,会提示用户正确的输入形式,请用户重新输入。
(4)出题后,写入文件时出错
对于这种情况用了try-catch语句判断处理异常。输入错误就会执行catch语句中内容,给出文件出错提示。
8)界面模块的详细设计过程
整体思路:
①出题部分
功能如图所示通过<form>表单进行功能实现向后台传输数据
如果输入的东西不符合要求,js会进行判断
②文件上传(题目导入)
功能如图,文件提交由后台代码实现
③功能转换
这三个功能在同一个页面上,通过js改变css样式进行改变。
$("#mia").click(function(){$("#xinxi").css("display","block"); $("#miao").css("display","none"); }); $("#chu").click(function(){$("#xinxi").css("display","none");$("#miao").css("display","block"); }); $("#otou").click(function(){$("#mengban").css("display","block");}); $("#cha").click(function(e){$("#chamian").css("display","block");e.stopPropagation(); }) $("#chamian").click(function(e){$("#chamian").css("display","block");e.stopPropagation(); }) $(document).click(function(e){$("#chamian").css("display","none"); });
④成绩汇总
有两个汇总,一个是全部成绩,一个是最佳成绩。点击这两个按钮都会跳转到同一个jsp页面。而内容显示的不同由后台代码实现
全部成绩
嗷,前面截图漏了学号
各用户的最佳成绩
⑤题目页
没有提交之前,包括计时器(js实现)和题目显示,答案写在<input>中通过js进行与答案的判断
提交后出现答题情况的弹窗js判断对错,统计总题目数,答对题数,答错题数,和总时间,将数据通过隐藏的<form>传到后台
答题情况的弹窗是可以拉动的,可以让学生查看自己哪里答错了,可以再做但是不可以再次提交。拉动由js实现
//面板拖动
var drag=document.getElementById('drag');drag.οnmοusedοwn=function(){startMove();}var oCha=document.getElementById('QQcha');oCha.οnclick=function(){var oBody=document.getElementById('mainbody');var oCha=document.getElementById('QQcha');oBody.style.display="none";}function startMove(event){event=event || window.event;var oBody=document.getElementById('mainbody');var disX=event.clientX-oBody.offsetLeft;var disY=event.clientY-oBody.offsetTop;document.οnmοusemοve=function(event){event=event ||window.event;okMove(event,disX,disY);event.preventDefault();}document.οnmοuseup=function(){document.οnmοusemοve=null;document.οnmοuseup=null;}
}
function okMove(e,posX,posY){var oBody=document.getElementById('mainbody');var l=e.clientX-posX;var t=e.clientY-posY;var winW=document.documentElement.clientWidth || document.body.clientWidth;var winH=document.documentElement.clientHeight || document.body.clientHeight;var maxW=winW-oBody.offsetWidth-10;var maxH=winH-oBody.offsetHeight;if(l<0){l=0;}else if(l>maxW){l=maxW;}if(t<0){t=10;}else if(t>maxH){t=maxH;}oBody.style.left=l+'px';oBody.style.top=t+'px';
}
9)界面模块与计算模块的对接。
作为前端,我只说我负责的部分:
①计时
// setInterval计时器var theTime=document.getElementById('theTime');var n=0;var m=0;var f=0;var ff=0;var timert=null;function timeCount(){clearInterval(timert);timert=setInterval(function(){n=n+1;f=n/60;ff=parseInt(f) m=n%60;theTime.innerHTML=ff+" 分 "+m+" 秒";},1000);}timeCount();
②判断正误
//判断回答是否正确var tiJiao=document.getElementById('tiJiao');
var oBody=document.getElementById('mainbody');
var huida=document.getElementsByClassName('huida');
var daan=document.getElementsByClassName('e');
var anwser=document.getElementsByClassName('anwser');
var yesno=document.getElementsByClassName('yesno');
var emm=document.getElementsByClassName('emm');
var allnum=document.getElementById('allnum');
var alltime=document.getElementById('alltime');
var allyes=document.getElementById('allyes');
// var yes=0;
// var no=0;tiJiao.οnclick=function(){var yes=0;var no=0;for(var i=0;i<huida.length;i++){anwser[i].style.display="inline-block";if(huida[i].value==daan[i].innerHTML){yesno[i].innerHTML="√";yesno[i].style.color="#1DF126";yes++;}else{yesno[i].innerHTML="×";yesno[i].style.color="red";no++;}}clearInterval(timert);
③统计总题目数,答对题数,答错题数,和总时间,将数据通过隐藏的<form>传到后台
HTML:
<form οnsubmit="return PostData()" id="form1"><input type="text" id="allnum" value="1" style="display: none;"><input type="text" id="allyes" value="" style="display: none;"><input type="text" id="alltime" value="" style="display: none;"> <input type="submit" class="quedinng" value="确定"></form>
JS:
oBody.style.display="block";tiJiao.style.display="none";allnum.value=daan.length;allyes.value=yes;emm[0].innerHTML=daan.length;emm[1].innerHTML=yes;emm[2].innerHTML=no;if(theTime.innerHTML=="计时区"){emm[3].innerHTML="您没有计时";alltime.value=0; }else{emm[3].innerHTML=theTime.innerHTML; alltime.value=theTime.innerHTML; }}
10)描述结对的过程
我们的结对大约分为两个阶段,由于我们编写的是网页版,两个人擅长的领域不相同
第一阶段主要是一人负责前端,一人负责后端,这一过程我们相当于是分开各自编程的,所以这里部分对驾驶员和领航员这种模式的切换和运用不够明显,每人负责自己的那部分代码的编写;
第二部分,进入合页面和两个模块的对接过程,我们两人一起合作,在这一阶段也充分体验了结对编程两个人一起的高效之处。我们两个人不断切换驾驶员领航员角色,比较顺利的完成了不同板块的对接与项目的测试。同时也共同完成了整个项目的性能分析和单元测试的覆盖率分析。
结对的时候,我们都要耐心倾听,一起改bug,听取对方的建议
11)结对编程的优点和缺点
结对编程的优点:锻炼合作能力,沟通交流能力,分工配合能力
结对编程的缺点:两人分开干活,彼此进度不同,代码功能不同。合在一起不容易
童宇欣的优点:学习的上进心,在最开始考虑项目功能时,她一直强调想做出附加功能
强大的代码能力,在工作室她已经接手过几个校级项目,对代码熟悉
耐心,合作中配合,会有不同的bug一起改
童宇欣的缺点:真想不出来,和她配合很愉快
我的优点:积极配合,因为是前端,更多是辅助宇欣,她想要什么功能都可以满足
对前端语言的熟悉,也接手过项目
耐心,合作中配合,会有不同的bug一起改
我的缺点:对Java语言不熟悉
9)在你实现完程序之后,在附录提供的PSP表格记录下你在程序的各个模块上实际花费的时间。(1')
PSP
PSP2.1 |
任务内容 |
实际完成需要的时间(min) |
Planning |
计划 |
30 |
Estimate |
估计这个任务需要多少时间,并规划大致工作步骤 |
10 |
Development |
开发 |
2700 |
Analysis |
需求分析 (包括学习新技术) |
40 |
Design Spec |
生成设计文档 |
20 |
Design Review |
设计复审 (和同事审核设计文档) |
20 |
Coding Standard |
代码规范 (为目前的开发制定合适的规范) |
15 |
Design |
具体设计 |
60 |
Coding |
具体编码 |
1800 |
Code Review |
代码复审 |
45 |
Test |
测试(自我测试,修改代码,提交修改) |
700 |
Reporting |
报告 |
840 |
Test Report |
测试报告 |
780 |
Size Measurement |
计算工作量 |
30 |
13)项目总结与改进
本次作业完成了所有基本功能,能够实现规定要求的出题,和带负数的计算,同时实现了允许多用户做题,并能记录所有用户的全部成绩和最好成绩。
但仍然存在很多不足之处。比如另外一个附加功能(能够支持多语言)没能实现,还有由于对每一步运算结果的范围限制,导致我们的程序出现括号的概率变小。接下来的时间我们一定会继续改进我们的项目,争取能呈现出更好的效果。
和宇欣合作非常棒!!她做事认真,热情开朗,是一个非常棒的合作伙伴!!
转载于:https://www.cnblogs.com/Dear-Demon/p/8732517.html
结对项目-小学生四则运算系统网页版项目报告相关推荐
- 结对项目-小学生四则运算系统(GUI)
Coding克隆地址:https://git.coding.net/FrrLolix/CalGUI.git 伙伴博客:http://www.cnblogs.com/wangyy39/p/8763244 ...
- native版本 修改项目react_GitHub - zust-hh/rn-project-management-system: react-native 版项目管理系统...
react-native和graphql版本项目管理系统 目前只适配了Android端 运行流程: git clone npm install cd server & npm install ...
- 对战五子棋——网页版
目录 一.项目简介 二.用户模块 1.创建用户实体类 2.编写userMapper接口文件 3.实现userMapper.xml文件 4.对用户密码进行加密 5.实现用户登录功能 6.实现用户注册功能 ...
- 四则运算网页版--结对项目
前言: 这次项目是用前后台分离,后台代码由servlet编写.项目部署于我的个人服务器. github仓库地址https://github.com/LeonP3ng/CalculateWeb.git ...
- 网页游戏老手村《梦幻西游网页版》项目开发经验分享
基于白鹭引擎研发的页游大作<梦幻西游网页版>仅用时数天步入iOS免费版TOP3,截至目前,这款产品将近20天位列畅销榜Top 10,目前基本稳定在Top 20,首月仅iOS平台流水便破亿, ...
- 项目__网页版聊天室
项目内容 使用开源websocket框架mongoose编写网页版本的群聊即时通信工具,使用http+mongoose+session+mysql+jsoncpp的技术构成,从而实现一个网页版的聊天室 ...
- 基于 SpringBoot + Vue 框架开发的网页版聊天室项目
简介 微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
- 这个gayhub的大佬作者,更新起ChatGPT的项目,简直是高产如奶牛呐!实战网页版chatgpt-web源码(上)
大家好啊,我是测评君,欢迎来到web测评. 最近chatgpt真的是火了一遍又一遍,基本逛gayhub,gitee等开源社区的时候,随处可见各种大佬写的开源项目.今天给大家分享的是Chanzhaoyu ...
- 2048网页版html项目报告,jQuery编写网页版2048小游戏
大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起 ...
最新文章
- 在51CTO安了家。。。。
- MySQL的库表详细操作
- Enterprise search Callstack in runtime
- vue中的ES6语法整理1
- torch版ResNet50(带有多输出)转c++ tensorrt
- 二手交易平台html代码,二手物品交易HTML5模板
- OpenGL:配置glad
- 建立简单的VLAN通信
- PPT:A Lexicon-Based Graph Neural Network for Chinese NER
- Linux使用jstat命令查看jvm的GC情况(转)
- torch 深度学习(5)
- python关系图谱_利用Python+Gephi构建LOL全英雄间的关联图谱
- 如何区分项目组合管理,项目集管理,和项目管理
- visual stadio code(VS code) 中 Markdown简明操作[持续更新]
- R语言实战 input+结果——ROC曲线的绘制 auc 时量下曲线面积
- 互联网教育已过时,教育科技才是未来的趋势
- matlab做机器人运动轨迹,matlab机器人工具箱学习笔记——机器人的运动轨迹
- 电商网站如何进行库存同步处理Redis+Lua
- tcpmux TCP 端口服务多路复用
- Ch支持java不,ch.hsr.geohash包使用
热门文章
- linux系统fuser命令,Linux系统使用Fuser命令的方法
- mysql5.6.13_MySQL-5.6.13解压版(zip版)安装配置教程
- 名为 cursor_jinserted 的游标不存在_生鲜电商存在的问题及对策解析:未来生鲜电商如何发展?...
- xilinx-arm-linux交叉编译链安装
- CDMA的完整形式是什么?
- 安卓log.e函数打印示例_log1p()函数以及C ++中的示例
- JAVA安装作用_jdk安装配置及其作用
- uva 12545——Bits Equalizer
- Codeforces 55D Beautiful Number (数位统计)
- C/C++构造及析构顺序及变量的生命周期