福州大学结对编程作业(2)


这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 1.学习并熟悉web前端(HTML+CSS+JavaScript);
2.提高结对编程的效率
学号 031802304
031802321

学号 姓名 GitHub主页
031802304 陈盛发 https://github.com/Chensfve
031802321 刘梓洋 https://github.com/ssbread

Partner’s Blog https://www.cnblogs.com/ssbread/
My Blog https://www.cnblogs.com/Chensfv/
Our Repository https://github.com/Chensfve/031802304-031802321

  • Work of us 分工

    • 阶段一:一起编码一起快乐 (10.08 - 10.11)
    • 阶段二:
      031802321:修改优化代码
      031802304:编写blog、draw图 (10.11 - 10.11)
    • 阶段三:both:冲呀
  • PSP表格

Personal Software Process Stages | 预估耗时(分钟)| 实际耗时(分钟)|
--|:--😐--😐--:
Planning计划|30|30|
Estimate估计这个任务需要多少时间|900|920|
Development开发|30|30|
Analysis需求分析 (包括学习新技术)|120|120|
Design Spec生成设计文档|30|30|
Design Review设计复审|10|10|
Coding Standard代码规范 (为目前的开发制定合适的规范)|10|10|
Design具体设计|60|60|
Coding具体编码|600|600|
Code Review代码复审|10|10|
Test测试(自我测试,修改代码,提交修改)|60|50|
Reporting报告|10|10|
Test Report测试报告|10|10|
Size Measurement计算工作量|10|10|
Postmortem & Process Improvement Plan事后总结, 并提出过程改进计划|20|20|
|合计|930|920|


  • Solving Ideas && Design Implementation 解题思路与设计实现

  • 解题思路

    • 在仔细地阅读完题目后,我们有了初步的解题思路:
      • 将输入的数据进行字符分割
      • 将分割成的数据导入树状结构data数组里
      • 层级处理数据
      • 画树
      • 节点的伸缩与拓展
  • 流程图与数据流图

    • 流程图

数据流图
  • 0层DFD

  • 1层DFD

  • 关键的代码

    • 实现字符的分割
function trans(){
    var first = [];
    var second = [];
    var third = [];
	var ajob = [];
	var dao_name=[];
	
    var dat = document.getElementById("tree").value;
	first = dat.split("\n\n\n");
	//console.log(first);
	
	for(var i = 0;i<first.length;i++)
	{
		var data=[];
		second = first[i].split("\n\n");
		//console.log(second);
		third=second[0].split("\n");
		for(var j = 0;j<third.length;j++)
		{
			ajob=third[j].split(":");
			var job = ajob[0];
			var name1 = ajob[1];
			//console.log(job);
			if(job=="导师")
			{
				dao_name.push(job);
				data.push({name:name1,value:"导师",sj:"-"});
				//console.log(data);
			}
			else
			{
				var childd = name1.split("、");
				//console.log(childd);
				data.push({name:job,value:job,sj:"导师"});
				
				for(var k=0;k<childd.length;k++)
				{
					data.push({name:childd[k],value:childd[k],sj:job});
				}
				
			}
		}
		for(var j = 1;j<second.length;j++)
		{
			var ajob1=second[j].split(":");
			var name11=ajob1[0];
			var jineng=ajob1[1].split("、");
			//console.log(ajob1);
			//console.log(name11);
			for(var k=0;k<jineng.length;k++)
			{
				data.push({name:jineng[k],value:jineng[k],sj:name11});
			}
		}
	}	
}
  • 数据处理成层级关系的数据
function transData(a, idStr, pidStr, childrenStr) {
	var r = [], hash = {}, id = idStr, pid = pidStr, children = childrenStr, i = 0, j = 0, len = a.length;
	for (; i < len; i++) {
		hash[a[i][id]] = a[i];
	}
	for (; j < len; j++) {
		var aVal = a[j], hashVP = hash[aVal[pid]];
		if (hashVP) {
			!hashVP[children] && (hashVP[children] = []);
			hashVP[children].push(aVal);
		} else {
			r.push(aVal);
		}
	}
	return r;
}
  • 在页面上画树
