一.链接
二.具体分工
- 伍淑琪:代码实现,界面设计及美化
- 龚慧:单元测试,博客内容撰写
三.PSP表格
四.解题思路描述与设计实现说明
- 文本框数据的提取
- 树动态结构的生成
- 树结构节点的缩放实现
- 说明算法的关键与关键实现部分流程图
- 关键算法在上文中给出
- 利用的算法:利用了深度优先算法遍历结点
- 流程图
五.附加特点设计与展示
- 添加了背景、展现数的形态以及颜色之类的。
- 人物添加了头像
- 成果展示
- 运行结果首页:没输入示例时
- 运行结果--家族树缩放
- 两棵或多棵树关联
- 动态图演示
六.目录说明和使用说明
- 目录如何组织
- 111.zip
- bootstrap压缩包
- jQuery-3.4.1.min.js
- 背景图:1.jpg
- 文本格式
- 输入:
学术家族树以文本形式输入,web页面需要提供一个文本框;考虑学术家族树的文本格式是这样的:
导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四
导师:吴五
2016级博士生:天一、王二、吴
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘二、琪七、司四
导师:刘二
2016级博士生:天一、王二
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李、李三
2017级本科生:刘三、琪七、司四
其中,"导师:","级博士生:","级硕士生:","级本科生:"和"、"当做关键词处理;若有多组输入,中间空一行。
输出: 树的节点,鼠标点击后是可以缩放的。同时,支持呈现多棵树关联等形式。 在文本框右侧会显示可缩放的家族树结构,即生成的家族树。 - 111.zip
- 测试人员如何运行网页
- 在github上打开输入样例“测试.txt”文件
- 直接用浏览器打开“1.html”文件,输入格式按照作业要求。
- 在左侧的文本框输入数据,点击提交按钮,将会在右 侧生成一棵以导师为根节点的树。支持多棵书关联的形式。
七.单元测试
说实话,单元测试这个东西完全不熟,它不认识我,我现在认识它一点点了。上次数独的作业也有说单元测试,但它就从我面前飘了过去???像一阵风,啥也没留下。。但是这次单元测试够狠!光是下载和安装,花了我不少时间!!!气愤 我在度娘上查找了很多关于js的测试框架,下载了node.js,选择露脸度极高的mocha,摩卡
测试工具:mocha
选择测试的是遍历生成树dfs(u,fa),但其实看不懂这个测试数据要怎么写,没有通过。哭了,辛辛苦苦把工具安装好并可以正常使用之后结果看不懂(内心哭唧唧)
八.github的代码记录
emmmmm,前面一片空
九.遇到的困难及解决方法
- Q:首先就是树状动态图不知道怎么实现
- A:找了很久的百度,试了bootstrap,D3等框架,最后选了D3框架来做,学到了一点点<>
- Q:文本框的内容不知道怎么交互到树结点中<>
- A:也是查了许多资料,其实开始获取文本框内容之后难度就小了一些<>
- Q:npm出现错误,各种err
- A:原因居然是————被墙了!!!网上的大佬说可以用国内镜像解决这个问题,emmmmm,不懂,但还是解决了
十:评价你的队友
- 打南边来的喇嘛:大佬真的还是厉害的!!!感觉我还是弱啊,感觉大佬有点带不动我了。。QAQ 我也还有很多要学习的地方,不得不说,博客园的软件工程作业开始之后,抗压能力增强了一些,再(qiao)接(ni)再(o)厉(jii)。
- 哼唧*:队友还是太客气了,我也是个渣渣,互相帮助,共同进步,队友是我强有力的伙伴、生命中不能缺少的人。哈哈哈。。 悄咪咪吐槽(软件工程这门课快让我秃了半个脑袋了)。。。年少秃了头、未来可怎么搞