軟件工程實踐2019第五次做業

軟件工程實踐2019第五次做業

結隊成員學號:

<031702327>：MrHe&Husky
<031702326>: x辣椒
咱們的GitHub地址:【familytree】

PSP表格

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

寫在前面

從零開始的前端學習並應用，10天內學html5+css3+javascript並根據需求作出一個可以生成動態數的網頁...
這些天，我已經忘記我作過什麼了，只記得看着屏幕上右下角的時鐘走到3:30左右我就必須去睡覺，由於幾乎天天都有早課等着我。而在3:30以前，都是盯着屏幕上文檔、入門教程、各類各樣的有作過相似項目人寫的博客。
慢慢地...時間過去，但是學到的知識依舊不足以支撐我從零寫出這一個網頁，因而最後決定套別人現有的的框架，再加上本身這幾天緊急儲備的破碎的知識來完成這一個項目，說實在的，到我寫這篇博客時我都不知道我作出來的是個什麼東西，裏面有着多少bug，有着多少我不理解的語句.....可是仍是完成了，最後，一個看起來算完成的做品————看一下吧。

結果展現

最開始學習語言作的測試程序所產生的奇奇怪怪的東西就展現了吧，直接看運用框架後的；

大體測試

最後結果

加點細節

.......沒時間了，細節就不作了，先發布吧(實際上是css沒學到能用的程度(>_<))

實現過程

使用G6框架生成有動畫的樹形圖，生成過程都經過現有程序，有了這個框架，咱們實現就只需專一於這幾個點:

• 如何從表單讀入數據
• 理解現有框架須要怎樣的數據才能生成樹圖(API)
• 如何把輸入數據變成指定的生成樹的數據格式
• 如何去連接框架和咱們的代碼

重點代碼代碼

如何從表單讀入數據：

< html部分: >

<div id="input_text">
          <textarea id="intext" rows="20" cols="50" wrap="hard"></textarea>
          <button id="go_and_change">轉換</button>
     </div>

< JavaScript部分: >

go_and_change鏈接到html中id爲go_and_change的按鈕，發生「單擊"(onclick)事件時,text讀入並賦值爲id爲intext的多行文本框中字符串。

const go_and_change = document.getElementById('go_and_change');
          go_and_change.onclick = () => {
               var text = document.getElementById('intext').value;
               }

框架所需的數據結構是？

大概就是下面這種結構，點和一個子點的數組相互嵌套

function point(the_id) {   
                    this.id = the_id;
                    this.children = [];
               }    //點對象的構造函數

最後大概就嵌套成下面這一種結構

{
    "id": "張三",
    "children": [
        { "id": "2016級博士生",
          "children": [
                { "id": "天一", "children": [] },
                { "id": "王二", "children": [] },
                { "id": "吳五", "children": [] }
            ]
        }
}

如何把輸入數據變成指定的生成樹的數據格式？

具體看註釋吧..其中頻繁使用到了JavaScript的正則表達式來劃分字符串，正則表達式詳見:https://www.liaoxuefeng.com/wiki/1022910821149312/1023021582119488
除此以外還有不少的學習時看到的資料，我稍微挑選了一下，把用處比較大的列了出來:
< JavaScript正則表達式 >
< JavaScript split() 方法 >
< JS 生成樹狀結構 >
< 常見數據結構和Javascript實現總結 >
< Map數據結構使用 >

下面是代碼：

var text = document.getElementById('intext').value;
    function point(the_id) {   //點對象的構造函數
        this.id = the_id;
        this.children = [];
    }
    var i = 0;
    var heighpoint = 0;//新畫布的高度位置
    var j = 0;//做爲在後面遍歷數組用變量;
    var k = 0;//做爲在輸出遍歷數組用變量;
    var regexp_teacher = /^導師：(.+)$/;//用於查找老師的正則表達式
    var regexp_grade = /^(.+)：(.+)$/;//用於查找年級和學位的正則表達式
    var studentstr = "";//學生的字符串(後用)
    var data = [];//存儲數據，以後轉成JSON傳送至繪圖api
    var blocks = text.split("\n\n");//第一次拆分，拆分出大塊
    for (j = 0; j < blocks.length; j++) {
        var lines = blocks[j].split('\n');//按行劃分
        data.push(new point(regexp_teacher.exec(lines[0])[1]));//建立並返回一個老師節點壓入data內(第0行)
        for (i = 1; i < lines.length; i++) {
            if (lines[i] === "") {
                break;
            }
            var p = new point(regexp_grade.exec(lines[i])[1]);
            data[j].children.push(p);//建立並返回一個學歷節點壓入老師節點內
            studentstr = regexp_grade.exec(lines[i])[2];//劃分出學生字符串
            var students = studentstr.split('、');
            for (var student of students) {
                var stu = new point(student);
                data[j].children[i - 1].children.push(stu);//將學生節點壓入學歷節點內
        }
    }

如何去連接框架和咱們的代碼

把咱們上面生成的規格化傳入它的函數中就好了，自動化生成(膜拜開發團隊)，AntvG6本家連接：https://antv.alipay.com/zh-cn/g6/3.x/demo/tree/tree-compact-box.html

for (k = 0; k < blocks.length; k++) {
    t(data[k]);//給它的函數命了個名爲t，data爲咱們儲存規格化後數據的數組，具體代碼見上面連接
}

GitHub上源代碼使用說明

只是一個html文件(familytree），使用瀏覽器打開便可使用，記得聯網。
問爲何不把框架下載下來再用相對路徑引用？.................我也想啊,可好像不容許。

GitHub上標籤

對隊友印象

一塊兒經過了一段艱辛又漫長的學習過程，咱們兩個最開始都十分迷茫不知從何開始，好在隊友擅長交流並尋求到了dalao指點了該向哪方面專攻，也剩下了咱們不少無用功，學習和實際編碼過程當中相互交流，幫上了很大的忙。Great.