| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020 |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| 队友博客 | https://www.cnblogs.com/LZN324/p/13801024.html |
| github项目地址 | https://github.com/lzn2324/031702324and031802214 |
| 这个作业的目标 | <学习前端技术与github协作> |
| 学号 | <031702324、031802214> |
一、PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 30 |
| Development | 开发 | 120 | 180 |
| Analysis | 需求分析 (包括学习新技术) | 480 | 600 |
| Design Spec | 生成设计文档 | 30 | 30 |
| Design | 具体设计 | 60 | 30 |
| Coding | 具体编码 | 150 | 180 |
| Test | 测试（自我测试，修改代码，提交修改） | 60 | 180 |
| Reporting | 报告 | 30 | 60 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 30 |
| 合计 | 990 | 1320 |
二、具体分工
- 林钊宁
界面设计与博客撰写 - 黄明浩
处理数据编码
三、解题思路描述与设计实现说明
思路
这次作业采用了jquery+bootstrap+echarts实现，本来只准备用bootstrap实现的，然后在查阅资料的时候发现了echarts，觉得echarts的树形图功能很契合这次的作业，而且也比较美观，就采用了echarts。解析文本，具体使用了split方法。首先逐行分解，提取出导师，记为根节点；再提取出学位记为导师的子节点；然后按'、'提取出姓名，记为学位的子节点；技能/经历作为姓名的子节点。最后通过根节点逐层生成树。
DFD图
关键代码部分
- echart实现
var myChart = echarts.init(document.getElementById("container"))
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [tree_data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
initialTreeDepth: 10,
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
- 数据处理
var text_str = document.getElementById('inputs').value;//得到输入框的值
if(text_str == ""){
alert("输入信息不能为空！");
}
/*将输入数据按导师分成块*/
block_str = text_str.split('
');//分开两份信息
for(var i = 0;i < block_str.length;i++)
{
line_str = block_str[i].split('
');//数据按行分开
var item = line_str[0].split('：');//将每行数据的职位和姓名分开
if(item[0] != "导师"){
alert("导师行错误！");
}
var teacher = item[1];
next_node[teacher] = [];//子节点
jobs[teacher] = item[0];
names.push(teacher);//保留导师的姓名以便使用
Manage_Text(line_str,teacher);//处理学生数据
Creat_Tree();
function Manage_Text(line_str,teacher)
{
/*处理学生信息*/
for(var i = 1;i < line_str.length;i++)
{
if (line_str[i] === '') continue;
if(!isNaN(line_str[i].slice(0, 4))){
for(var val of students)
{
/*按学生学历分别处理*/
if(line_str[i].indexOf(val) != -1)
{
var item = line_str[i].split('：');//将学生学历与姓名分开
var stu_str = item[0]+teacher;
next_node[teacher].push(stu_str);//将导师与学生学历节点连接
jobs[stu_str] = val;
next_node[stu_str] = [];
parents[stu_str] = 1;
names.push(stu_str);//保留学生学历以便使用
break;
}
}
/*处理学生姓名*/
var stu_names = item[1].split('、');//将同行学生分开处理
for(var val of stu_names)
{
next_node[stu_str].push(val);//将学生学历与学生姓名节点连接
parents[val] = 1;//标记学生有导师
jobs[val] = item[0];
next_node[val] = [];
names.push(val);//保留学生姓名以便使用
sname.push(val);
}
}
else
{
/*处理技能*/
var item1 = line_str[i].split('：');//姓名与技能分开
for(var val of names)
{
if(item1[0].indexOf(val) != -1)
{
var skill_str = item1[0] + val;
next_node[val].push(skill_str);
jobs[skill_str] = val;
next_node[skill_str] = [];
parents[skill_str] = 1;
name.push(skill_str);
}
var skills = item1[1].split('、');
for(var val of skills)
{
next_node[skill_str].push(val);//技能与学生姓名连接
parents[val] = 1;//标记有父节点
jobs[val] = item1[0];
names.push(val);
}
}
}
}
}
四、成果展示
实现了树之间的关联，即能够找到导师的导师
五、目录说明和使用说明
TStree.html是主页面，用户直接双击文件夹中的TStree.html或右键选择浏览器打开就能运行我们的网页。其余文件均为所要引用的js文件和css文件
六、Github的代码签入记录
七、遇到的困难与解决办法
之前都没接触过web的编程，这次算是一周入门，不过感受到html css挺好玩的。首先遇到的困难就是在实现树方面了，找了好几天bootstrap实现树的方法，但是看来看去都是不是很满意，而且实现起来也比较麻烦（懒，怕麻烦）最后发现了echarts，很符合这次作业的要求，实现起来也不是太麻烦。然后就是输入文本处理了，遇到了各种各样的问题，最后也只是能做出一棵树来，还有很多功能没能实现，接下来会慢慢去完善吧。这次作业还是收获很多的，既给了我一个接触之前就有兴趣的web的机会，也学到了不少东西。
八、单元测试
因为时间来不及懒，就采用了白盒了测试，白盒测试
单张图
数据
导师：a
2018级硕士生：b、c、d
2017级博士生：e、f、g
2019级本科生：h、i、g
结果：
单独一棵树，其中某一叶节点点了技能
数据：
导师：a
2018级硕士生：b、c、d
2017级博士生：e、f、g
2019级本科生：h、i、g
a：ab、cd
结果:
数据输入后无法提交，努力解决中……
关联树
数据：
导师：a
2018级硕士生：b、c、d
2017级博士生：e、f、g
2019级本科生：h、i、j
导师：e
2020级本科生：k、l、m
结果：
九、队友评价
- 优点：很好学，这次作业我们两个都是零基础，他学了很多东西
- 确实：没有体现出结对编程的优势，两个人就是各自做各自的事