软件工程实践2019第五次作业——结对编程的编程实现

软件工程实践2019第五次作业

1.相关链接：

 博客链接：

• 031702231刘新耀

• 031702242邱健强

   本次博客链接：

  https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736

   github链接：

• github项目地址

---

2.具体分工：

• 提前学习关于前端和本次作业相关的知识，两人都有参与结对编程，html,js等代码部分邱健强同学负责的比较多，素材收集的ui部分和博客撰写刘新耀同学负责的比较多，两人都有参与需求分析和测评等项目。

---

3.psp表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	120	130
Development	开发	600	620
Analysis	需求分析 (包括学习新技术)	800	900
Design Spec	生成设计文档	60	45
Design Review	设计复审	60	50
Coding Standard	代码规范 (为目前的开发制定合适的规范)	30	40
Design	具体设计	60	60
Coding	具体编码	600	620
Code Review	代码复审	60	65
Test	测试（自我测试，修改代码，提交修改）	180	150
Reporting	报告	120	100
Test Repor	测试报告	120	90
Size Measurement	计算工作量	30	35
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	60	60
合计		2900	2835

---

 

---

4.解题思路描述和设计实现说明

• 代码组织与内部实现设计:

  从html页面里面获取数据，然后用js处理数据成echarts所需要的格式，然后通过echarts库渲染出树图。

• 算法的关键与关键实现部分流程图：

   本次算法的关键在于如何将文本框输入的数据提取出来，并用相应的框架去生成所需要的学术树。数据输入，采用关键字提取，导师默认，对博士生研究生本科生三种身份进行提取，再往下划分所属的级数，这些都是相关的结点，利用json,jQuery和Echarts等相关知识将数据生成树；树的情况还分为多种考虑情况，单棵树，多棵树独立和多棵树关联......这些问题都比较复杂，需要结点进行关联。
  

• 代码片段:

  for(k=i;k

---

5.附加特点设计与展示

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

  • 支持任意顺序输入，不必拘泥于先输入导师，更加方便。
  • 插入背景，优化美观。
  • 支持多棵树并存，让输入更加方便。

• 实现思路:

• 树的渲染用Echarts库，自己编写代码将输入数据转化为对应的json数据。

• 代码片段:

function drawTree(treeData,x) {
var  myChart = echarts.init(document.getElementById(x));//div元素节点的对象
myChart.setOption({
   tooltip : {
       trigger : 'item',
       triggerOn : 'none'
   },
   series : [ {
       type : 'tree',
       name : 'TREE_ECHARTS',
       data : treeData,
       top : '2%',
       left : '10%',
       bottom : '30%',
       right : '15%',
       symbolSize : 20,
       label : {
           normal : {
               position : 'left',
               verticalAlign : 'middle',
               align : 'right',
               fontSize: 30,
               color:"black"
           }
       },
       leaves : {
           label : {
               position : 'right',
               verticalAlign : 'middle',
               align : 'left'
           }
       },
       expandAndCollapse : true ,
       initialTreeDepth : 10  //展示层级数
   } ]
});

• 实现成果展示:

  
  

---

6.目录说明和使用说明

• 目录组织说明：

  
  img存放所需要的图片
  echarts.min.js为echarts库所需文件
  jquery-3.4.1.min.js为jQuery库所需文件

• 使用方法：

  直接打开index.html，然后在里面输入数据并且提交就可以看到所生成的树图（生成的树图在输入框的下方！）。

---

7.单元测试

• 测试工具：Mocha

• 如何学习单元测试：

   浏览相关知识的博客 例如： Mocha博客学习
  • 1.安装Mocha,在安装Node的前提下运行命令：cd mocha-demos;npm install;
  • 2.安装全面环境：npm install --global mocha;安装断言库chai：npm install chai;
  • 3.测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js（表示测试）或者.spec.js（表示规格）。
  • 4.一般都会把测试脚本放在test目录里面，mocha-test目录，运行下面的命令。

• 测试代码：

  

• 构造测试数据的思路：

  • 单棵树内的输入先后顺序：如导师在前；导师在中；导师在后；
  • 单棵树内重复级数或身份出现：如出现2次2017级xxx；2017本科生和2018级本科生；
  • 单棵树输入数据的扩大：每行输入的学生更多；输入很多行的情况；
  • 多棵树：以上情况的组合出现；
  • ......

---

8.贴出Github的代码签入记录

---

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

• 问题描述：编码的html文件在web显示不出来；代码错误问题；结点无法缩放；多棵树无法并存；导师最后输入，系统崩溃。

• 做过哪些尝试：百度和查找博客，学习相关博客的方法，学习相关视频知识

• 是否解决：已解决

• 有何收获：提升了解决问题和自我学习的能力，对于前端有了一点初步的了解。在一次次遇到问题解决问题的过程中，经验值不断累加，相信通过这次学习，我们今后的自学能力和动手能力都有所提升，学会冷静地分析问题，解决问题，不得不感慨，收获良多。

---

10.评价你的队友

• 值得学习的地方：找图片素材的能力。

• 需要改进的地方：提高编码能力。