软工结对第二次作业

目录

  • 团队成员
    • 1、相关链接:
    • 2、具体分工:
    • 3、PSP表格
    • 4、解题思路描述与设计实现说明
    • 5、附加特点设计与展示
    • 6、在博客中给出目录说明和使用说明
    • 7、单元测试
    • 8、github 签入记录
    • 9、遇到的代码模块异常或结对困难及解决方法
    • 10、评价队友

正文

这个作业属于哪里 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 结对编程,学习前端,单元测试,github
学号 031802408

团队成员

学号 姓名
03182408 黄文松
03182409 江启良

1.相关链接

标题 链接
结对同学博客链接 https://www.cnblogs.com/jql666/p/13797006.html
本作业博客的连接 https://www.cnblogs.com/dronw/p/13771602.html
仓库地址 https://github.com/Mrwensong/031802408-031802409

2.具体分工

 031802408黄文松完成js部分和单元测试,主要的核心代码以及布局等方面
 031802409江启良完成html,css和美化页面,以及博客园编写和部分算法

3.PSP表格

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

4、解题思路描述与设计实现说明

程序总体思路


导师节点的流程图

学生节点的流程图

带技能学生节点的流程图

根据在树中不同的分类,来增加主节点。

根据正则表达式来分割文本,并将这些文本存入ss数组当中。

//输入处理
   		var s =document.getElementById("text1").value;//将文本框的内容读入
		//将导师:,级研究生:的冒号去掉
		var reg = new RegExp(/导师:/g);
		s=s.replace(reg,"导师,");
		var reg = new RegExp(/级博士生:/g);
		s=s.replace(reg,"级博士生,");
		var reg = new RegExp(/级硕士生:/g);
		s=s.replace(reg,"级硕士生,");
		var reg = new RegExp(/级本科生:/g);
		s=s.replace(reg,"级本科生,");
		var reg = new RegExp(" ","g");
		s=s.replace(reg,"");
		var reg = new RegExp(":","g");
		//根据冒号来确定学生拥有的技能
		s=s.replace(reg,"?:");
		var length=s.length;
		if (s[length-1].match(/\n|\r/g))//文末的空行判断
		{
			alert("文本末不能有空行!");
			return;
		}
		var reg = /\n(\n)*( )*(\n)*\n/g;
		s = s.replace(reg,"\n");
   		var dic={}//节点的名字与id 相对应的字典
		var  ss = s.split(/、|\n|:|,|\r|\t|\ +/g); //通过符号来分割字符
		console.log(ss);//调试

导师节点的处理

                 while(i<ss.length){
		for(;i<ss.length;i++){
			console.log(ss[i]);
			if(i==0){
				if(ss[i]=="导师"){//第一个导师
					ele='<li id="id4'+num4+'">'+
					'<span  id="id5'+num5+'" class="badge badge-success"> '+ss[i]+'</span>'+
					'</li>';
					$("#Tree").html(ele);
					num4++;
					i++;
					ele='<ul><li id="tc9'+tc9+'">'+
					'<span id="teacher"> '+ss[i]+'</span>'+
					'</li></ul>';
					$('#id5'+num5).after(ele);
					dic[ss[i]]="tc9"+tc9.toString();//记录导师节点的id
					num5++;
				}
				else{
					break;
				} 
				console.log(ss[i]);
			}
			else{//非第一个导师
				if(ss[i]=="导师"){
					ele='<li id="id4'+num4+'">'+
					'<span  id="id5'+num5+'" class="badge badge-success"> 导师</span>'+
					'</li>';
					$('#id4'+(num4-1)).after(ele);
					num4++;
					i++;
					ele='<ul><li id="tc9'+tc9+'">'+
					'<span id="teacher"> '+ss[i]+'</span></li></u1>';
					$('#id5'+num5).after(ele);
					dic[ss[i]]="tc9"+tc9.toString();
					num5++;
            				}
				else{
						break;
				} 
				console.log(ss[i]);
			}	
		}

学生节点处理

            if(ss[i].match(/(([0-9]+)级博士生)|(([0-9]+)级硕士生)|(([0-9]+)级本科生)/g)){
		ele='<li><span id="id1'+num1+'" class="badge badge-success"> </span></li>';
		$('#tc9'+tc9).after(ele);
		$('#id1'+num1).html(ss[i]);
		dic[ss[i]]="id1"+num1.toString();//根据节点值存id
		console.log(ss[i]);
		i++;
		var j=1;
		for(;i<ss.length;i++){
            		console.log(ss[i]);
			if(ss[i].match(/(([0-9]+)级博士生)|?$|(([0-9]+)级硕士生)|(([0-9]+)级本科生)|导师/)){
				i--;
				break;
			}
			if(j==1){
				ele='<ul><li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li></u1>';
				$('#id1'+num1).after(ele);
				dic[ss[i]]="id3"+num3.toString();//
				j++;
			}
			else{
				ele='<li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li>';
				dic[ss[i]]="id3"+num3.toString();//
				$('#id3'+(num3-1)).after(ele);
			}
			$('#id2'+num2).html(ss[i]);
			num2=num2+1;
			num3=num3+1;
			console.log(ss[i]);
            	}  
		num1=num1+1;
	}
	else{
		break;
	}	
	i++;
	if(ss[i]=="导师"){
		break;
	}
	console.log(ss[i]);
	}			

