福州大学结对编程作业（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  阅读(140)  评论(0)  编辑  收藏  举报