function drawTree(treeData,nname="") {
	var  myChart = echarts.init(document.getElementById(nname));//div元素节点的对象
	myChart.setOption({
		tooltip : {
			trigger : 'item',
			triggerOn : 'mousemove'
		},
		series : [ {
			type : 'tree',
			name : 'TREE_ECHARTS',
			data : treeData,
			top : '2%',
			left : '10%',
			bottom : '2%',
			right : '15%',
			symbolSize : 7,
			label : {
				normal : {
					position : 'left',
					verticalAlign : 'middle',
					align : 'right'
				}
			},
			leaves : {
				label : {
					position : 'right',
					verticalAlign : 'middle',
					align : 'left'
				}
			},
			expandAndCollapse : true ,
			initialTreeDepth : 2  //展示层级数,默认是2
		} ]
	});
	
	
}

  • Unique Spots

    • 1.背景图片使用小清新的风格,保护我们可爱的眼睛
    • 2.左边文本输入即可在右侧看到树的刻画,方便快捷
    • 3.缩放动画流畅,带来全新视觉体验

  • Catalogue and Using Instruction 目录和使用说明

    • 目录(可下载压缩包tree.zip或是直接下载响应文件)

    • index.html(主页)

    • treeEchart.js (字符分割与树的建立)

    • echarts.js echarts.min.js (节点操作)

    • test.txt (测试数据)

    • Readme.md (目录与使用说明)

    • 1.jpg

    • 使用说明

    • 操作

      1.到仓库中(仓库地址: https://github.com/Chensfve/031802304-031802321 ) 下载目录中文件
      2.打开index.html(请使用Chrome),点击文本框,按照以下的文本格式输入数据

    • 文本格式

      学术家族树以文本形式输入,点击提交文本框,考虑学术家族树的文本格式是这样的:

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四

刘六:JAVA、数学建模

李二:字节跳动、京东云


导师:张森
2016级博士生:天一、王二、吴无
2015级硕士生:李四、王误、许六
2016级硕士生:刘亦、李尔、李三
2017级本科生:刘陆、琪七、司四

刘陆:Python、数学建模

李尔:字节跳动、阿里云
  输出:
    输出为树状结构,非叶节点可伸缩扩张,深色的节点表示可以扩张

  • Unit Test 单元测试

    • 1.我们采用的单元测试工具是Mocha,调用Node中的断言库进行测试

    • 2.简易测试教程:

    • 3.测试函数&部分代码

    • 4.构造测试数据思路
      我们尝试了正确数据可能出现的情况以及几种标志错误数据的情况,大部分覆盖让测试更加准确

    • 5.评测人员可按照仓库文件目录中的test.txt中的数据样例进行测试

      • 测试1

      • 测试2

      • 测试3

      • 测试4

      • 测试5


  • Commit 代码签入



  • Problems and Solution 遇到的问题及解决方案

  • 1

    • P:JavaScript的陌生
    • S:不断编码不断报错,失败中前行
    • 已逐渐熟悉JavaScript的使用,熟练度get!
  • 2

    • P:字符分割
    • S:多重for循环不可取
    • 编码初期问题,已解决
  • 3

    • P:关联树的建立
    • S:仍在无限DeBug中

  • Comments on him 评价队友

    • Chen to Liu:坚持不懈、锲而不舍值得学习,勤奋刻苦、火力全开需要休息,github的use还需要黑科技(PS:下次作业多给点时间ಥ_ಥ)
    • Liu to Chen:代码黑洞、审美天敌仍需加强,起早贪黑、孜孜不倦继续努力,github的use需要你的help(PS:Fighting against!)

posted @ 2020-10-12 13:27  Chensfv  阅读(131)  评论(0编辑  收藏  举报