软件工程实践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.