軟件工程實踐2019第五次做業--結對編程的實現

    本次做業博客

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

    GitHub地址

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

 

一、具體分工

     羅愛玥：UI設計，後期美化，博客撰寫

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

 

  鍾玲：代碼編寫，測試    

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

 

二、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）關鍵代碼（源代碼中有詳細註釋）

•  代碼爲樹的建立以及各節點內容的寫入

 1  <script type="text/javascript">
 2 
 3  $(function(){  4         
 5         //createTree();
 6         
 7  });  8     
 9     function btnClick(){//按鈕點擊事件
10         var getData = $("#dataId").val();//獲取輸入的文本數據
11         getData = getData.split(" ").join("");//替換全部空格
12         var root = {"text":"師門樹",id:"1",children:[]}//建立根節點
13         
14         var arr = getData.split("\n");//獲取每行數據
15         
16         var indexValue = 0; 17         arr.forEach(function(data){//循環每一行數據
18             if(data==""||data==null){ 19                 indexValue++; 20                 return; 21  } 22             if(data.indexOf("導師：")>=0){//獲取導師數據
23                 var index = data.indexOf("："); 24                 var pNodeData = data.substring(0,index); 25                 var pNode = createNode(pNodeData);//建立節點
26                 
27                 data = data.substring(index+1,data.length);//獲取導師名字
28                 var subArr = data.split("、"); 29  subArr.forEach(function(subData){ 30                     var node = createNode(subData); 31  pNode.children.push(node); 32  }) 33                  
34  root.children.push(pNode); 35  } 36             
37             if(data.indexOf("級博士生：")>=0||data.indexOf("級碩士生：")>=0||data.indexOf("級本科生：")>=0){//獲取本科生數據
38                 var index = data.indexOf("："); 39                 var pNodeData = data.substring(0,index);//獲取數據
40                 
41                 var index2 = pNodeData.indexOf("級"); 42                 
43                 var a = pNodeData.substring(0,index2+1);//獲取級數
44                 var b = data.substring(index2+1,pNodeData.length)//獲取博士生or碩士生or本科生
45                 
46                 var aNode = createNode(a); 47                 var bNode = createNode(b); 48                 
49                 data = data.substring(index+1,data.length);//獲取學生
50                 var subArr = data.split("、"); 51  subArr.forEach(function(subData){ 52                     var node = createNode(subData); 53  aNode.children.push(node); 54  }) 55                 
56  bNode.children.push(aNode); 57                 
58                 if(root.children.length>0){ 59                     root.children[indexValue].children[0].children.push(bNode); 60                 }else{ 61  root.children.push(pNode); 62                 }//添加子節點
63                 
64                 
65  } 66             
67  }) 68         
69         
70         var tree = new Array(); 71  tree.push(root); 72         createTree(tree);//建立樹
73  } 74     
75     function createNode(text){//建立節點數據
76         return {text:text,children:[]} 77  } 78     
79  function createTree(data){ 80         
81         $('#tt').tree({ 82             lines:true,//是否顯示樹線 
83  data:data 84  }); 85  } 86     
87     </script>

•  如下代碼爲建立輸入文本框

 1 <style>
 2  textarea {  3         -webkit-appearance: textarea;  4  width:600px;  5  height:300px;  6         style=background-attachment: fixed; background-image: url("https://c-ssl.duitang.com/uploads/item/201907/10/20190710163248_4LmcH.thumb.700_0.jpeg");  7         -webkit-rtl-ordering: logical;  8         flex-direction: column;  9  resize: auto; 10  cursor: text; 11         white-space: pre-wrap; 12         overflow-wrap: break-word; 13         border-width: 2px; 14         border-style: solid; 15         border-color: initial; 16         border-image: initial; 17  padding: 12px; 18  } 19     </style><!-- 輸入框格式 -->

• 如下代碼爲按鈕「創建樹」的建立

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

 

 四、成果展現

 （1）完整的前端頁面（源代碼中在文本輸入框加入樣例以方便查看）

• 實現家族樹基本功能：文本輸入框&按鈕「創建樹」&放置文本樹的框架「建立樹」，分別呈上中下結構排列

 

（2）文本輸入框與按鈕

 

 （3)在文本輸入框輸入樣例後建立的樹，初始樹是徹底展開的

 

 

（4）點擊「導師」這一節點前的 「+/-」 按鈕可對導師節點進行展開/收縮

 

（5）點擊導師的姓名或者XX生或者XXXX級節點前的「+/-」可對各節點進行展開和/收縮

 

 注：學生姓名的節點是不可展開的

 

 五、在博客中給出目錄說明和使用說明

 

 

六、單元測試

咱們選用的Google瀏覽器F12快捷鍵經過console.log()進行測試

 

七、GitHub代碼簽入記錄

 

八、遇到的問題

問題描述：js語言不熟悉，致使不少語法錯誤和邏輯錯誤；文本框和按鈕格式彆扭

解決方法：百度&知乎&B站&問同窗

                  主要是查看各大官網以及學習網站（例如：W3school  jQuery官網等）

是否已解決：已解決

收穫：學會了一些html+css+js語言的正確操做

九、評價你的隊友

羅愛玥

優勢：
隊友很努力，很好學，這週一直在肝，我都替她困。

缺點：

但願她對本身好點，不要年少不知肝貴。

 

鍾玲

優勢：

有求必應，願意學也很用心，此次頁面的美觀設計由她完成，審美hin好捏（並且很關心個人身體（不是））

缺點：

但願溝通交流更多一些。