这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020/ |
---|---|
这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
这个作业的目标 | <在网页页面上呈现树形结构形式的师门树> |
学号 | <021800317><031801327> |
结对同学的博客链接 | https://www.cnblogs.com/021800317jianshiwei/ |
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.评价队友
- 优点:认真专注力强,自主学习能力突出,遇到问题会相互交流解决
- 要改进的地方:没有太早做作业,沟通学习时间少