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

結對成員信息：

學號	姓名	博客地址	分工
031702539	李清宇	https://www.cnblogs.com/liang-an/	數據處理、博客撰寫
031702537	吳俊傑	https://www.cnblogs.com/J-J-1008/	前端設計、編程設計

[GitHub項目地址] https://github.com/wujunjie1008/031702537-031702539

PSP表格

PSP	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	20	20
Estimate	估計這個任務須要多少時間	10	10
Development	開發	1260	1360
Analysis	需求分析 (包括學習新技術)	480	540
Design Spec	生成設計文檔	30	10
Design Review	設計複審	30	20
Coding Standard	代碼規範 (爲目前的開發制定合適的規範)	30	10
Design	具體設計	30	90
Coding	具體編碼	540	600
Code Review	代碼複審	60	30
Test	測試（自我測試，修改代碼，提交修改）	60	60
Reporting	報告	60	120
Test Repor	測試報告	30	60
Size Measurement	計算工做量	30	60
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	120	90
合計		1470	1600

頁面展現

輸入窗口

家族樹

解題思路描述與設計實現說明

兩大功能模塊：

• 前端頁面設計（bootstrap框架）
• 家族樹的實現（Echarts框架）

生成樹算法設計

應用Echarts樹形控件，數據處理、分層級算法實現。
    控件引入：

數據處理、算法實現:
數據輸入格式處理（split()分割字符串、設計層級標識、push()進數組）、數據處理成層級關係的數據、畫樹、樹綁定事件（節點點擊縮放）