有技能的学生节点处理

    if(ss[i].match(/?$/g)){//通过?来区分拥有技能的节点
	console.log(ss[i]);
	ss[i]=ss[i].replace("?","");
	var j=1;
	var k=1;
	for(;j<ss.length;j++){//搜索拥有技能的那个节点
		if(ss[i]==ss[j]){
				break;
		}
	}
	for(;i<ss.length;i++)
	{
            	if(ss[i].match(/?$/g)){
            		break;
		}
		if(k==1){
			k++;
		}
		else if(k==2){
            		ele='<ul ><li id="id6'+num6+'"><span id="id7'+num7+'"></span></li></ul>';
			$('#'+dic[ss[j]]).after(ele);
			$('#id7'+num7).html(ss[i]);
			num6++;
			num7++;
			k++;
		}
		else{
			ele='<li id="id6'+num6+'"><span id="id7'+num7+'"> </span></li>';
			$('#id6'+(num6-1)).after(ele);
			$('#id7'+num7).html(ss[i]);
			num6++;
			num7++;
		}
	}
	}

5、附加特点设计与展示

  • 结点收缩展开
  • 可支持多组数据同时输入,多棵树并存;
  • 每次输入的数据所生成的树可以覆盖上一次输入生成的树,无需在后续测试和使用时多次刷新;

部分代码:

 折叠部分:
 $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } 
                else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
            
            $(document).ready(function()
            {
                $("#Tree ul li").next("ul").hide();
                $("#Tree ul li").click(function()
            {
                $(this).next("ul").toggle();
            });
});

成果展示


6、在博客中给出目录说明和使用说明

目录组织:

all文件:
主体是1.html,style.css是自己编码的样式,jquery-3.4.1.min.js是我们所使用的框架
图3.jpg是自己用PS加工的装饰图片
其余:
是之前使用的素材图片

测试人员运行:

在总目录下下载all文件
运行1.html

7、单元测试

1.测试工具:Mocha
学习网站:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
在学习网站下载好mocha
简易教程:
1、在要测试的文件目录下进入git,并提前下载好node.js
2、在安装Node的前提下,在git Bash Here运行命令:
cd mocha-demos

npm install

3、安装全面环境:
npm install --global mocha

4、安装断言库chai:
npm install chai

5、对分割文字操作的测试,并运行测试文件:
mocha test.js

构造测试数据的思路:

  • 考虑到单组输入和多组输入
  • 考虑到老师只有一个类别的学生时的输入
  • 考虑到无老师,只有学生时的输入
  • 考虑到文末不小心添加空行的输入
    以下是部分测试代码以及结果
var analysis = require('./work.js');
var expect = require('chai').expect;
var message1="李二";
var message2="琪七";
var message3="司四";
var message4="王五";
var message5="刘六";
var message6="许六";
var message7="张三";
var message8="刘一";
var message9="天一";
var message10="吴五";
describe('测试',function(){
        it('学生节点测试', function() {//测试实例
        expect(analysis()).to.include(message1);//expect断言:analysis函数返回的数组中包含学生姓名“李二”
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message2);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message3);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message4);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message5);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message6);
        });
        it('导师节点测试', function() {//expect断言:analysis函数返回的数组中包含导师姓名“张三”
            expect(analysis()).to.include(message7);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message8);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message9);
        });
        it('学生节点测试', function() {
            expect(analysis()).to.include(message10);
        });
    
});






单组输入和多组输入

导师只有一类学生

当开头没有导师时,报错

当结尾有空行时,报错

8、github 签入记录

9、遇到的代码模块异常或结对困难及解决方法

1、通过正则表达式来分割文字(已解决)
尝试:第一次通过百度找了个代码实现了文字的分割,但是后面通过谷歌浏览器的调试,发现百度的代码里面的replace方法使用错误,后面经过反复查CSDN解决了这个问题。
收获:对正则表达式的用法更了解了。
2、在刚开始写代码的时候,树节点顺序错乱(已解决)
尝试:通过百度,发现谷歌F12的调试功能,并通过console显示关键点
调试功能网站:https://www.html.cn/doc/chrome-devtools/console/
收获:调试代码能力大大提升
3、做不到将不同的树关联到一起(如这棵树的导师是另一个导师的学生,将两棵树合并)(未解决)
尝试:通过字典标记各个节点的id,通过id的检索来合并树,但是合出来的树样式很怪
关联树测试版代码已发到github
关联树测试版图片

10、评价队友

值得学习的地方:我的搭档是一个行动力很强的人。他对html和css比较熟悉,这次样式的编写主要是他负责。他真的是一个很可靠的人。
不足:光芒四射,暂未发现!

posted @ 2020-10-05 21:09  drown  阅读(86)  评论(0编辑  收藏