2020软件工程作业05

软件工程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
作业目标	结对编程实现“家族树”
作业正文	如下
参考文献	百度、CSDN

一、结对

成员	博客地址
刘超然博客地址	https://www.cnblogs.com/detachmliu/
高洁博客地址	https://www.cnblogs.com/risiblejdd/
作业博客地址	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619 l
Github项目地址	https://github.com/DetachmLiu/20177603-20177615

二、具体分工

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

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

三、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

四、解题思路与设计

第一个想法

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

第二个想法

采用HTML + JavaScript + CSS去实现

代码组织

类图

流程图

最有价值的代码片段

这是主函数中的动态增加树的核心代码，功能是将传过来的动态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增加特色

关键就在于生成树的阶段，每次生成树时存储树的id，在按下按钮后，调用对应的方法——遍历这个id数组，将所有的树都给check一遍。

// 用于额外功能——所有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 } ) } }