學術家族樹
博客地址：
結對分工
031702212：主要編碼，美工(設計/css)
031702208：部分編碼，單元測試，博客編寫
PSP表格
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | 30 | 30 |
| Estimate | 估計這個任務需要多少時間 | 30 | 30 |
| Development | 開發 | 1130 | 1870 |
| Analysis | 需求分析 (包括學習新技術) | 480 | 600 |
| Design Spec | 生成設計文檔 | 120 | 120 |
| Design Review | 設計復審 | 30 | 30 |
| Coding Standard | 代碼規范 (為目前的開發制定合適的規范) | 20 | 20 |
| Design | 具體設計 | 180 | 180 |
| Coding | 具體編碼 | 300 | 800 |
| Code Review | 代碼復審 | 60 | 60 |
| Test | 測試（自我測試，修改代碼，提交修改） | 120 | 60 |
| Reporting | 報告 | 250 | 440 |
| Test Repor | 測試報告 | 60 | 180 |
| Size Measurement | 計算工作量 | 10 | 20 |
| Postmortem & Process Improvement Plan | 事后總結, 並提出過程改進計划 | 180 | 240 |
| 合計 | 1410 | 2340 |
解題思路描述與設計實現說明
- 解題思路：
- 1.獲取並處理輸入的數據
→實現：使用data=$("#stxt").val();獲取數據,再用split分割每行存入Arr數組,要使用的時候再對Arr數組內數據處理 - 2.用獲取的數據生成一棵樹
→實現：初始化樹→設置插入樹的中介節點→設置導師根節點→選中父節點→插入二級節點→選中父節點→插入三級節點 - 3.拓展生成多棵樹
→實現：利用"導師"關鍵字確認要生成的樹數,使用for函數實現生成樹循環 - 4.添加功能及美化頁面
- 1.獲取並處理輸入的數據
- 核心代碼實現流程圖
- 重要的/有價值的代碼片段
按下“creat the tree”按鈕所觸發的函數：
$("#butt").click(function() {
$(".invisable").hide();
toLine();//提取每一行進Arr
teacherNum();//樹的個數
if(n>4)
alert("您輸入的樹超過顯示上限,僅顯示前四棵樹");
moveplace();//根據樹的個數排版
for(var treeCirle=0;treeCirle<treeNum.length-1;treeCirle++){
zNodes=[{menuName:"導師" ,open:true}];//開始一棵新樹時初始化zNodes
zNodes[0].menuName=(Arr[treeNum[treeCirle]]);//Arr2[0]
zTreeObj=$.fn.zTree.init($("#regionZTree"+treeCirle),setting,zNodes);//初始化zTreeObj
secondLayer(treeNum[treeCirle],treeNum[treeCirle+1]);//xx級xx生
thirdLayer(treeNum[treeCirle],treeNum[treeCirle+1]);//xxx、xxx、xxx
zTreeObj.cancelSelectedNode();
zTreeObj.cancelEditName("tObj"+treeCirle);
}
$("#texts").val("");//處理完數據后清除文本框
})
我們認為有價值的代碼片段是secondLayer()和thirdLayer()兩個函數，這兩個函數的關鍵就在於secondLayer()函數實現存儲所有二級節點的存儲以便三級節點的插入.代碼如下,代碼解釋可見注釋.
secondLayer()函數實現調用后實現二級節點(即xx級xx生)的插入
function secondLayer(first,last){
//first和last為要處理的對應這棵樹內容的Arr數組下標
for(var ii=first+1;ii<last;ii++){
getSname(Arr[ii]);
/*分割xx級xx生和學生名字的函數，其中令before=xx級xx生，將學生名字用split("、")分割存放入Arr2數組（Arr2數組只存放一行數據的名字，每次刷新）*/
zNodes=zTreeObj.getNodes();
zTreeObj.selectNode(zNodes[0]);
var parentZNode=zTreeObj.getSelectedNodes()；
//選定二級節點要插入的父節點即導師節點
zTreeObj.addNodes(parentZNode[0], [{menuName:before}], true);
zTreeObj.expandAll(true); //展開節點
}
zzNodes=zTreeObj.getNodes()[0].children;//用zzNodes數組存放所有二級節點用於thirdLayer()中三級節點插入二級節點
}
thirdLayer()函數實現調用后實現三級節點（即人名）的插入
function thirdLayer(first,last){
var iii=0;
for(var ii=first+1;ii<last;ii++){//二級數
getSname(Arr[ii]);//獲取一行數據中的人名存入Arr2
zTreeObj.selectNode(zzNodes[iii]);
var parentZNode = zTreeObj.getSelectedNodes();
//選定三級節點要插入的父節點
for(var jj=0;jj<Arr2.length;jj++)
zTreeObj.addNodes(parentZNode[0], [{menuName:Arr2[jj]}], true);
zTreeObj.expandAll(true);
iii++;
}
}
附加特點設計與展示
- 設計的創意及意義
我們設置有一個學生及導師查找框,當在查找框輸入學生姓名時,該名學生的名字會在其所在的家族樹所在位置中橘色標亮,並在查找框下顯示導師名字,使用者可以輕易的找到學生所在位置.我們認為這對於數據量大的時候查找家族樹成員很有幫助. - 實現思路
遍歷n棵樹→通過getNodesByParam()函數按節點名稱查找匹配節點→通過selectNode()、getSelectedNodes()、getNodes()多次轉換位置最后找到根節點→輸出根節點名即導師名 - 重要的/有價值的代碼片段
輸入學生名字查詢導師
function find(){
var flag=0;
var f=false;
for(var a=0;a<n;a++){
searchObj=$.fn.zTree.getZTreeObj("regionZTree"+a);
searchObj.cancelSelectedNode();//取消上一次查找所選的節點
}
data=$("#stxt").val();
for(var a=0;a<n;a++){//遍歷n棵樹
searchObj=$.fn.zTree.getZTreeObj("regionZTree"+a);
searnodes=searchObj.getNodesByParam("menuName",data,null);//根據名字查找到的節點searnodes[0]
searchObj.selectNode(searnodes[0]);//名字符合的節點設為選中狀態
ssnodes=searchObj.getSelectedNodes();//被選中的節點ssnodes[0]
if(ssnodes.length>0){//有選中的節點
flag++;f=true;
if(flag==1){//只輸出一次導師
searchObj.selectNode(ssnodes[0]);
ssnodes=searchObj.getNodes();//ssnodes更新為整棵樹的節點
$("#result").text(ssnodes[0].menuName);//ssnodes[0]此時為根節點
}
}
if(!f)
$("#result").text("NONE");//沒有選中的節點
}
}
- 界面展示
打開html文件顯示初始頁面：
重新輸入數據前刷新頁面
輸入學生名字查詢導師
目錄說明和使用說明
目錄是如何組織的
如何運行我的網頁
- 下載（Clone or download→Download ZIP）至您的電腦並解壓成文件夾，請確保完整下載了所有文件
- 在解壓出的文件夾中找到Tree.html 右鍵→打開方式→Google Chrome
- 成功打開html文件后可看到頁面上的具體操作提示，請認真閱讀
- 某些可能影響頁面顯示效果的因素：
- chrome瀏覽器縮放比例：100%
- 屏幕比例
- 不保證您已安裝了的英文字體：Matura MT Script Capitals
單元測試
-
選用的測試工具
mocha -
如何學習單元測試
我根據mocha學習寫了一個mocha簡易教程，可以點擊查看 -
項目部分單元測試代碼，並說明測試的函數
mocha進行單元測試我們是懂了，但是由於我們的建樹函數比較奇特，各個函數、變量相互關聯，在單元測試的過程中難以對單一個函數進行測試，在經過多次嘗試仍然沒有成功
-
構造測試數據的思路
構造測試數據的思路是測試正常數據及一切有可能的異常輸入，之前的測試打算是
1.輸入一棵樹的數據；
2.輸入兩顆樹的數據；
3.只輸入導師，沒有學生。如：輸入“導師：張三”；
4.只輸入學生不輸入導師
5.輸入兩棵樹，其中一個學生是屬於兩顆樹的；
6.輸入關聯樹數據；
7.輸入重復二級節點，如“導師：張三
2015級博士生：天一、王二、吳五
2015級博士生：李四、王五、許六
”
Github代碼簽入記錄
遇到的困難及解決方法
- 問題1:對需要用到的各種語言及工具的不熟悉
解決的途徑：看菜鳥教程。菜鳥教程上對js、jQuery、html各種語言的知識模塊分類的很清楚，包括每個例子都有一個試一試的簡單代碼可以讓我們直觀的了解各個知識點，我們在開始編碼之前看了兩三天的菜鳥教程來惡補需要的知識。至於zTree的學習我們則是參考zTree的API文檔 - 問題2：如何動態的獲取文本框中的內容生成樹，而不是依靠已有的數據
做過的嘗試：我們一開始選擇設置一個根節點，輸入數據后在這個節點上修改添加。我們通過百度及zTree提供的Dome代碼看各種生成樹的例子，但是我們找到的例子全部都是根據事先初始化好的節點建樹，所以選擇這種方法。
是否解決：在解決生成多棵樹的時候由於需要多次初始化樹，發現原來初始化樹就是憑空造樹（而不是在已有節點添加），就意外的解決了這個問題。 - 問題3：如何生成多顆樹
解決的途徑：聯想到了之前學習java的時候看到有將字符串+數字表示一個變量。就選擇嘗試zTreeObj=$.fn.zTree.init($("#regionZTree"+treeCirle),setting,zNodes);其中"#regionZTree"+treeCirle在一次次建成一棵樹循環中實現表示並初始化regionZtree0、regionZtree1、regionZtree2... - 問題4：如何實現節點查詢
這一點的實現及思路體現在我們的附加特點設計中 - 問題5：如何實現不用刷新網頁的情況下多次生成樹
做過的嘗試：在生成樹函數的開頭用destroy()銷毀當前頁面全部的 zTree、手動通過removeNode()移除所有節點，雖然界面上已生成的樹會消失，但再次輸入數據生成還是會有問題
解決的途徑：目前還沒找到，所以還是要手動刷新...
有何收獲：最大的收獲應該就是不放棄的去嘗試一切可能，和信息的獲取。由於我們對要用到的知識了解很少，我們的進程推進的很慢，以上講到的遇到的問題可能事后回想起來就是一個小問題，但是當時可能是花了一個下午去解決的。但是我們抱着能做一點是一點的心態，沒有放棄過嘗試，最后也才能夠解決這么多問題。
人生感悟：
learning by teaching
learning by doing
learning by killing √
評價你的隊友
-
2212：
可以吹的地方：
小姐，你像仙女一樣- 漫長而痛苦的十天嘴上說不行但身體一直沒有停下來→堅韌不拔
- idea挺多德也挺好德，會及時提意見→思維活躍
- 寫
大作文博客超強→文思敏捷 - 作為十天來載我奔波於世界各地自習處的司機→技能豐富
- 其實做了很多事情但老說自己屁事沒干→為人謙虛
- 單元測試辛辛苦苦勤勤懇懇努努力力
需要改進的地方：
仙女需要什么改進- 坐沒靠背的椅子久了就說腰酸→身體素質需要加強
- 電動車不夠持久（？
- 沒有成為讓我可以躺過的大佬←我做夢
-
2208
值得學習的地方- 學習新知識很快，一起開始看那些要學到的語言的時候她能比我更快找到切入口
- 耐心善良(;´༎ຶД༎ຶ`)，在我看了2、3天菜鳥教程還找不到切入點毫無進展的時候也有沒被責怪
需要改進的地方
太重了,把我車都坐沒電了- 跟我太默契了，兩個人都沒有交流沖突，以后要是跟別人結對會讓我很痛苦
