软件工程第四次作业
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020/ |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| 这个作业的目标 | <在网页页面上呈现树形结构形式的师门树> |
| 学号 | <021800317><031801327> |
| 结对同学的博客链接 | < https://www.cnblogs.com/fire123/p/13803040.html > |
| 本作业的博客链接 | < https://www.cnblogs.com/021800317jianshiwei/p/13800540.html > |
| GitHub项目地址 | https://github.com/PCWJSW/021800317-031801327 |
2.分工
021800317处理输入数据，031801327设计网页界面
3.PSP
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 10 | 30 |
| Estimate | 估计这个任务需要多少时间 | 300 | |
| Development | 开发 | 120 | 150 |
| Analysis | 需求分析 (包括学习新技术) | 180 | 300 |
| Design Spec | 生成设计文档 | 15 | 40 |
| Design Review | 设计复审 | 5 | 20 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 5 | 15 |
| Design | 具体设计 | 10 | 30 |
| Coding | 具体编码 | 320 | 380 |
| Code Review | 代码复审 | 20 | 30 |
| Test | 测试（自我测试，修改代码，提交修改） | 30 | 60 |
| Reporting | 报告 | 10 | 30 |
| Test Report | 测试报告 | 10 | 30 |
| Size Measurement | 计算工作量 | 10 | 10 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 20 | 60 |
| 合计 | 775 | 1185 |
4.解题思路描述与设计实现说明
代码实现思路，文字描述
- 通过 Html 中的文本框读取输入的文本数据。
- 处理文本内容并生成树
流程图
代码片段
信息处理
$(".graph-wrapper").empty()
var text = $(".input-area").val();//提取文本框内容
var trees = text.split('\n\n\n');//每隔两行建一个树
for(let k=0;k<trees.length;k++){
let page = trees[k].split('\n\n');/*每隔一行建一页*/
let data = new Object();//data作为树的根
let map = new Map();
data.children = new Array();
for(let j=0;j<page.length;j++)//循环处理每个页
{let lines=page[j].split('\n');
for (let i = 0; i < lines.length; i++) {//循环处理每行文字
if (lines[i] === '') continue;
if(lines[i].slice(0,2)=="导师")//找到导师信息
{data.name = lines[i].split('：')[1];}
else if (lines[i].slice(0,1)=='2'&& lines[i].slice(4,5)=='级') {//找到学生年级信息
var children = new Object();
children.name = lines[i].split('：')[0];
children.children = new Array();/*子数组*/
item=lines[i].split('：')[1].split('、');
lines[i].split('：')[1].split('、').forEach(item => {
var t = new Object();
t.name = item;
t.value = 'NONE';
children.children.push(t);
map.set(item, t);/*set方法可以向Map对象添加新元素。*/
})
data.children.push(children);
}
else {//找到学生技能树
let [name, skill] = lines[i].split('：');
children.children.value=skill;
map.get(name).value = skill;
}
5.附加特点和展示
创意设计
- 调整的了文本框透明度，
- 丰富了树状图生成的动画效果
- 添加背景，提高界面美观度
- 不同树之间有框架间隔
实现思路
通过html文件编程设计，在文件夹添加图片，调整参数实现
实现代码
背景
margin: 0;//设置所有外边距属性
padding: 0;
font-family: sans-serif;
background: url('03.PNG') no-repeat center 0px;//背景插图
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
树形图
myChart.setOption(option ={
tooltip: {/*提示工具在鼠标移动到指定元素后触发*/
trigger: 'item',//触发数据
triggerOn: 'mousemove',
formatter: (item) => {
return item.value;
}
},
toolbox: {
show: true,/*展示*/
feature: {
saveAsImage: {}/*保存图片*/
}
},
series: [{//数据系列
type: 'tree',//树形图
data: [data],//获取数据
top: '10%',//设置位置
left: '7%',
bottom: '21%',
right: '25%',
symbolSize: 7,//标志大小
edgeShape: 'polyline',
edgeForkPosition: '63%',
initialTreeDepth: 3,
lineStyle: {
width: 2,
},
label: {
backgroundColor:'#12' ,
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {//叶节点
label: {
backgroundColor: '#fff',
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 255，0.5)'
}
}
},
expandAndCollapse: true,
animationDuration: 550,//逐渐显现
animationDurationUpdate: 750//逐渐显现
}]
});
window.addEventListener('resize', function () {
myChart.resize()
});
}
文本框
<div class="wrapper clearfix">
<div class="row bg"></div>
<div class="main clearfix">
<div class="text-container">
<div class="description">
<span class="tip"><h3><font color="ghostwhite">请输入学术家族树</h3></span>
<button style="background-color: powderblue;" class="run btn btn-primary btn-sm" onclick="analyse()"><h6>一键生成：）</h6></button>//按钮
</div>
<textarea cols="30" rows="10" class="input-area form-control"></textarea>//输入文本框
</div>
<div class="graph-wrapper">//输出框架
<!-- <div id="main" style="width: 100%;height:300px;"></div> -->
<div id="graph" style="width: 100%;height:350px;"></div>
</div>
</div>
</div>
实际成果
6.目录说明和使用说明
目录说明
- index.html 中包含了 html 框架和 JavaScript 的内容，点击进入网页实现功能
- css、js、bootstrap和echart这几个文件中包含了使用的框架等依赖文件
- PNG 文件是背景图片
使用说明
- 测试人员在总目录下下载文件，运行index.html
7.单元测试
测试工具使用
使用QUnit进行测试
为什么选择QUnit作为单元测试工具？
QUnit是一个非常强大的javascript单元测试框架，最初由jQuery的发明人John Resig开发而成，而且是 jQuery 的官方测试套装，可以帮你调试代码，最重要的是体量很小，几乎不占内存。
，我们通过qunit自带的assert判断出对于单树，双树，三棵树（多棵树）是可以检验通过的
首先要下载qunit的相关js和css，目前版本v1.23.1，下载地址： 打开官网http://qunitjs.com，右侧即download，选择要下载的文件。
也可以通过npm安装：npm install --save-dev qunitjs
也可以直接输入下方地址下载：
https://code.jquery.com/qunit/qunit-1.23.1.js
https://code.jquery.com/qunit/qunit-1.23.1.css
新建一个html文件，先引入必要js和CSS文件，例如 ，QUnit.test( name, callback ) 增加一个测试案例。在测试用例中用Qunit的Main methods和Assertions对目标代码块进行测试。
测试代码和函数
测试思路
单元测试我们通过比对analyse函数生成树叶子结点时的值与预期值真即1进行比对，若是一致则说明叶子结点已经展开，可以较精确的估计出是否产生我们想要的生成树
8.GitHub截图
9.困难解决
困难
- 对于HTML + CSS + JavaScript设计没有接触过
- 刚接触框架不懂怎么去编程和设计界面，
- 两个人结对做出的代码在树结构，信息处理，界面设计等都会有冲突，浪费部分时间
解决方法
- 在网上查看了不少博客和资料，和伙伴在私下多交流，最后基本解决了问题
收获
- 平时要多积累知识,多和队友沟通才行
- 对于GitHub合作有所掌握
10.评价队友
- 优点：页面设计好，在文本处理方面也给了很多帮助，遇到问题会相互交流解决
- 要改进的地方：没有太早做作业，沟通学习时间少
