软工第二次结对作业
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| 这个作业的目标 | 需要在网页页面上呈现树形结构形式的师门树 |
| 学号 | <031802619><031802617> |
| 结对同学的博客链接 | https://www.cnblogs.com/blakehong/ |
| Github项目地址 | https://github.com/Rainy12138/031802619-031802617 |
一、PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 20 | 30 |
| Estimate | 估计这个任务需要多少时间 | ||
| Development | 开发 | 120 | 180 |
| Analysis | 需求分析 (包括学习新技术) | 50 | 80 |
| Design Spec | 生成设计文档 | 60 | 60 |
| Design Review | 设计复审 | 30 | 30 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 20 | 30 |
| Design | 具体设计 | 60 | 100 |
| Coding | 具体编码 | 350 | 500 |
| Code Review | 代码复审 | 20 | 30 |
| Test | 测试（自我测试，修改代码，提交修改） | 20 | 30 |
| Reporting | 报告 | 60 | 60 |
| Test Report | 测试报告 | 60 | 70 |
| Size Measurement | 计算工作量 | 20 | 30 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 20 | 30 |
| Total | 合计 | 950 | 1300 |
二、具体分工:
031802619刘嘉伟：主要负责UI设计、编写代码、归纳总结
031802617林江鸿：主要负责项目思路要点、测试、归纳总结、博客撰写
三、解题思路描述与设计实现说明
解题思路描述：
分析题目的需求：首先我们需要在web页面提供一个文本框，然后在文本框中输入给定的师生信息，再把师生信息以树形结构的形式展现出来，内部主要有处理文本框返回值的函数以及生成树的函数。因此可知我们可以初步得到代码的组织与内部实现设计如下图所示：
设计实现说明：
1、以"博士生"、"硕士生"、"本科生"和"导师"为关键字切分数据
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={}
var ss = s.split(/、|\n|：|,|\r|\t|\ +/g);
console.log(ss);
var num1=0;
var num2=0;
var num3=0;
var num4=0;
var num5=0;
var num6=0;
var num7=0;
var ele;
var tc9=0;
var i=0;
if(ss[0]!="导师"){
alert("请输入以导师开头的格式！");
return;
}
else{
//处理导师节点
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();////////////////////
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]);
}
}
2、处理输入的信息
while(i<ss.length){
//添加技能和公司
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++;
}
}
}
else{
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();////////////////////
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]);
}
}
tc9++;
}
}
3、将信息以树结构呈现并添加折叠功能
$('.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();
});
});
四、附加特点设计与展示
- 输入信息后点击生成按钮就可以在下方生成师门树；
- 生成树可以进行展开、收缩；
- 每次输入的数据所生成的树可以覆盖上一次输入生成的树，无需在后续测试和使用时多次刷新；
五、目录说明和使用说明
目录说明
- 使用了分发地址的库文件，无需下载库文件,但是需要联网；文件夹内同样内置了库文件，若无法联网可引入后运行。
- style.css为网页样式。
- final为最终版本的文件，test和test2为编码过程中几种失败的策略。
使用说明
- 下载git项目，解压后
- 运行final.html，输入运行final.html，输入信息后点击按钮即可生成树
- 点击节点可以显示技能或经历信息后点击按钮，点击节点可以显示技能或经历。
六、实验成果展示
初始界面
点击节点可以显示技能或经历
七、单元测试
- 安装并配置 node.js
- 全局安装mocha npm install
- 将要测试的js拷贝到测试项目根目录，并创建 test 文件夹
- 在要测试的js文件中导出要测试的函数(比如要测试parse函数)
- 编写测试文件
- 在根目录输入mocha，运行测试
describe('异常情况', () => {
it('导师信息异常', () => {
assert.throws(() => {
testJs.parse(`张三
2016级博士生：天一、王二、吴五、A
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七
刘六：JAVA、数学建模
李二：字节跳动、京东云
王二: Python`)
}, Error);
});
测试数据思路:先测试单棵树的情况，就类似给出的测试数据，然后测试当一个导师是另一个导师的学员的情况，最终结果的树会合并。测试人员可能会输入一个不符合命名标准的数据，此代码并没有判断错误命名的能力。
八、github记录
九、 遇到的代码模块异常或结对困难及解决方法
1、问题描述：在多组师生信息的输入时，不知道以什么为关键字为标志信息，一直无法正确进行切分，提取出每组的师生信息。
做过哪些尝试：百度、查资料、问同学朋友、编写代码尝试
是否解决：已解决
2、问题描述：在第二迭代时尝试了动态树，但是发现无法扩展后续内容，即无法将个人信息插入树中。
做过哪些尝试：尝试通过提示框将额外内容推出，但是不美观
是否解决：未解决
十、评价你的队友
是一个可靠认真的队友，会花很多时间学习自己没有接触过的html&css，也能很认真的完成小组分配的任务。
