软件工程第五次作业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


软件工程第五次作业2_第1张图片


 

软件工程第五次作业2_第2张图片

软件工程第五次作业2_第3张图片

软件工程第五次作业2_第4张图片

软件工程第五次作业2_第5张图片

软件工程第五次作业2_第6张图片

软件工程第五次作业2_第7张图片

软件工程第五次作业2_第8张图片

软件工程第五次作业2_第9张图片

附加特点设计与展示

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


 

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

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

 

 

实现思路


 

1.css 样式对界面的定位

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

 

 

实现成果展示

 软件工程第五次作业2_第10张图片

                                                      软件工程第五次作业2_第11张图片

                                     

                                                             

在博客中使用说明

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


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控制台的使用

软件工程第五次作业2_第12张图片

3.测试数据

 

数据一:

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

                                                        软件工程第五次作业2_第13张图片

 

数据二:

      导师:张三

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

                                                                 软件工程第五次作业2_第14张图片

                      

                                                           

数据三:

 

导师:张三

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

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

                                                 软件工程第五次作业2_第15张图片

 

                                        

                                        

数据四:

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

 

                        软件工程第五次作业2_第16张图片

 

          

 

数据五:

 

导师:张三

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

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

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

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

 

导师:吴五

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

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

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

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

                                        软件工程第五次作业2_第17张图片

 

                                                                    

 

 

 


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

 

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

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

  • 是否解决:已解决。

 

 

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

  • 尝试:学习json,用json做结构

  • 是否解决:已解决

 

评价队友


 

    值得学习的地方=====大佬就是牛,各方面都要向他学习(自己就是垃圾)

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

 

 

更新


 

1.界面更加可视化

软件工程第五次作业2_第18张图片
2.最大的一点就是增加了收缩功能

 软件工程第五次作业2_第19张图片

(此图为未修改前的   ,不能进行收缩)

 

 

收获


 

1.熟悉了D3框架

2.熟悉了dom树

3.了解了JSON 数组

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

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

 

 

你可能感兴趣的:(软件工程第五次作业2)