软工作业05

1、前言

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

具体分工

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

2、PSP表格

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

• 解题思路

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

• 实现

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

• 关键代码流程图

• 重要的/有价值的代码

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

function secondLayer(first,last){
     //first和last为要处理的对应这棵树内容的Arr数组下标
    for(var ii=first+1;ii<last;ii++){
        getSname(Arr[ii]);
        /*分割xx级xx生和学生名字的函数，其中令before=xx级xx生，将学生名字用split("、")
分割存放入Arr2数组（Arr2数组只存放一行数据的名字，每次刷新）*/
        zNodes=zTreeObj.getNodes();
        zTreeObj.selectNode(zNodes[0]);
        var parentZNode=zTreeObj.getSelectedNodes()；
        //选定二级节点要插入的父节点即导师节点
        zTreeObj.addNodes(parentZNode[0], [{menuName:before}], true);
        zTreeObj.expandAll(true); //展开节点
    }
    zzNodes=zTreeObj.getNodes()[0].children;//用zzNodes数组存放所有二级节点用于
thirdLayer()中三级节点插入二级节点
    }

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

function thirdLayer(first,last){
    var iii=0;
    for(var ii=first+1;ii<last;ii++){//二级数
        getSname(Arr[ii]);//获取一行数据中的人名存入Arr2
        zTreeObj.selectNode(zzNodes[iii]);
        var parentZNode = zTreeObj.getSelectedNodes();
        //选定三级节点要插入的父节点
        for(var jj=0;jj<Arr2.length;jj++)
            zTreeObj.addNodes(parentZNode[0], [{menuName:Arr2[jj]}], true);
        zTreeObj.expandAll(true); 
        iii++;
    }
}

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ﾟ)ノ
身为一个大佬却没有大佬的觉悟（让我躺赢（(￣▽￣)"））