function draw(){
    var searchform = document.getElementById("searchForm");
    var form = searchform.Form.value;

    
    var count = 0;//樹個數     
    var s = form.split(/[\n][\n]/);
    //alert(s.length);
    /*for(var l=0; l<s.length; l++){
        alert(s[l]);
        }*/
    for(var i=0; i<s.length; i++){
        alert(s[i]);
        deal_form(s[i]);
        //2.處理數據
        
        if(document.getElementById('Form').value != "")
        {treeData = transData(data, 'value', 'sj', 'children');}
        //3.展現樹
        drawTree(treeData,id);
        document.getElementById('Form').value = "";
        id = id + 1;
        data = [];
    }

function transData(a, idStr, pidStr, childrenStr) {
    var r = [], hash = {}, id = idStr, pid = pidStr, children = childrenStr, i = 0, j = 0, len = a.length;
    for (; i < len; i++) {
        hash[a[i][id]] = a[i];
    }
    for (; j < len; j++) {
        var aVal = a[j], hashVP = hash[aVal[pid]];
        if (hashVP) {
            !hashVP[children] && (hashVP[children] = []);
            hashVP[children].push(aVal);
        } else {
            r.push(aVal);
        }
    }
    return r;
}

function drawTree(treeData,id) {
    if(id==1)
    {var  myChart = echarts.init(document.getElementById("container1"));//div元素節點的對象
    
    myChart.setOption({
        tooltip : {
            trigger : 'item',
            triggerOn : 'mousemove'
        },
        series : [ {
            type : 'tree',
            name : 'TREE_ECHARTS',
            data : treeData,
            top : '5%',
            left : '30%',
            bottom : '5%',
            right : '15%',
            symbolSize : 20,
            label : {
                normal : {
                    position : 'left',
                    verticalAlign : 'middle',
                    align : 'right'
                }
            },
            leaves : {
                label : {
                    position : 'right',
                    verticalAlign : 'middle',
                    align : 'left'
                }
            },
            expandAndCollapse : true ,
            initialTreeDepth : 2  //展現層級數,默認是2
        } ]
    });
    //4.樹綁定事件
     myChart.on('click', function(params) {
        var name = params.data.name;//點擊的節點的name
        var value = params.data.value;//點擊的節點的value
        //調用點擊事件
        clickNode(name,value);
    });
    
    }
    else if(id==2)
        {var  myChart = echarts.init(document.getElementById("container1"));//div元素節點的對象
        ...        //同id==1的狀況
        }
        else if(id==3)
        {var  myChart = echarts.init(document.getElementById("container3"));//div元素節點的對象
        ...        //同id==1的狀況
        }
        else if(id==4)
        {var  myChart = echarts.init(document.getElementById("container4"));//div元素節點的對象
        ...        //同id==1的狀況
        }
        else if(id==5)
        {var  myChart = echarts.init(document.getElementById("container5"));//div元素節點的對象
        ...        //同id==1的狀況
        }
}

前端界面設計

<div class="container" id="myCarousel">
        <div id="carousel-example-generic" class="carousel slide" data-interval="false">
            <ol class="carousel-indicators">    //輪播導航點
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">    //輪播內容
                <div class="item active">
                    <div id="container1" style="width:800px;height:600px;"></div>
                    <script type="text/javascript"src="js/echarts.min.js"></script>
                    <script type="text/javascript" src="js/treeEcharts.js"></script>
                </div>
                <div class="item">
                    <div id="container2" style="width:800px;height:600px;"></div>
                </div>
                <div class="item">
                    <div id="container3" style="width:800px;height:600px;"></div>
                </div>
                <div class="item">
                    <div id="container4" style="width:800px;height:600px;"></div>
                </div>
                <div class="item">
                    <div id="container5" style="width:800px;height:600px;"></div>
                </div>
            </div>
            <a href="#carousel-example-generic" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">     //輪播切換按鍵
            </span></a>
            <a href="#carousel-example-generic" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right">                                   </span></a>
        </div>

附加特色設計與展現

• 基於bootstrap框架的精美的界面設計
• web界面輪播效果——可在同一個頁面上生成不一樣的樹並輪播
  
• 數據格式校驗——規避因格式錯誤沒法生成家族樹的狀況
  
  實現思路：分割字符串時alert空串

目錄結構（html, css, javascrip, 圖片素材等，以及第三方框架）

README文檔

Github的代碼簽入記錄

mocha框架單元測試

在這次做業以前我對於單元測試仍是僅僅處在很模糊不清的狀態，在此次做業附件中看了廖雪峯老師的教程以後，我終於能夠利用框架對代碼進行單元測試了。

遇到的代碼模塊異常或結對困難及解決方法

主要出現的模塊問題就是在輸入數據獲取至js文件這一塊，查閱資料後用

標籤順利解決了
單頁面生成多樹的實現

問題描述

• 家族樹主要問題
  • 獲取輸入框數據
  • 數據輸入處理、格式轉換
  • 層級算法的實現
  • 同一個頁面展現多棵樹

解決方法就是一直查閱資料一直學一直肝。。。前三個問題共同努力順利解決了，可是我實現多組數據一次性輸入後用循環分批傳入只能一次只能畫出一顆樹且時間不容許我深究，還好優秀的吳俊傑的實現輪播效果又查出bug實現了多樹木生成，彌補了一個人實力不足。

未解決的問題

• 沒法生成關聯樹
• 在同一輪播圖內生成多樹

評價隊友：
李清宇：吳俊傑是真的幸苦好吧，承擔了大部分編碼工做，責任心強，不完成目標不罷休的那種。我要多向他學習編程技術，但願他注意身體，早睡早起。
吳俊傑：李清宇交代的事情均可以及時完成，特別服從安排，但願之後能夠提升一點效率。最後此人，單身，男，可撩，無不良嗜好。

心得與收穫

李清宇：由於一開始看見的要求就快馬加鞭地跑去學習前端知識，當時啥也不懂呀，沒考慮過期間就開始啃前端知識。一開始還挺順利，可是當我大概瞭解了html和css的各類概念語法規則後我發現不對呀，照着進度到截止日期我能寫個球出來呀！因此，只能吃快餐了。。。快速過一遍JavaScript的基礎語法轉去研究生成家族樹了。過程雖然幸苦，算法實現啥的也有點倉促可是收穫仍是滿滿呀。對前端的結構和設計有了大概的瞭解，JavaScript控件的使用等等。。。最重要的仍是自學能力的呀，兩眼一黑的狀況簡直使人絕望。。。
吳俊傑：從零開始的web端生活實在是太痛苦了，大體瞭解了html和css的應用後立馬又轉向了對bootstrap框架的學習。不過不得不說，bootstrap的風格我真的是愛了，看着特別舒服，並且在前端設計完以後，我也參與了後端生成樹的設計，這讓我對於Web設計的流程以及各個部分都有了大體的瞭解，網上看了那麼多，不如本身親手實踐來的感觸更深，這大概就是張棟老師所說的learning by doing吧。儘管一路摸爬滾打過來，可是在最後能看到一個成型的網站，我仍是很是開心的。但願之後能夠再加快點速度，這樣之後就有更多時間來測試和拓展功能。