2020软工结对第二次作业

一、作业概述

| 这个作业属于哪个课程 | 软件工程2020秋学期 |
| ---- | ---- | --- |
| 这个作业的要求在哪 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| GitHub仓库地址 | https://github.com/xihuyouyong/031802427- |
| 结对同学博客链接 |https://www.cnblogs.com/htx1/ |

二、PSP表格

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

三、解题思路描述与设计实现说明

看到题目之后了解到大致思路如下：
1.如何输入正确的文本格式及传送过去
2.在web界面生成动态树形结构
3.该树形结构应该可缩放
经过查询了解后，发现使用D3.JS——数据可视化的JSON来比较好解决本次的问题。

但是短时间掌握这个插件确实不现实

主要后来找到了契合这次动态生成树实现的例子。
https://blog.csdn.net/joker_fei/article/details/76910023
简直美滋滋

大致流程图

有用的代码

 function chase() 
    {
        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");

// document.write(model_data);
for(var x = 0; x < model_data.length; x++)
{
// document.write(model_data.length);
// document.write(x);
sclice_data = model_data[x].split("\n");
// document.write(sclice_data);
if (sclice_data.length == 1 )
{
// document.write("ok");
var hb = sclice_data[0].split("：");
var head_tmp = hb[0];
var body_tmp = hb[1];
// document.write(head_tmp);
if(head_tmp != "导师")
{
// document.write("557");
// document.write(body_tmp);
sk_data = body_tmp.split("、");
// document.write(sk_data);
var ct = 0;
skill_data[sk_num] = new Array();
skill_data[sk_num][ct++] = head_tmp;
// document.write(sk_num);
// document.write(skill_data[sk_num][0]);
for(var n = 0; n < sk_data.length; n++)
{
skill_data[sk_num][ct++] = sk_data[n];
}
// document.write(skill_data[sk_num]);
sk_num += 1;
// document.write(sk_num);
}
else{
daoshi_num += 1;
}
}
else if(sclice_data[0].split("：")[0] == "导师")
{
daoshi_num++;
}
// document.write(sclice_data[0].split("：")[0]);
// document.write(daoshi_num);
}

详见流程图

四、附加特点设计与展示

没有什么特别的地方，都是前人用过的东西

五、在博客中给出目录说明和使用说明

1.目录组织

2、使用说明

下载树2.0.rar到本地，解压后文件本地，用chrome打开index.html,在右侧文本框输入文本。
学术家族树以文本形式输入，点击提交文本框。

六、GitHub代码commit

七、遇到的代码模块异常或结对困难及解决方法

尝试过vue.js与d3.js的结合，以及尝试jquery的结合
产生新的块，在新的块中生成新的学术家族树
...失败，像是在自找麻烦