这个作业属于哪个课程 | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1 |
---|---|
这个作业要求在哪里 | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619 |
这个作业的目标 | 实现关系树 |
作业正文 | 如下 |
其他参考文献 | 无 |
1、成员信息
姓名 | 学号 | 博客园地址 |
---|---|---|
唐巍 | 20177713 | https://www.cnblogs.com/iriszero/ |
胡靓 | 20177717 | https://www.cnblogs.com/murasaki/ |
github地址:https://github.com/iriszero48/2020-SE-05
2、任务分工
唐巍:主要负责学术家族树的具体实现以及博客内容的审核和补充
胡靓:主要负责单元测试的完成及攥写博客
3、PSP表格
PSP2.1 | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 5 | 5 |
Estimate | 估计这个任务需要多少时间 | 5 | 5 |
Development | 开发 | 800 | 655 |
Analysis | 需求分析 (包括学习新技术) | 60 | 20 |
Design Spec | 生成设计文档 | 0 | 0 |
Design Review | 设计复审 | 0 | 0 |
Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
Design | 具体设计 | 30 | 40 |
Coding | 具体编码 | 450 | 330 |
Code Review | 代码复审 | 60 | 25 |
Test | 测试(自我测试,修改代码,提交修改) | 200 | 240 |
Reporting | 报告 | 70 | 110 |
Test Repor | 测试报告 | 30 | 25 |
Size Measurement | 计算工作量 | 10 | 15 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 70 |
合计 | 785 | 770 |
4、解题思路描述与设计实现说明
-
代码组织与内部实现设计
-
始化go.js
go.js自带
-
将输入转化成数据
使用split,forEach,sort,slice处理然后push到DataArray即可
-
绘制
go.js自带
-
-
算法的关键与关键实现部分流程图
因为使用了go.js(随便找的),绘图的事基本不用管,所以只需要处理数据即可
流程图如下
-
最重要的代码片段
将输入转化成数据部分
// 初始化 let nodeDataArray = [{ key: 1, text: "师生树", fill: color0, stroke: color0 }]; let inArrArr = document.getElementById('input').value.split('\n\n'); let id = 1; // 对每组进行处理 inArrArr.forEach(x => { let inArr = x.split('\n'); nodeDataArray.push({ key: ++id, text: inArr[0].split(':')[1], fill: color1, stroke: color1, parent: 1 }); // 添加导师 let rootId = id; // 对每行进行处理 inArr.slice(1).sort().forEach(y => { let data = y.split(':'); nodeDataArray.push({ key: ++id, text: data[0], fill: color2, stroke: color2, parent: rootId }); // 添加级数 let subId = id; data[1].split('、').forEach(z => nodeDataArray.push({ key: ++id, text: z, fill: color3, stroke: color3, parent: subId })); // 添加学生 }); });
5、附加特点设计与展示
-
设计的创意独到之处,这个设计的意义
界面直观简洁,节省用户流量,同时仍能非常清晰地体现出学术家族树中成员间的关系
-
实现思路
我们去掉了很多赘余的样式
-
重要的的代码片段
整个body只有三个部分,一个树,一个输入框,一个按钮,省去大量样式,减小网页体积,提高响应速度,降低服务器负担,降低网络开销,减少cdn的流量费用
-
实现成果展示
6、目录说明和使用说明
-
说明你的目录是如何组织的
因为要使整个程序简洁,所以只有一个index.html,便于直接使用
2020-SE-05
├── .idea
│ ├── VisualizeTree.iml
│ ├── encodings.xml
│ ├── inspectionProfiles
│ │ └── Project_Default.xml
│ ├── jsLibraryMappings.xml
│ ├── misc.xml
│ ├── modules.xml
│ └── vcs.xml
├── index.html
└── tests.html -
测试人员如何运行你的网页
直接打开index.html即可运行
直接打开tests.html即可运行测试
7、单元测试
-
测试工具及学习
-
使用QUnit
-
通过官网的教程来学习
-
测试框架大体上都差不多,官网讲得也非常简洁明了
-
-
项目部分单元测试代码
测试基本的运行
QUnit.test("standard1", assert => {
const str = "导师:许三\n" +
"2009级博士生:赵大、李六、赵三\n" +
"2010级硕士生:张三、钱四、刘二\n" +
"2009级硕士生:孙一、孙三、钱二\n" +
"2011级博士生:孔三、刘四、吴九";
const res = "[{\"key\":1,\"text\":\"师生树\"},{\"key\":2,\"text\":\"许三\",\"parent\":1},{\"key\":3,\"text\":\"2009级博士生\",\"parent\":2},{\"key\":4,\"text\":\"赵大\",\"parent\":3},{\"key\":5,\"text\":\"李六\",\"parent\":3},{\"key\":6,\"text\":\"赵三\",\"parent\":3},{\"key\":7,\"text\":\"2009级硕士生\",\"parent\":2},{\"key\":8,\"text\":\"孙一\",\"parent\":7},{\"key\":9,\"text\":\"孙三\",\"parent\":7},{\"key\":10,\"text\":\"钱二\",\"parent\":7},{\"key\":11,\"text\":\"2010级硕士生\",\"parent\":2},{\"key\":12,\"text\":\"张三\",\"parent\":11},{\"key\":13,\"text\":\"钱四\",\"parent\":11},{\"key\":14,\"text\":\"刘二\",\"parent\":11},{\"key\":15,\"text\":\"2011级博士生\",\"parent\":2},{\"key\":16,\"text\":\"孔三\",\"parent\":15},{\"key\":17,\"text\":\"刘四\",\"parent\":15},{\"key\":18,\"text\":\"吴九\",\"parent\":15}]";
assert.equal(JSON.stringify(Main(str)), res, "Passed!");
});
-
构造测试数据的思路
基本运行测试 + 错误测试
8、Github的代码签入记录
9、遇到的结对困难及解决方法
-
问题描述
- 对于我们的关系树具体到底应该画成个什么样子,我们迟迟没有下最终定论。(因为过分考虑是否符合题目的要求了(x
-
做过哪些尝试
- 互相提出方案和想法,征求对方意见同时比对博客作业要求及评分细则。
-
是否解决
- 解决√
-
有何收获
- 解决一切问题的方案是:算了 (不要思虑过多x
10、队友评价
-
值得学习的地方
-
唐巍:“hl奆姥身上到处都是值得我学习的地方,热爱学习,认真负责(”
-
胡靓:“tw神仙身上到处都是值得我学习的地方,神仙啥都会,神仙啥都懂,神仙啥都能教我,能和神仙合作真是太荣幸了,能学到好多好多的东西,感觉连灵魂都得到了升华呢!”
-
-
需要改进的地方
-
唐巍:“没有要改进的地方(抱紧奆姥大腿”
-
胡靓:“神仙怎么会有需要改进的地方呢?开什么玩笑!(抱紧tw神仙大腿...”
-