- 目录
- 项目信息
- 分工
- PSP表格
- 解题思路
- 使用说明
- 测试
- github签入记录
- 遇到的困难及解决
- 队友互评
项目信息
| 内容 | 地址 |
|---|---|
| 成员博客 | 林斌祥031702416 |
| 成员博客 | 柯禧帆031702418 |
| 作业博客 | 作业博客 |
| github地址 | github地址 |
分工
柯禧帆:代码编写，设计框架
林斌祥:ui设计，后期美化
PSP表格
| Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|
| 计划 | 20 | 10 |
| 估计这个任务需要多少时间 | 10 | 2 |
| 开发 | 180 | 300 |
| 需求分析 (包括学习新技术) | 60 | 180 |
| 生成设计文档 | 60 | 60 |
| 设计复审 | 10 | 10 |
| 代码规范 (为目前的开发制定合适的规范) | 10 | 10 |
| 具体设计 | 40 | 30 |
| 具体编码 | 120 | 180 |
| 代码复审 | 30 | 20 |
| 测试（自我测试，修改代码，提交修改） | 20 | 60 |
| 报告 | 20 | 30 |
| 测试报告 | 30 | 20 |
| 计算工作量 | 20 | 20 |
| 事后总结, 并提出过程改进计划 | 20 | 30 |
| 合计 | 650 | 962 |
解题思路与设计实现说明
看到结对作业为实现一棵家族树后，我们便决定找一个bootstrap的treeview来实现，程序编写时主要需要解决的问题为js对象的设计与对文字的处理
<script>
function creatTree() {
var text = document.getElementById('inarea').value;
var table = text.split(/\n\s*\n/);//分割不同的树
/*var obj = {
id : '',//该节点id
name : '',//节点名
parentId : '',//父节点id
desc : '',//说明
}类*/
var objList = [];
for(i=0;i<table.length;i++){//分割成多个块一边生成多棵树
var row = table[i].split(/[(\r\n)\r\n]+/);//分割每行
var obj = new Object();//导师对象
obj.name = row[0].split(/：/)[1];
obj.id = String(i);
obj.parentId = null;
obj.desc = "teacher";
objList.push(obj);
for(j=1;j<row.length;j++){
var obj = new Object();//年级和学位对象
var gAndD = row[j].split(/：/)[0];//年级和学位
var stu = row[j].split(/：/)[1].split(/、/);//学生
obj.id = String(i)+String(j);
obj.name = gAndD;
obj.parentId = String(i);
obj.desc = "grade and degree";
objList.push(obj);
for(k=0;k<stu.length;k++){
var obj = new Object(); //学生对象
obj.id = String(i)+String(j)+String(k);
obj.name = stu[k];
obj.parentId = String(i)+String(j);
obj.desc = "student";
objList.push(obj);
}
}
}
var data = objList;
$('#tree_table').bootstrapTable({//调用插件提供方法生成树
class: 'table table-hover table-bordered',
data: data,
sidePagination: 'server',
pagination: false,
treeView: true,
treeId: "id",
treeField: "name",
rowAttributes: function (row, index) {
return {
xx:index
};
},
queryParams : function(params) {
var param = {
roleId : 'xx'
};
return param;
},
columns: [{
field: 'name',
title: '名称',
},
{
field: 'desc',
title: '详情',
},
]
});
$("#expandAllTree").on('click',function(){//展开所有节点
$('#tree_table').bootstrapTable("expandAllTree")
})
$("#collapseAllTree").on('click',function(){//关闭所有节点
$('#tree_table').bootstrapTable("collapseAllTree")
})
}
</script>使用说明
按找指定格式如下，输入内容点击按钮即可生成树，树与树之间需空一行。
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
界面如下：
github代码签入记录
异常或结对困难及解决方法
主要困难在于框架的学习以及前端语言的学习
解决办法：找一个简单易用的框架，例如我们现在所使用的这个-_-
评价队友
林斌祥:我的队友是一个很可靠的人，在结对编程遇到困难没有方向的时候，试了很多的框架，写了很多的代码。很高兴能一起完成本次结对编程。
柯禧帆:我的队友设计的页面样式还是挺好看的，符合我的审美，很高兴能一起完成本次结对编程。