第4次作业-结对编程之实验室程序实现

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 学会用html5实现简单的界面设计以及完成一些功能
学号 031802403,041801520

一、小组成员

学号 姓名
031802403 陈晓杰
041801520 林志炜
姓名 博客地址
陈晓杰 博客:https://www.cnblogs.com/ultra-jet/
林志炜 博客:https://www.cnblogs.com/e557/
GitHub地址 https://github.com/Ultra-Jet/041801520-031802403

结对分工

031802403陈晓杰:前端页面设计以及实现,找到合适的框架并且引用

041801520林志炜:算法设计以及实现,单元测试,代码debug,优化

共同讨论完成代码的整合,互相指出各自实现的不足,列出PSP表格

二、psp表格

PSP Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟)
Planning 计划 60 30
Estimate 估计这个任务需要多少时间 480 420
Development 开发 300 360
Analysis 需求分析 (包括学习新技术) 720 720
Design Spec 生成设计文档 30 30
Design Review 设计复审 30 30
Coding Standard 代码规范 (为目前的开发制定合适的规范) 20 20
Design 具体设计 60 50
Coding 具体编码 120 120
Code Review 代码复审 20 60
Test 测试(自我测试,修改代码,提交修改) 60 60
Reporting 报告 30 30
Test Report 测试报告 20 15
Size Measurement 计算工作量 15 15
Postmortem & Process Improvement Plan 事后总结, 并提出过程改进计划 30 25
合计 1995 1985

三、解题思路以及心路历程

(1)读完题目,分析要点如下:

  1. 文本数据的提取

  2. 文本数去提取完如何保存和传送

  3. 树状动态结构的生成

  4. 树状结构缩放的实现

(2)上课时候画的数据流图:

四、代码部分

1.前段代码及tree接口,对应的界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>学术家族树</title>
</head>

<body>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="tree.js"></script>
    <link href="style.css" type="text/css" rel="stylesheet" />

    <div class="bg-container"></div>
        <div class="flex-item1">
            <p id="titlename">INPUT</p>
        </div>
        <div class="flex-item2">
            <textarea style="background:none;border-style:none;" id="user"></textarea>
            </br>
            <button id="textbotton" onClick="chase()">生成家族树</button>
        </div>
        <div class="flex-item3">
            <p id="show-tree">学术家族树</p>
        </div>
    </div>
</body>

</html>

2.创建一个类似树的数组方便建树以及储存数据

 var treeData = [{
       "name": "",
       "parent": "",
       "children": [{
       "name": "",
       "parent": "",
       "children": [{
       "name": "",
       "parent": ""
        }, {
       "name": "",
       "parent": "",
       "children": [{
       "name": "",
       parent: ""
       }]
        }, {
       "name": "",
       "parent": ""
       }, {
       "name": "",
       "parent": ""
       }]
       }, {
       "name": "",
       "parent": "",
       "children": [{
       "name": "",
       "parent": ""
       }, {
       "name": "",
       "parent": ""
       }, ]
       }, {
       "name": "",
       "parent": ""
       }, ]
     }];

3.解析输入储存技能树数据

var count = 0; //定义儿子节点的编号
             var flag = 0; //定义标志是否为关联树值为1
             var all_data = document.getElementById("user").value;
             var sclice_data = [];
             var model_data = [];
             var skill_data = [];
             var sk_data = [];
             var sk_num = 0;
             var daoshi_num = 0;
             model_data = all_data.split("\n\n");  //用split函数对输入文本进行分块
             for(var x = 0; x < model_data.length; x++)
             {
                sclice_data = model_data[x].split("\n"); 
                if (sclice_data.length == 1 )
                {
                    var hb = sclice_data[0].split(":");
                    var head_tmp = hb[0];
                    var body_tmp = hb[1];
                    if(head_tmp != "导师")
                    {
                        sk_data = body_tmp.split("、");
                        var ct = 0;
                        skill_data[sk_num] = new Array();
                        skill_data[sk_num][ct++] = head_tmp;
                        for(var n = 0; n < sk_data.length; n++)
                        {
                            skill_data[sk_num][ct++] = sk_data[n];  //储存数据方便后续建树以及判断
                        }
                        sk_num += 1;                    }
                }
                else if(sclice_data.length > 1 || (sclice_data.length == 1 && sclice_data[0].split(":")[0] == "导师"))
                daoshi_num++;   //统计导师文本数据个数
             }

