软件工程实践2019第五次作业--结对编程的实现

    本次作业博客

    https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736

    GitHub地址

     https://github.com/noapanda/031702601-031702603

 

1、具体分工

     罗爱玥：UI设计，后期美化，博客撰写

  https://www.cnblogs.com/Leslie529-031702601/

 

  钟玲：代码编写，测试    

  https://www.cnblogs.com/noapanda/

 

2、PSP表格

Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
计划	30	40
估计这个任务需要多少时间	1190	2660
开发	1520	2510
需求分析 (包括学习新技术)	450	900
生成设计文档	0	0
设计复审	60	180
代码规范 (为目前的开发制定合适的规范)	30	40
具体设计	30	40
具体编码	900	1250
代码复审	20	30
测试（自我测试，修改代码，提交修改）	30	70
报告	120	150
测试报告	40	40
计算工作量	20	20
事后总结, 并提出过程改进计划	60	90
合计	1670	2700

 

 3、解题思路描述与设计实现说明

（1）代码组织与内部实现设计

利用jQuery EasyUI 插件实现基础菜单树，构建输入文本信息的文本框，以及点击即生成树的按钮，对文本信息进行切割生成各节点。

（2）代码的关键与关键实现部分流程

forEach(function())：遍历每一行

indexOf()：查找字符信息出现的位置

substring()：提取指定下标之间的字符

split()：切割字符

createNode()：创建节点

push()：将字符信息推入节点

通过关键字"导师："，"级博士生："，"级硕士生："，"级本科生："和"、"对文本字符串进行切割

（3）关键代码（源代码中有详细注释）

•  代码为树的创建以及各节点内容的写入

 <script type="text/javascript">

    $(function(){
        
        //createTree();
        
    });
    
    function btnClick(){//按钮点击事件
        var getData = $("#dataId").val();//获取输入的文本数据
        getData = getData.split(" ").join("");//替换所有空格
        var root = {"text":"师门树",id:"1",children:[]}//创建根节点
        
        var arr = getData.split("\n");//获取每行数据
        
        var indexValue = 0;
        arr.forEach(function(data){//循环每一行数据
            if(data==""||data==null){
                indexValue++;
                return;
            }
            if(data.indexOf("导师：")>=0){//获取导师数据
                var index = data.indexOf("：");
                var pNodeData = data.substring(0,index);
                var pNode = createNode(pNodeData);//创建节点
                
                data = data.substring(index+1,data.length);//获取导师名字
                var subArr = data.split("、");
                subArr.forEach(function(subData){
                    var node = createNode(subData);
                    pNode.children.push(node);
                })
                 
                root.children.push(pNode);
            }
            
            if(data.indexOf("级博士生：")>=0||data.indexOf("级硕士生：")>=0||data.indexOf("级本科生：")>=0){//获取本科生数据
                var index = data.indexOf("：");
                var pNodeData = data.substring(0,index);//获取数据
                
                var index2 = pNodeData.indexOf("级");
                
                var a = pNodeData.substring(0,index2+1);//获取级数
                var b = data.substring(index2+1,pNodeData.length)//获取博士生or硕士生or本科生
                
                var aNode = createNode(a);
                var bNode = createNode(b);
                
                data = data.substring(index+1,data.length);//获取学生
                var subArr = data.split("、");
                subArr.forEach(function(subData){
                    var node = createNode(subData);
                    aNode.children.push(node);
                })
                
                bNode.children.push(aNode);
                
                if(root.children.length>0){
                    root.children[indexValue].children[0].children.push(bNode);
                }else{
                    root.children.push(pNode);
                }//添加子节点
                
                
            }
            
        })
        
        
        var tree = new Array();
        tree.push(root);
        createTree(tree);//创建树
    }
    
    function createNode(text){//创建节点数据
        return {text:text,children:[]}
    }
    
    function createTree(data){
        
        $('#tt').tree({
            lines:true,//是否显示树线  
            data:data
        });
    }
    
    </script>

•  以下代码为创建输入文本框

<style>
    textarea {
        -webkit-appearance: textarea;
        width:600px;
        height:300px;
        style=background-attachment: fixed; background-image: url("https://c-ssl.duitang.com/uploads/item/201907/10/20190710163248_4LmcH.thumb.700_0.jpeg");
        -webkit-rtl-ordering: logical;
        flex-direction: column;
        resize: auto;
        cursor: text;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        border-width: 2px;
        border-style: solid;
        border-color: initial;
        border-image: initial;
        padding: 12px;
    }
    </style><!-- 输入框格式 -->

• 以下代码为按钮“建立树”的创建

<div><button id=' begin' style="height: 50px;width: 100px; font-size: 20px; background: #73C5EE" onclick="btnClick()">建立树</button></div>

 

 4、成果展示

 （1）完整的前端页面（源代码中在文本输入框加入样例以方便查看）

• 实现家族树基本功能：文本输入框&按钮“建立树”&放置文本树的框架“创建树”，分别呈上中下结构排列

 

（2）文本输入框与按钮

 

 （3)在文本输入框输入样例后创建的树，初始树是完全展开的

 

 

（4）点击“导师”这一节点前的 “+/-” 按钮可对导师节点进行展开/收缩

 

（5）点击导师的姓名或者XX生或者XXXX级节点前的“+/-”可对各节点进行展开和/收缩

 

 注：学生姓名的节点是不可展开的

 

 5、在博客中给出目录说明和使用说明

 

 

6、单元测试

我们选用的Google浏览器F12快捷键通过console.log()进行测试

 

7、GitHub代码签入记录

 

8、遇到的问题

问题描述：js语言不熟悉，导致很多语法错误和逻辑错误；文本框和按钮格式别扭

解决方法：百度&知乎&B站&问同学

                  主要是查看各大官网以及学习网站（例如：W3school  jQuery官网等）

是否已解决：已解决

收获：学会了一些html+css+js语言的正确操作

9、评价你的队友

罗爱玥

优点：
队友很努力，很好学，这周一直在肝，我都替她困。

缺点：

希望她对自己好点，不要年少不知肝贵。

 

钟玲

优点：

有求必应，愿意学也很用心，这次页面的美观设计由她完成，审美hin好捏（而且很关心我的身体（不是））

缺点：

希望沟通交流更多一些。