2020软件工程第二次结对作业

目录

• 一、团队成员及相关链接
  • 1.1 团队成员博客链接
  • 1.2 Github项目地址
• 二、具体分工
• 三、PSP表格
• 四、解题思路描述与设计实现说明
  • 4.1 代码实现思路
  • 4.2 关键实现的数据流图
  • 4.3 重要代码片段及解释
• 五、附加特点设计与展示
  • 5.1 设计的创意独到之处及意义
  • 5.2 实现思路
  • 5.3 重要代码片段及解释
  • 5.4 实现成果展示
    • 示例1（作业博客中的示例）
    • 示例2（页面支持呈现多棵树并存）
• 六、目录说明和使用说明
  • 6.1 目录结构
  • 6.2 网页使用说明
• 七、单元测试
• 八、Github的代码签入记录截图
• 九、结对困难及解决方法
• 十、评价你的队友
  • 值得学习的地方
  • 需要改进的地方

这个作业属于哪个课程	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("\n\n");//调用split函数以“\n\n"为关键字进行分组，得到每棵树的信息
            for (var k = 0; k < text1.length; k++) { //text1.length用于得到分组的数量
                var arry = text1[k].split("\n");//针对每棵树的一组数据，以“\n"为关键字进行分组，得到每条导师和学生的信息
                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-width: 5px;//设置描边的大小为5px
.link {
    fill: none;
    stroke: rgb(154, 110, 32);//将连线的颜色设置为rgb(154, 110, 32)（棕色）
    stroke-width: 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.问题描述：不清楚题目中样例数据的输入格式，以至于没有找到切分文本信息的的方法
做过哪些尝试：百度，请教同学
是否解决：已解决
收获：掌握了切分文本信息的方法，解决了问题

十、评价你的队友

值得学习的地方

很理智，刘婷婷一直在鼓励划水摸鱼的我赶紧来学习软工，并且教给我很多难题的解决方法，让我学到了很多。

需要改进的地方

我们的时间观念都不会很强所以每次的结对作业都比较赶，哈哈哈。