软件工程实践2019第五次做业

part1-结对信息

项目	地址
做业内容	https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736
GitHub项目	https://github.com/huang-sy/031702602-031702609
结对成员1	https://www.cnblogs.com/huang-sy/
结对成员2	https://www.cnblogs.com/clown123/

part2-具体分工

黄淑云：代码编写，测试，Github相关
阿说阿加：代码编写，ui设计，博客撰写

part3-PSP表格

PSP2.1	Personal Software Process Stages	预估耗时(h)	实际耗时(h)
Planning	计划	0.5	0.6
Estimate	估计这个任务须要多少时间	0.5	0.5
Development	开发	5	8
Analysis	需求分析 (包括学习新技术)	15	20
Design Spec	生成设计文档	0.5	0.8
Design Review	设计复审	0.8	1
Coding Standard	代码规范 (为目前的开发制定合适的规范)	1	1.5
Design	具体设计	1	1.5
Code	具体编码	17	20
Code Review	代码复审	1	2
Test	测试（自我测试，修改代码，提交修改）	1	1.5
Reporting	报告	0.5	1
Test Repor	测试报告	0.5	0.8
Size Measurement	计算工做量	0.5	0.5
Postmortem & ProcessImprovement Plan	过后总结, 并提出过程改进计划	0.5	0.5
合计		45.3	59.1

part4-解题思路描述与设计实现说明

• 说明算法的关键与关键实现部分流程图
  一、算法的关键：判断输入文本不为空；循环添加树形数据，遇到空行时，设置空行为true，方便下一行添加一个大节点；当上一行为空行时，添加一个大节点（而且为大节点设置一个标志好比0），同理也须要对空行设置标志好比false；最后生成树的函数是关键。
  二、简单流程图：
  

• 解题思路
  解题思路说难不难，实现方式却是难倒门外汉了。简单描述就是先作一棵树，以导师为根节点，历届学生（包括博士生，硕士生等）为子节点。实现方式是在已有脚本和框架的基础上添加关键代码，完善脚本的具体功能。具体每一步的实现方式代码有所注释。

• 有价值的代码片断及其注释部分以下：

function makeTree()
{
    var txt=document.getElementById("txt1").value
    if(txt=="")
    {
        alert("输入文本不能为空!");
    }
    else
    {
        var array=txt.split("\n")//分割行数组
        var treeData=[];//树形数据
        var nullLine=false;//是否为空行
        var num=0;//一行元素的惟一id
        var pid1=0;//子节点数据
        for(var i=0; i<array.length; i++)//循环添加树形数据
        {
            if(i==0)
            {
                var obj={};//第一行添加一个大节点，如导师节点
                num++;//惟一节点标记加1
                obj.id=num;//设置节点id
                obj.title=array[i].split("：")[0]+"_"+array[i].split("：")[1]//设置节点标
                obj.pid=0;//设置为0时候，表明是大节
                pid1=num;//记录子节点的pid
                treeData.push(obj);
            }
            else
            {
                if(array[i].length<1)
                {
                    nullLine=true;//遇到空行时，设置空行为true，方便下一行添加一个大节点
                }
                else
                {   
                    if(nullLine)
                    {
                        var obj={};//当上一行为空行时，添加一个大节点
                        num++;//惟一节点标记加1
                        obj.id=num;//设置节点id            
                        obj.title=array[i].split("：")[0]+"_"+array[i].split("：")[1] //设置节点标题
                        obj.pid=0;//设置为0时候，表明是大节点
                        pid1=num//记录子节点的pid
                        treeData.push(obj)//添加大节点   
                    }
                    else
                    {
                        var obj={};
                        num++;//惟一节点标记加1
                        obj.id=num;//设置节点id
                        obj.title=array[i].split("：")[0]//设置节点标
                        obj.pid=pid1;//设置子节点的pid为父节点的pid
                        treeData.push(obj)//添加子节点
                        var arr1=array[i].split("：")[1].split("、");//添加子节的子节点
                        var pid2=num; //记录父节点的pid
                        for(var j=0;j<arr1.length;j++)//循环添加子节点
                        {       
                            var obj={};
                            num++;
                            obj.id=num;
                            obj.title=arr1[j]
                            obj.pid=pid2;
                            treeData.push(obj)
                        }
                    }               
                    nullLine=false;//空行设置为false;
                }
            }   
        }
        document.getElementsByClassName("f-tree").item(0).innerHTML="";//设置容器内容为空
        config.tree({type:0,wrapper:'.f-tree',data:treeData});//生成树节点
    }
    //console.log(array);
    //console.log(arr1);
}

• 具体实现效果图
  输入为一棵树：
  
  输入为多棵树：
  

part5-附加特色设计与展现

一、考虑输入为空的状况，可跳出提示框进行提示，而且没法生成任何树。
代码片断以下：

var txt=document.getElementById("txt1").value;
    if(txt=="")//提示输入不能为空
    {
        alert("输入文本不能为空!");
    }

结果展现以下：

二、输入文本框里有提示文字，输出文字时消失,和文本框的其余样式方面的设置。
代码以下：

<textarea style="height:300px; width:300px;background-image:url(images/3.jpg);border-color:#191970;" id="txt1" placeholder="请在这里输入文字"></textarea>

结果展现以下：

part6-目录说明和使用说明

• 目录组织
  

• 目录说明和使用说明
  

• 可能出现的状况：
  
  点击“容许阻止的内容“。其余问题待发现。

part7-单元测试

• 选用的测试工具
  用的是Google浏览器F12快捷键，经过console.log()进行测试：
  
• 如何学习单元测试的
  构建之法书本内容+网上教程+同窗交流

part8-Github的代码签入记录

part9-遇到的代码模块异常或结对困难及解决方法

• 问题描述
  此次的代码着实难办，要学习使用新的语言和新的工具，工具的使用和语言的学习均可以经过视频教程实现，花时间就行。可是代码的实现问题比较大了。本次做业对于咱们来讲最大的困难应该是将输入文本框的内容进行处理后输出到节点上。刚开始找的网上的树形图模板只有固定的文本框，输入和输出都是固定的，一开始咱们的思想比较简单就是像换参数同样把输入换成可变的就可。
• 作过哪些尝试
  尝试过用简单的字符判断方式，好比写一个函数，能够将“导师：”到“\n”中间的文字输出到根节点，”2016级博士生：“到”\n"的内容里再选子节点。
• 是否解决
  已解决
• 有何收获
  有时候思路好理解，代码实现会磕磕碰碰的，须要不断学习不断测试不断改进，更有耐心。

part10-评价你的队友

阿说阿加：

• 值得学习的地方： 咬定青山不放松，钻研精神杠杠的，要搁小时候绝对是立志作科学家的人儿。对于新知识有很大的学习欲望，值得学习！
• 须要改进的地方：学习效率须要再提升一丢丢，固然互相交流，合做的也愈来愈有默契，之后也要一块儿加油！

黄淑云：

• 值得学习的地方：遇事不慌不乱，全局意识强，交流和谐。
• 须要改进的地方:小小的一点地方可能须要再一丢丢的严谨（附：多吃点饭吧，坐旁边“压力大”）