軟件工程實踐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-評價你的隊友

阿說阿加：

• 值得學習的地方： 咬定青山不放鬆，鑽研精神槓槓的，要擱小時候絕對是立志作科學家的人兒。對於新知識有很大的學習慾望，值得學習！
• 須要改進的地方：學習效率須要再提升一丟丟，固然互相交流，合做的也愈來愈有默契，之後也要一塊兒加油！

黃淑雲：

• 值得學習的地方：遇事不慌不亂，全局意識強，交流和諧。
• 須要改進的地方:小小的一點地方可能須要再一丟丟的嚴謹（附：多吃點飯吧，坐旁邊「壓力大」）