| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020 |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| 这个作业的目标 | 学习用前端语言HTML+CSS+Javascript制作web端 |
| 学号 | 031802412、031802421 |
一、团队成员及相关链接
1.1 团队成员博客链接
| 学号 | 姓名 | 博客园链接 |
|---|---|---|
| 031802412 | 连书缘 | https://www.cnblogs.com/FBABFBA/ |
| 031802421 | 刘婷婷 | https://www.cnblogs.com/TTLTT/ |
1.2 Github项目地址
https://github.com/FBABFBA/031802412-031802421
二、具体分工
| 学号 | 姓名 | 分工 |
|---|---|---|
| 031802412 | 连书缘 | 撰写博客、主编写代码 |
| 031802421 | 刘婷婷 | 素材收集、主UI设计 |
部分代码、部分UI界面设计及部分博客内容均由二人讨论共同完成。
三、PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | ||
| Estimate | 估计这个任务需要多少时间 | 20 | 10 |
| Development | 开发 | ||
| Analysis | 需求分析 (包括学习新技术) | 500 | 530 |
| Design Spec | 生成设计文档 | 30 | 20 |
| Design Review | 设计复审 | 20 | 10 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 20 | 15 |
| Design | 具体设计 | 30 | 30 |
| Coding | 具体编码 | 600 | 560 |
| Code Review | 代码复审 | 30 | 30 |
| Test | 测试（自我测试，修改代码，提交修改） | 60 | 50 |
| Reporting | 报告 | ||
| Test Report | 测试报告 | 30 | 60 |
| Size Measurement | 计算工作量 | 10 | 10 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 60 | 90 |
| 合计 | 1410 | 1415 |
四、解题思路描述与设计实现说明
4.1 代码实现思路
通过分析题目的需求和痛点，得出我们要完成的web端界面需要具有一个文本框（信息输入界面）及生成并展示家族树的界面。实现的功能为当用户输入相应格式的文本后，点击生成家族树按钮便能生成相对应的家族树。该web端的数据流图如下：
4.2 关键实现的数据流图
4.3 重要代码片段及解释
家族树实现信息分组关键代码：
function getdata() {
var text = $("#text").val(); //获取id为text的textarea的全部内容
var text1 = text.split("
");//调用split函数以“
"为关键字进行分组，得到每棵树的信息
for (var k = 0; k < text1.length; k++) { //text1.length用于得到分组的数量
var arry = text1[k].split("
");//针对每棵树的一组数据，以“
"为关键字进行分组，得到每条导师和学生的信息
var teacher = {
name: '',
children: []
}
for (var ii = 0; ii < arry.length; ii++) {
var newarr = arry[ii].split("：");//针对每条导师和学生的信息，以“：”为关键字进行分组，得到身份信息（人名）和身份类型（职业）
var type = [];
var type1 = [];
var a1 = newarr[0]; //将身份类型保存在a1变量
if (ii != 0) {
type1.name = a1;
}
var a2 = newarr[1];//将身份信息保存在a2变量
var a3 = a2.split("、");//针对每组身份信息，以“、”为关键字进行切分，得到单人信息
for (var j = 0; j < a3.length; j++) { //a3.length用于得到每条身份信息里名字的数量
var student = {};
if (ii == 0) {
teacher.name = a3[j];
}
if (ii != 0) {
student.name = a3[j];
type.push(student);
}
}
if (ii != 0) {
type1.children = type;
teacher.children.push(type1);
}
}
treeData[k] = [];
treeData[k] = teacher;
maketree(k);
}
}
五、附加特点设计与展示
5.1 设计的创意独到之处及意义
1.实现了多棵树并存，可以在展示界面同时展示以导师为结点的多棵树
2.设计了重置功能，方面大家随时进行数据的修改，但每次修改都需要重置界面，不能在原有界面上进行修改，否则会出现重复的结点树。
3.将生成树的连线设置为棕色，节点设置为绿色，就像真实的树一般，增加了趣味性。
5.2 实现思路
通过上网查找相关实现方式进行学习并完成实现。
5.3 重要代码片段及解释
1、改变节点颜色关键代码：
//学术家族树.html
nodeEnter.append("rect")
.attr("x", -23)
.attr("y", -10)
.attr("width", 70)
.attr("height", 20)
.attr("rx", 10)
.style("fill", "#97bc5d");//表示节点颜色为#97bc5d（绿色）
//type.css
.node rect {
fill: #97bc5d;
stroke: #97bc5d;//将节点的描边颜色设置为相同的绿色
stroke- 5px;//设置描边的大小为5px
.link {
fill: none;
stroke: rgb(154, 110, 32);//将连线的颜色设置为rgb(154, 110, 32)（棕色）
stroke- 3px;//设置连线的粗细为3px
}
2、设置重置功能关键代码：
<input type=button value=重置 onclick="location.reload()"
class="button_left">//js中，这类多附件上传后在输入框左边有个删除按钮
5.4 实现成果展示
示例1（作业博客中的示例）
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
刘六：JAVA、数学建模
李二：字节跳动、京东云
页面展示如下：
示例2（页面支持呈现多棵树并存）
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
导师：方流
2013级博士生：梁九、蓝六、景七
2014级本科生：吴一、柳六、周二
2012级硕士生：李一、王八、许四
页面展示如下：
六、目录说明和使用说明
6.1 目录结构
6.2 网页使用说明
1.将1.1-master 文件件打包下载，解压后使用，需保证所有文件在同一个文件夹下。
2.用Chrome打开学术家族树.html文件，按照作业要求输入
3.在出现的文本框输入数据，点击生成家族树按钮，将在下方生成一棵以导师为根节点的树
4.若希望修改数据则点击重置按钮，然后重新输入修改后的数据，再点击生成家族树按钮。
七、单元测试
测试工具：MOCHA
八、Github的代码签入记录截图
九、结对困难及解决方法
1.问题描述：对HTML、css、JavaScript等基础知识不够了解，导致页面设计不合理，不够美观
做过哪些尝试：百度，和队友相互交流学习
是否解决：已解决部分
收获：学习了一些新的知识，对css有了更进一步的认识
2.问题描述：不清楚题目中样例数据的输入格式，以至于没有找到切分文本信息的的方法
做过哪些尝试：百度，请教同学
是否解决：已解决
收获：掌握了切分文本信息的方法，解决了问题
十、评价你的队友
值得学习的地方
连书缘，很淡定心态很好，时间不够也没有着急而是步一步的修改完善，学习能力很强！！！
需要改进的地方
我们的时间观念都不是很强，加上对各方面的知识都没有很了解，所以每次的结对作业时间都会很紧张。