2020软件工程作业05

这个作业属于哪个课程	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、解题思路描述与设计实现说明

代码组织与内部实现设计
1. 始化go.js
  
  go.js自带
2. 将输入转化成数据
  
  使用split，forEach，sort，slice处理然后push到DataArray即可
3. 绘制
  
  go.js自带
算法的关键与关键实现部分流程图

因为使用了go.js(随便找的)，绘图的事基本不用管，所以只需要处理数据即可

流程图如下

最重要的代码片段

将输入转化成数据部分

// 初始化
let nodeDataArray = [{ key: 1, text: "师生树", fill: color0, stroke: color0 }];
let inArrArr = document.getElementById('input').value.split('

');
let id = 1;
// 对每组进行处理
inArrArr.forEach(x => {
    let inArr = x.split('
');
    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的流量费用

<body>
<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; 100%; height:500px"></div>
    <label for="input"><textarea id="input" style=" 100%; height: 25%"></textarea></label><br/>
    <button onclick="init()">提交</button>
</div>
</body>

实现成果展示

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 = "导师：许三
" +
        "2009级博士生：赵大、李六、赵三
" +
        "2010级硕士生：张三、钱四、刘二
" +
        "2009级硕士生：孙一、孙三、钱二
" +
        "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神仙大腿...”