师生家族树（文本-->结构）

20/04/17 完成初版，累...
20/04/18 修改文章几处小错误，Github增加README.md文件

这个作业属于哪个课程	班级的链接
这个作业要求在哪里	作业要求
这个作业的目标	完成一个web小程序，将师生文本信息转化为师生树
作业正文	如下
参考文献 ①	bootstrap组件
参考文献 ②	treeview下载地址
参考文献 ③	treeview中文API文档
参考文献 ④	treeview官方demo
参考文献 ⑤	w3school
参考文献 ⑥	Qunit

分工

Item	Address
刘超然	博客地址
高洁	博客地址
Github	仓库地址

刘超然：负责程序的编写和调试，重构和迭代代码，将一些想法付诸实现，完善博客技术部分内容。

高洁：负责思路的梳理、提供想法，发现问题后及时提出解决方案，完成博客陈述部分内容。

PSP表格

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

思路

思路概述

刚刚拿到问题，我们的脑海中只有❓❓❓（BGM自动响起：小朋友，你是否有很多问号...)，这是要我们做什么啊，看着也太难了吧！！！冷静了一个礼拜左右，我们又重新来审视这次的作业~~（其实主要是因为DDL）~~，发现也不是太难，就想着来做做吧！💦

上个学期我们学习了Java web，这些预备知识对作业来说很有帮助，因此这里需要解决的是：

如何得到师生信息
如何将学生归到老师的门下（如何生成一棵树）
如何显示树形结构

第一个想法

那一瞬间，MVC、Tomcat、jsp、Ajax等名词瞬间涌上心头，要不我们这么去做吧：

先用jsp写个界面出来，一个文本框、一个提交按钮
提交按钮的功能就是将文本框的信息传到后台服务器
使用MVC模式，前后端分离，后端处理字符串，可以使用Java来处理，还可以用Ajax来异步刷新
Java中Collection接口中的各种实现类，足以应对作业中的字符串存储、关联等情况
最后百度一下Java后台数据转前端的树形结构怎么操作即可

理想很丰满，现实是：MVC、DAO、Ajax等概念忘得差不多了，Tomcat早已不存在（重装了系统）。

害！真的太难了，我再回去看看题目要求吧！突然发现了这条：

请确保其他同学在下载你的所有文件后，用谷歌浏览器运行html文件就能展现预期结果

原来题目的本意并不需要我们去搞什么服务器和数据库啊！！而是需要我们做个静态页面，使用JavaScript完成数据的处理！如果使用到服务器和数据库的话，就达不到下载文件后打开就能运行的效果了（这是我们的猜想：在一个啥都没装的电脑上，如果能完美运行，想必依赖项和附属项都是离线且无需额外的环境配置的）！

第二个想法

在第一个想法终结时，第二个想法就自然而然地出现了：

采用HTML + JavaScript + CSS去实现！

作业编码要求的第三点：使用html+css+javascript实现，可以使用bootstrap这样的框架；

（捂脸）敢情这就是作业的本意啊喂！实现思路啥的这里就不赘述了，下面都有~~

代码组织与内部实现设计

代码组织

类图

算法

对于样例而言，作业描述部分已经给了我们提示🧐：

"导师："，"级博士生："，"级硕士生："，"级本科生："和"、"当做关键词处理

JavaScript怎么可能没有split方法呢！

于是我们将上述关键字用split分割开来，并取有意义的部分进行存储。

当分割到学生层级时，用Js对象数组一步一步向上套娃，最终把两个值赋给JSON（treeData），完成数据的转化。具体流程图如下：

流程图

最有价值的代码片段

下面贴出个人认为最有价值的代码片段：

这是主函数中的动态增加树的核心代码，功能是将传过来的动态id，赋给一个新的div标签，最终加到HTML中，实现多颗树的共存。

被调用的流程在流程图最后有所展示，就不再赘述啦。

/*
 * 该函数用于将对应的div + 动态id值插入到HTML中的大div中
 */
function add_div(treeId) {
    const e = document.getElementById("tree");
    const div = document.createElement("div");
    div.id = treeId;
    div.innerHTML = e.innerHTML;
    // 在双亲div中增加孩子div，可以理解为div数组然后一直往里边加（div）
    document.getElementById("tree").appendChild(div);
}

附加特点设计与展示

特点集

提供一键展开和关闭的按钮
提供节点信息的模糊搜索并高亮
对于不同的信息分别尾部增加不同的emoji表情（像这样）😏
按钮value增加特色~~（抽象化）~~

Reason

主要就是想着在实现基本功能上多提供一些小功能~让作品显得不那么死板😪

代码一瞥

其实实现起来还是比较简单的~~（还不是因为调了API！）~~，关键就在于生成树的阶段，每次生成树时存储树的id，在按下按钮后，调用对应的方法——遍历这个id数组，将所有的树都给check~~（调了API）~~一遍。

// 用于额外功能——所有div的id数组
const ids = [];
// emoji数组——small trick
const emoji = ["🧑", "👨‍🎓", "👨‍💻"];

/*
 * 该函数用于展开所有树的节点
 */
function expandAllNodes() {
    for (let i = 0; i < ids.length; i++)
    {
        $("#" + ids[i]).treeview(
            'expandAll',
            { 
                    levels: 3,
                    silent: true
            }
        )
    }
}