4.简单解析带导师的文本,并进行存储,过程调用check函数检测是否为关联树,最后调用建树函数

      for (var j = 0; j < daoshi_num; j++) 
             {
     //            document.write(j);
                 //初始化变量
                 count = 0;
                 //flag = 0;
                 quanju_flag = 0;
                 count_shu = 0
                     //treeData[j] = [{}];
                     //shuInit();
                 sclice_data = model_data[j].split("\n");
     //            document.write(sclice_data);
                 for (var i = 0; i < sclice_data.length; i++) 
                 {
                     var head_tmp = "";
                     var body_tmp = "";
                     var kk = 0;
                     //fflag = 0;

                     var hb = sclice_data[i].split(":"); //从冒号分割一层字符串
                     head_tmp = hb[0];
                     body_tmp = hb[1];
                     //处理冒号前的部分
                     if (head_tmp == "导师") 
                     {
                         //document.write("<br /><br />"+body_tmp+"<br />");
                         var daoshi2 = {
                             "name": body_tmp,
                             "parent": "null",
                             "children": [{}]
                         }
                         treeData[j] = daoshi2; //将导师嵌入节点
                     } 
                     else
                     {

                         //document.write("<br />");
                         var children = {
                             "name": head_tmp,
                             "parent": "null",
                             "children": [{}]
                         }
                         treeData[j].children[count] = children; //将年级及职业嵌入节点
                         var bodies = body_tmp.split("、");
                         //document.write("姓名:");
                         for (var kk = 0; kk < bodies.length; ++kk) 
                         {
                             //document.write("|");
                     //        document.write(bodies[kk]+"|");
                             var op_flag = -1;
                             for(var op = 0; op < sk_num; op++) 
                             {
                        //         document.write(skill_data[op][0]);
                                 if(skill_data[op][0] == bodies[kk])
                                 {
                             //        document.write("557");
                                    var children = 
                                    {
                                        "name": bodies[kk],
                                        "parent": "null",
                                        "children": [{}]
                                    }
                                    op_flag = op;
                                    break;
                                 }
                        //         document.write("557");
                             }	
                             if(op_flag == -1)
                             {
                                    var children = 
                                    {
                                        "name": bodies[kk],
                                        "parent": "null",
                                        "children": []
                                    }
                             }
                                 //treeData.push(children);
                             treeData[j].children[count].children[kk] = children; //将姓名嵌入节点
                             //console.log(treeData);
                             //弹出学生名
                             //alert(treeData[j].children[count].children[kk].name);
                             if(op_flag != -1)
                             {
                                 for(var ye = 0; ye < skill_data[op_flag].length - 1; ye ++)
                                 {
                                     var children = 
                                     {
                                         "name": skill_data[op_flag][ye + 1],
                                         "parent": "null",
                                         "children": []
                                     }
                                     treeData[j].children[count].children[kk].children[ye] = children;
                                 }
                             }
                         }
                         count++; //第二子节点编号加一,生成下一个第二子节点
                     }
                 }
                 //一棵树型数据构造完成
                 //alert(treeData[j].length);
                 //和前面所有的树比较,判断是否为关联树
                 var tree_tmp = treeData[j];
                 var name_tmp = treeData[j].name;
                 for (num_tmp = 0; num_tmp < j; num_tmp++) {
                     check(treeData[num_tmp], name_tmp, tree_tmp, num_tmp);
                 }
                 if (!quanju_flag) count_shu++; //若有关联树则独立树的棵数不增加

                 //重新生成树
                 //shuInit(j);
                 //update(source);
             }

             //生成所有树
             // alert("shu: " + count_shu);
             for (var i = 0; i <= count_shu; i++) 
             {
                 shuInit(i)
             }
         }
