软件工程第五次作业2

Github地址：https://github.com/somnusw/study-tree/blob/master/NewFile2.jsp

---

 

作业描述

 

软件工程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
题目	2020软件工程作业05-家族树的可视化
作业正文	下面
其他参考文献	https://www.cnblogs.com/xiaowenshu/p/10450848.html

结对同学：20177705 水浩铧

具体分工

20177705 水浩铧：单元测试，D3框架的改进

20177731 魏博硕：jstree的实现

共同完成：博客内容的撰写

PSP表格

	Personal Software Process Stages	预估耗时	实际耗时
Planning	计划	0	0
Development	开发	60	500
Analysis	需求分析 （学习新技术）	600	1200
Design Spec	生成设计文档	0	0
Design Review	设计复审	60	60
Coding Standard	代码规范	60	60
Design	具体设计	60	60
Coding	具体编码	180	600
Code Review	代码复审	180	180
Test	测试	180	180
Reporting	报告	60	120
Test Repor	测试报告	60	120
Size Measurement	计算工作量	0	0
Postmortem	事后总结	180	180
Process Improvement Plan	提出过程改进计划	60	60
Estimate	这个任务需要多少时间	1740	3320

---

---

---

---

 

此次作业在上一次的作业基础上进行了修改和增加了“树枝”的收缩

https://www.cnblogs.com/weiboshuosomnuslog/protected/p/12273572.html

---

---

 

附加特点设计与展示

设计的创意独到之处以及设计的意义

---

 

1. 采用上下格局，使界面显得整齐规整

2.透明图片作为背景，增加界面的美观感

 

 

实现思路

---

 

1.css 样式对界面的定位

2.算法和重要的代码见上面

 

 

实现成果展示

 

                                                      

                                     

                                                             

在博客中使用说明

说明你的目录是如何组织的

---

1.使用方式

  下载到本地，解压后用chrome打开NewFile.JSP，在右侧文本框输入文本。

  学术家族树以文本形式输入，点击提交文本框。

2. 文本格式

          其中“导师："，"级博士生："，"级硕士生："，"级本科生：" 以及"、"为关键词处理

  若有多组输入，中间空一行

  学术家族树以文本形式输入，点击提交文本框，考虑学术家族树的文本格式是这样的：

             输入：

导师：张三

2016级博士生：天一、王二、吴五

2015级硕士生：李四、王五、许六

2016级硕士生：刘一、李二、李三

2017级本科生：刘六、琪七、司四

                       !!!一定要注意文本最后不能换行哦

 

测试人员如何运行你的网页

---

 

• 点击github上把文件Clone到本地，解压后即可使用。
• 直接用Chrome打开NewFile.JSP，输入格式按照作业要求。
• 在上面的文本框输入数据，点击提交文本，将会在下面生成一棵以导师为根节点的树。同时支持多棵树并存以及关联树。

 

单元测试

---

 

1.测试工具

使用的是Chrome浏览器的F12工具台进行测试

在这里推荐看一下教程：https://www.cnblogs.com/xiaowenshu/p/10450848.html

2.测试代码

在代码中使用console.log()的命令检查数据分割的正确性

有了这个工具后我们确实加速了很多的进度

这是本次实验最大收获的一部分，掌握了Chrome控制台的使用

3.测试数据

 

数据一：

导师：张三
2016级博士生：天四、王九
2015级硕士生：李四
2016级硕士生：刘一
2017级本科生：刘六

                                                        

 

数据二：

      导师：张三

2016级博士生：天一
2015级硕士生：李四
2016级硕士生：刘一
2017级本科生：刘六

                                                                 

                      

                                                           

数据三：

 

导师：张三

2016级博士生：天一、王二、吴五

2015级硕士生：李四、王五、许六

                                                 

 

                                        

                                        

数据四：

导师：张三
2017级博士生：里斯、王五、嘻哈
2018级硕士生：阿三、考拉
2019级本科生：五四、胡静

 

                        

 

          

 

数据五：

 

导师：张三

2016级博士生：天一、王二、吴五

2015级硕士生：李四、王五、许六

2016级硕士生：刘一、李二、李三

2017级本科生：刘六、琪七、司四

 

导师：吴五

2016级博士生：天二、王四、吴六

2015级硕士生：李一、王八、许七

2016级硕士生：刘三、李八、李二

2017级本科生：刘一、琪八、司四九

                                        

 

                                                                    

 

 

 

---

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

 

• 问题描述：树状结构难以实现。

• 尝试：学习VUE，D3等框架，寻找类似树状可折叠结构的模板，学习API使用。

• 是否解决：已解决。

 

 

• 问题描述：无法与界面树进行数据交互

• 尝试：学习json，用json做结构

• 是否解决：已解决

 

评价队友

---

 

    值得学习的地方=====大佬就是牛，各方面都要向他学习（自己就是垃圾）

   需要改进的地方=====界面不太美观，需要改进

 

 

更新

---

 

1.界面更加可视化

2.最大的一点就是增加了收缩功能

 

（此图为未修改前的   ，不能进行收缩）

 

 

收获

---

 

1.熟悉了D3框架

2.熟悉了dom树

3.了解了JSON 数组

4.将代码中的引用外部文件替换为CDN公共资源库。

5.替换为纯html格式支持，已经上传到服务器，在线演示地址:https://gksec.com/github_demo/tree.html