2020软件工程作业05

这个作业属于哪个课程	软件工程
这个作业要求在哪里	2020软件工程作业05要求
这个作业目标	实现前端家族树
作业正文	本文章
其他文献参考	全局CSS样式 flex布局 HTML教程 数据 树 D3可视化入门

一、Github项目地址

 博文链接

  谢河洲博文链接
  罗轲博文链接

二、分工

  谢河洲：前端界面美化，单元测试
  罗轲：textarea内的数据处理，部分JS编写

三、PSP表格

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

四、思路描述与设计实现说明

代码组织与内部实现设计

  1.首先通过实验要求构思出来如下：

  2.用不同的div构建层次
  3.css样式使用百分比宽高绝对定位

说明算法的关键与关键实现部分流程图

  首先想到的算法是递归
  求出父节点下一子节点的长度是这个算法关键


  流程图

贴出你认为重要的/有价值的代码片段，并解释

获取信息，利用val()方法来处理表单元素的值，简单的输入信息。

将获取处理后的信息以树结构呈现，以下是部分属性定义

五、特点设计与展示

设计的创意独到之处，这个设计的意义

  输入和展出分开在左右，使界面显得整齐规整
  透明背景，增加美观感
  首先是增加了刷新功能，因为用户可能会出现输错的现象或者更改数据的需求

  其次我们增加了背景音乐，让用户使用时有一个舒适的环境

  1. 初始界面

  2. 生成师门树

六、目录说明和使用说明

目录组织

 目录格式
  师门树 -bgtype.css:html中导入的css文件 -bg3.jpg：插入的背景图片 -js:导入的JS文件 -j-tree.html:师门树
  README:目录说明与使用说明文件
 使用说明
  点击github上的"Clone or download"后，将上面所说的文件下载在同一文件夹内就可以使用了。
  使用时双击html文件，按照要求在左侧输入框内输入内容，并点击建立师门树则会在右边生成一棵以导师为根节点的树。
  点击刷新按钮可以刷新页面。

测试运行

 输入格式
  导师：张三
  2016级博士生：天一、王二、吴五
  2015级硕士生：李四、王五、许六
  2016级硕士生：刘一、李二、李三
  2017级本科生：刘六、琪七、司四

七、单元测试

测试工具，如何学习单元测试，简易教程吗？

展示出项目部分单元测试代码，并说明测试的函数

  子节点

八、Github代码签入记录

九、代码模块异常或结对困难及解决方法

问题描述

  1.界面设计简单简陋，不堪入目，html+css不熟练
  2.树状结构难以实现
  3.对json完全不了解

做过哪些尝试

  1.四处查看其他的界面，并借鉴学习，在网页里找相关资料
  2.查找了相关资料，eg d3可视化入门
  3.还是不太了解

是否解决

  1.已解决
  2.部分解决
  3.未解决

十、评价你的队友

值得学习的地方

  队友编程能力还是很强，而且看很多资料能很快接受。

需要改进的地方

  脑瓜子嗡嗡的，进入状态很慢。

自评表