软工结对第二次作业
目录
- 团队成员
- 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比较熟悉，这次样式的编写主要是他负责。他真的是一个很可靠的人。
不足：光芒四射，暂未发现！