目录及使用说明
  • tree1.rar

    • inde.html

    • style.css

    • README.md

    • tree.js

    • d3.v3.min.js

  • style.css是外部的界面布局文件,最终被inde.html文件引用

  • README.md是使用文档,类似于说明书

  • d3.v3.min.js是一个库

  • tree1.js是最新版核心算法生成树的文件,利用json数据生成树并且创立

  • inde.html是整体界面布局文件,引用了css以及js文件进行最后网页的生成,包含生成学术家族树按钮进行结果输出

测试人员使用说明

  • 测试人员使用时下载tree1.rar文件并解压到同一个文件夹下,最后点击html文件运行网页,因为背景是引用链接,因此联网才能有更好地体验,在右侧的空白文本框中输入文本数据,点击右下角的生成按钮,最终在左侧会生成所需要的学术家族树,并且鼠标点击可以缩放或者扩展。

  • 切记每组数据之间一定要空一行符合规范,最后一组数据最后一行不要换行,否则会导致结果出错。

五、成果展示

1.输入第一组数据

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四

结果

{{uploading-image-19987.png(uploading...)}}

2.输入第二组数据

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四

刘六:JAVA、数学建模

李二:字节跳动、京东云

结果

3.输入第三数据

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四

导师:吴五
2016级博士生:天二、王四、吴六
2015级硕士生:李一、王八、许七
2016级硕士生:刘三、李八、李二
2017级本科生:刘一、琪八、司四九

导师:刘2
2016级博士生:天四、王九
2015级硕士生:李四
2016级硕士生:刘一
2017级本科生:刘一

结果


GitHub签入记录截图

  • 包括对文件说明的修改以及多个版本代码的更替

结对困难及解决

  • 问题:最开始对网页的制作一无所知,对于作业无从下手。
    解决:我们通过b站,菜鸟教程自学,达到了入门水平,看得懂框架,懂的引用。

  • 问题:尽管达到了入门水平,但是整体的代码编写页面布局还是较为困难。
    解决:调用了javascript自带的库,并且参考了一些页面布局代码,最终较为坎坷的实现了自己的网页界面,虽然看起来较为简约,但是实现过程并不是一帆风顺,所幸最后我们成功了,做出一个属于自己的网站界面。

  • 问题:我们找到了树的生成框架,但是困扰与如何进行数据的解析,储存,并且最后生成树。
    解决:最终借鉴了前辈们使用json数据类型生成树的方法,但是数据储存过程中出现了数据丢失,或者是数据格式导致了无法输出的情况,最后通过一行行的debug,中间使用了无数次的文本输出从注释中可以看到,最终实现了树的输出并且附带技能树。

  • 这次的网页制作经历收获了简单网页的布局,懂得使用框架,修改一些关键性的数据。同时学会了网页如何实现会更方便于后期的修改制作,以及在生成树算法方面有了深刻的理解。最后就是对于文本框输入数据的处理上,体会到了split函数的妙用,以及javascript数组的使用,最为关键的就是二维数组不能简单定义,否则会出现数据丢失的情况。

队友的评价

  • 值得我学习的地方是他对作业完成的积极性,志炜他的完成效率和学习效率真的远在我之上,这是我应该学习的地方,以及在过程中提供较为关键的修改意见。

  • 需要改进的大概就是我们都需要提高知识面以及代码能力,不然每做一次作业都要死要活的。

posted @ 2020-10-10 10:40  ultra-Jet  阅读(216)  评论(0编辑  收藏  举报
动态线条
动态线条end
Live2D