688
社区成员
发帖
与我相关
我的任务
分享结对第二次作业--编程实现
| 这个作业属于哪个课程 | 2023年福大-软件工程实践-W班 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业--编程实现 |
| 结对学号 | 082000407 & 182000318 |
| 这个作业的目标 | 实现之前原型设计的web设计 |
| 其他参考文献 | CSDN，GitHub |
目录：
一、 git仓库链接和代码规范链接
二、 PSP表格
三、 成品
四、 结对
一、git仓库链接和代码规范链接
二、PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 20 |
| •Estimate | • 估计这个任务需要多少时间 | 30 | 20 |
| Development | 开发 | 410 | 560 |
| • Analysis | • 需求分析 (包括学习新技术） | 60 | 70 |
| • Design Spec | • 生成设计文档 | ||
| • Design Review | • 设计复审 | ||
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 10 | 10 |
| • Design | • 具体设计 | 300 | 480 |
| • Coding | • 具体编码 | 100 | 200 |
| • Code Review | • 代码复审 | 0 | 0 |
| • Test | • 测试（自我测试，修改代码，提交修改） | 30 | 20 |
| Reporting | 报告 | 30 | 40 |
| • Test Repor | • 测试报告 | 30 | 50 |
| • Size Measurement | • 计算工作量 | 0 | 0 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 10 | 20 |
| 合计 | 910 | 1490 |
三、成品
3.1成品展示
这是我们的主页
这是所有选手的信息界面
这是所有的比赛场次，任何时间均可出现
有点丑陋的晋级图，只是缺少了线与线连接。
这是我们两个人结对编程，讨论的图片
3.2代码实现
1.返回Draws的页面
@RequestMapping("/Draws")
public String getDrawsJson(HttpServletRequest request)throws IOException{
System.out.println("访问到Draws！");
String num=request.getParameter("num");
InputStream dataStream=getClass().getClassLoader().getResourceAsStream("data/draws.json");
if(num==null){
request.setAttribute("data",result_Draws(dataStream,0));
System.out.println(result_Draws(dataStream,0));
} else {
request.setAttribute("data",result_Draws(dataStream,Integer.parseInt(num)));
System.out.println(result_Draws(dataStream,Integer.parseInt(num)));
}
return "Draws";
}
2.返回Day的页面
@RequestMapping("/Day")
public String getDayJson(HttpServletRequest request)throws IOException {
System.out.println("访问到Day！");
String date=request.getParameter("date");
InputStream dataStream;
if(date==null){
dataStream=getClass().getClassLoader().getResourceAsStream("data/Q1.json");
}else {
dataStream=getClass().getClassLoader().getResourceAsStream("data/"+date+".json");
}
request.setAttribute("data",result_Day((dataStream)));
return "Day";
}
3.获得json数据从而解析成表格
// 获取要添加表格的容器元素
var tablesDiv = document.getElementById("Courts");
// tablesDiv.removeChild(h1);
// 创建多个表格
for (var h = 0; h < data.court.length; h++) {
var Div = document.createElement("div");
// 创建表格元素
Div.className = "row";
var Activities = data.court[h];
var courtname = data.court[h].courtname;
Div.innerHTML = "<h1 style='margin-left=100px;' >" + courtname + "</h1>";
Div.classList.add("border");
for (var j = 0; j < Activities.activities.length; j++) {
var DivTable = document.createElement("div");
DivTable.classList.add("col-sm-6");
var table = document.createElement("table");
table.classList.add("table", "table-bordered");
table.style.backgroundColor="#fff";
// var courtname = data.court[i].courtname;
var activity = Activities.activities;
var Row = table.insertRow(0);
var round_id = activity[j].round_id;
var activity_status = activity[j].activity_status;
var duration = activity[j].duration;
var teams = activity[j].teams;
// var row = document.createElement("tr");
var cell1 = Row.insertCell(0);
// var cell2 = Row.insertCell(1);
// var cell3 = Row.insertCell(2);
var cell10 = Row.insertCell(1);
var cell11 = Row.insertCell(2);
cell1.innerHTML = "<p style='font-size:30px;'><strong>" + courtname + "<strong></p>";
cell1.innerHTML+=" <p>" + round_id + "</p>";
cell10.innerHTML = " ";
// cell3.innerHTML = " ";
// cell2.innerHTML = " ";
cell11.innerHTML = " <p style='font-size:30px;'><strong> " + activity_status + "<strong></p><p>" + duration + "</p>";
//tbody.appendChild(row);
for (var k = 0; k < teams.length; k++) {
var row2 = table.insertRow(k + 1);
// var team = teams[k].team[0];
var score = teams[k].score;
var status = teams[k].status;
var cell5 = row2.insertCell(0);
var cell6 = row2.insertCell(1);
var cell7 = row2.insertCell(2);
// var cell8 = row2.insertCell(3);
if (teams[k].team.length > 1) {
cell5.innerHTM = teams[k].team[0].name + " & " + teams[k].team[1].name;
}
else {
cell5.innerHTML = teams[k].team[0].name;
}
if (status == "Winner") {
cell6.innerHTML = "<span class='glyphicon glyphicon-thumbs-up' aria-hidden='true' ></span>";
}
else {
cell6.innerHTML = " ";
}
cell7.innerHTML=" ";
for (t = 0; t <score.length; t++) {
if (score[t].winner) {
cell7.innerHTML += "<span style='font-weight:bolder;padding:6px;font-size:20px;'>"+score[t].game +"</span>";
}
else {
cell7.innerHTML += "<span style='padding:5px;'> "+score[t].game + "</span>";
}
}
}
DivTable.appendChild(table);
Div.appendChild(DivTable);
tablesDiv.appendChild(Div);
}
}
3.3代码说明
1.返回Draws
通过request.getParameter("num")，获取前端传来的数据num，选择某一轮次的晋级图。
先判断是否传值，没有传值把num设置为默认的。根据数据判断返回的json数据。
这里使用了之前写好的类，result_Draws(InputStream inputstream,int Round_num).
输入读取的文件流和轮次，调用该函数。
在request.setAttribute()中，设置了参数data，用于前端读取该数据。最后返回"Draws"页面
2.返回Days
该方法与getDrawsJson一样，通过传入日期天数，来选择返回的json数据
3.获得json数据，生成表格
获得json数据之后，我们与动态生成表格，然后将表格添加到div中
四、结对
4.1结对过程
这次我们的结对编程，需要部署一个完整的网页来实现我们之前所做的原型设计。并且需要前后端的分离。
我们决定使用这学期将要学习的JavaEE，可以提前熟悉。由于之前作业的代码实现我们之中有人使用了c++,在这次作业中不能复用。所以我们根据这个进行了分工。一个负责进行前端四个网页的设计，一个负责使用spring框架搭建，并解析json数据传递给前端。
4.2心路历程和收获
这次的作业好多东西没用过，遇到了很多问题。一开始就像无头苍蝇一样，因为之前只有用过一个Yii框架，并且两个人都不熟悉。所以这次作业有点迷茫。前端的JS也是如此，都是上学期末刚接触。我们两个人都有很多问题不懂。在前期都是局限于各自的部分，一个设计静态的网页，一个设计json接口。
在实现网页的运行前，我们其实都不太明确目标。直到看到实际的成品之后，我们才知道有哪些部分需要去实现。
我们开始逐个网页的共同完善。从json数据的结构设计，到前端网页跳转和请求，一个个慢慢解决。有什么需要对方实现的，当面沟通，结对设计代码，共同解决问题。可以说这是沟通最多的一次代码设计。不像之前的web水课，按照网课视频敲代码，没有前后端的沟通需求，只要一个人完成。
4.3评价
182000318：
这次作业有很多的东西我们都不太熟，越是弄到后面，越是有点懒，因为都是没有接触过的错误，到后面有点心累，可以说没有队友的不断催促和鼓励，可能我得经常罢工休息。在他的陪伴下（在旁监督）紧赶慢赶，终于完成了。写完博客就可以休息咯！
082000407：
中国好队友，十分的适合结对编程，开始的时候我们一起都在学习jsp，他真的太强了，之后他就负责后端，学习服务器的相关知识，我们两个之间遇到过许多的困难，但是好在都在最后的时候一起克服了，把作业及时的完成了。
...全文
请发表友善的回复…
发表回复
助教-张思锐 助教 2023-04-07
- 打赏
- 举报
整体写得有点简略，而且博客已经写了很多期了，目录格式还是有问题，要注重这方面问题
