软工作业05

软件工程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
作业目标	网页实现家族树
作业正文	https://www.cnblogs.com/lxqs/p/12720540.html
参考文献	www.baidu.com

1、前言

• 小刘博客
• 小何博客
• 作业博客
• Github项目地址
  
  

具体分工

• 小刘：收集资料，部分代码，单元测试，博客编写
• 小何：收集资料，主要代码

2、PSP表格

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

3、解题思路描述与设计实现说明

• 解题思路

  • 收集并处理输入框中的数据
  • 用得到的数据生成一棵树
  • 利用循环生成多棵树
  • 添加功能及美化页面

• 实现

  • 使用'data=$("#stxt").val();'获取数据,再用split分割每行存入Arr数组
  • 初始化树→设置插入树的中介节点→设置导师根节点→选中父节点→插入二级节点→选中父节点→插入三级节点
  • 利用"导师"关键字确认要生成的树数,使用for函数实现生成树循环

• 关键代码流程图

• 重要的/有价值的代码

  我们认为重要的代码是一下两段代码：
  secondLayer()函数实现调用后实现二级节点的插入

function secondLayer(first,last){
     //first和last为要处理的对应这棵树内容的Arr数组下标
    for(var ii=first+1;ii

thirdLayer()函数实现调用后实现三级节点的插入

function thirdLayer(first,last){
    var iii=0;
    for(var ii=first+1;ii

4、附加特点设计与展示

• 设计的创意及意义

  将节点设计为文件夹的样式，便于展开（比较形象），界面简洁，可对节点进行修改和删除操作

• 实现思路

  利用jQuery+css实现
• 界面展示
  在右边输入框中输入需要建立的树，点击Create the tree便可得到如左边所示的家族树
  
  点击节点即可进行修改及删除操作
  

5、目录说明和使用说明

• 目录说明

  • css文件夹：
    demo1.css：自己设定的css
    metroStyle.css：ztree自带的css样式
  • img文件夹：metroStyle使用的图片素材
    jzs1.png:背景图片
  • htmling文件夹： 放置在html文件的图片
    reload.png：刷新图标
  • js文件夹：
    jquery.ztree.all.js：ztree自带js文件
    set.js：自己设定的js文件
  • test1.html： 网页html文件
  • README.md：目录说明和使用说明

• 使用说明

  • 下载至您的电脑并解压成文件夹，请确保完整下载了所有文件
  • 在解压出的文件夹中找到test1.html 右键→打开方式→Google Chrome
  • 成功打开html文件后可看到文本框下方的操作提示
  • 某些可能影响页面显示效果的因素：
    chrome浏览器缩放比例：100%
    屏幕比例
    不保证您已安装了的英文字体：Matura MT Script Capitals

6、单元测试

• 选用的测试工具

  mocha

• 如何学习单元测试

  身为一个小白，当然是百度啦，教程暂时还出不了，但是有一些推荐以及踩过的坑可以说一下
  • node.js的安装（因为mocha的安装依赖node.js，所以在下载mocha安装node.js）
    node.js安装教程
  • mocha的安装
    测试框架 Mocha 实例教程
    上面node.js和mocha的安装基本按教程步骤来就问题不大，但是需要注意的是教程中的长杠'——'在控制台输入命令时要两个'-'...不然就会配置失败导致无法使用（咱也不晓得有没有跟我一样粗心的人儿）
  • 测试（总结几个需要注意的地方）
    a、单元测试需要一个js文件（函数）和一个test.js文件（测试）
    b、测试文件与所要测试的源码脚本同名，后缀名为.test.js
    c、必须进入源码脚本以及测试文件所在的文件夹下才能进行测试
    d、describe的第一个参数是对测试的描述，it中的第一个参数是对测试结果的描述

• 项目部分单元测试代码

  因为我们各个函数都有关联，，，所以无法对单个函数进行测试...
  
  

• 构造测试数据的思路

  测试正常数据及一切有可能的异常输入

7、Github代码签入记录

因为是在本地调试好在一起迁入的，所以只有一次记录

8、遇到的困难及解决方法

• 看到题目的时候是懵逼的，不知道要做成怎样的效果图，经过多方了解，终于有了大致方向。
• 想做一个搜索框便于查找导师，但是因为要用到数据结构中的遍历，我们对此不太熟悉，就去除了这个想法。
• 关于在页面上怎么伸展各个节点，试用了很多方法，最终导入bootstrap和jQuery的包才解决问题。
• 对JavaScript的语法忘了很多，所以写了很多复杂又很长的代码。后面又去w3school里面重新看了相关知识。才精简了代码。
• 关于单元测试也遇到了各种问题，通过查看各种教程才得以解决。具体的在单元测试部分已经作了说明。

9、评价队友

小刘：
害~感觉到了小何同志对我的森森恶意，居然妄图想让我成为大佬带飞她（天真.jpg）
下面开始彩虹屁：人见人爱、花见花开、连车轮胎见了都要爆胎...哈哈哈
总之就是很好啦，合作很愉快，随叫随到（当然我也是~）
小何：
和我有明确的分工（get）
单元测试太不容易了，下了好几次软件才下好。下好后还不会用，又查了很久的百度才学会。(oﾟvﾟ)ノ
身为一个大佬却没有大佬的觉悟（让我躺赢（(￣▽￣)"））