软件工程第五次作业

软件工程 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/Eternity-5/p/12715188.html
参考文献 https://www.baidu.com

一.链接

    结对成员:
    • 伍淑琪 20177648 博客地址
    • 龚慧 20177649 博客地址
  • Github地址 https://github.com/chocolanden/together

二.具体分工

  • 伍淑琪:代码实现,界面设计及美化
  • 龚慧:单元测试,博客内容撰写

三.PSP表格

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

四.解题思路描述与设计实现说明

  • 文本框数据的提取

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

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

  • 树动态结构的生成

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

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

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

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

  • 树结构节点的缩放实现

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


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

  • 关键算法在上文中给出
  • 利用的算法:利用了深度优先算法遍历结点

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

  • 流程图

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


五.附加特点设计与展示

  • 添加了背景、展现数的形态以及颜色之类的。

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

  • 人物添加了头像

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


  • 成果展示

  • 运行结果首页:没输入示例时

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

  • 运行结果--家族树缩放

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

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

  • 两棵或多棵树关联

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

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

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

  • 动态图演示

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


六.目录说明和使用说明

  • 目录如何组织
    • 111.zip
      • bootstrap压缩包
      • jQuery-3.4.1.min.js
      • 背景图:1.jpg

    • 文本格式
      输入:
      学术家族树以文本形式输入,web页面需要提供一个文本框;考虑学术家族树的文本格式是这样的:
      导师:张三
      2016级博士生:天一、王二、吴五
      2015级硕士生:李四、王五、许六
      2016级硕士生:刘一、李二、李三
      2017级本科生:刘六、琪七、司四
      导师:吴五
      2016级博士生:天一、王二、吴
      2015级硕士生:李四、王五、许六
      2016级硕士生:刘一、李二、李三
      2017级本科生:刘二、琪七、司四
      导师:刘二
      2016级博士生:天一、王二
      2015级硕士生:李四、王五、许六
      2016级硕士生:刘一、李、李三
      2017级本科生:刘三、琪七、司四
      其中,"导师:","级博士生:","级硕士生:","级本科生:"和"、"当做关键词处理;若有多组输入,中间空一行。
      输出: 树的节点,鼠标点击后是可以缩放的。同时,支持呈现多棵树关联等形式。 在文本框右侧会显示可缩放的家族树结构,即生成的家族树。

  • 测试人员如何运行网页
<>
    • 在github上打开输入样例“测试.txt”文件
    • 直接用浏览器打开“1.html”文件,输入格式按照作业要求。
    • 在左侧的文本框输入数据,点击提交按钮,将会在右 侧生成一棵以导师为根节点的树。支持多棵书关联的形式。

七.单元测试

说实话,单元测试这个东西完全不熟,它不认识我,我现在认识它一点点了。上次数独的作业也有说单元测试,但它就从我面前飘了过去???像一阵风,啥也没留下。。
但是这次单元测试够狠!光是下载和安装,花了我不少时间!!!气愤 我在度娘上查找了很多关于js的测试框架,下载了node.js,选择露脸度极高的mocha,摩卡
测试工具:mocha
选择测试的是遍历生成树dfs(u,fa),但其实看不懂这个测试数据要怎么写,没有通过。哭了,辛辛苦苦把工具安装好并可以正常使用之后结果看不懂(内心哭唧唧)

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


八.github的代码记录

软件工程第五次作业_第21张图片
emmmmm,前面一片空

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


九.遇到的困难及解决方法

  • Q:首先就是树状动态图不知道怎么实现
  • A:找了很久的百度,试了bootstrap,D3等框架,最后选了D3框架来做,学到了一点点<>

  • Q:文本框的内容不知道怎么交互到树结点中<>
  • A:也是查了许多资料,其实开始获取文本框内容之后难度就小了一些<>

  • Q:npm出现错误,各种err
  • A:原因居然是————被墙了!!!网上的大佬说可以用国内镜像解决这个问题,emmmmm,不懂,但还是解决了

十:评价你的队友

  • 打南边来的喇嘛:大佬真的还是厉害的!!!感觉我还是弱啊,感觉大佬有点带不动我了。。QAQ 我也还有很多要学习的地方,不得不说,博客园的软件工程作业开始之后,抗压能力增强了一些,再(qiao)接(ni)再(o)厉(jii)。
  • 哼唧*:队友还是太客气了,我也是个渣渣,互相帮助,共同进步,队友是我强有力的伙伴、生命中不能缺少的人。哈哈哈。。 悄咪咪吐槽(软件工程这门课快让我秃了半个脑袋了)。。。年少秃了头、未来可怎么搞

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

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