软件工程实践2019第五次作业——结对编程的编程实现

博客链接

点击->我的博客
点击->我的队友即是我
点击->本次作业博客

---

点击->GitHub项目地址

---

具体分工

设计框架，代码编写，UI设计，测试

---

PSP表格

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

---

解题思路与设计实现

代码组织与内部实现设计（类图）

• 在 < head > 中设计层叠样式，在 < body > 中设计文本框和按钮，用来输入文本，然后在 < script > 中对文本进行操作，然后生成学术家族树
• 学术家族树是由导师和学生构成：导师名下有不同学位的选项；每个学位选项下有不同年级的选项；每个年级选项下有该学位年级的学生。

算法的关键、关键实现部分流程图与重要的代码片段

 document.getElementById("id1").value = "";
document.getElementById("id2").addEventListener('click',tree_sub);
document.getElementById("id3").addEventListener("click",tree_clear);
var part1 = /导师\：[\u4e00-\u9fa5]{2,5}/g;
var part2 = /\d{4}级博士生\：.*/g;
var part3 = /\d{4}级硕士生\：.*/g;
var part4 = /\d{4}级本科生\：.*/g;
var part5 = /\d{4}/;
var number=0;
function tree_ana(content,num){
    var teacher = content.match(part1);
    if(teacher == null)
    {
        alert("error");
        return;
    }
    var t_div = document.createElement('div');
    t_div.setAttribute("id","tree_"+number+num);
    document.getElementById("tree").appendChild(t_div);
    var r_tree = document.createElement('ul');
    r_tree.setAttribute("id","root"+number+num);
    document.getElementById("tree_"+number+num).appendChild(r_tree);
    teacher = teacher.join("").split("：");
    var ele = document.createElement('li');
    ele.setAttribute("id","teacher"+number+num);
    ele.innerHTML = teacher[1];
    document.getElementById("root"+number+num).appendChild(ele);
    var doctor = content.match(part2);
    var ma = content.match(part3);
    var ug = content.match(part4);
    if(doctor!=null||ma!=null||ug!=null)
    {
        var degree = document.createElement("ul");
        degree.setAttribute("id","degree"+number+num);
        document.getElementById("teacher"+number+num).appendChild(degree);

    }
    if(doctor!=null)
    {
        var doctor_degree = document.createElement("li");
        doctor_degree.setAttribute("id","doctor_degree"+number+num);
        doctor_degree.innerHTML = "博士生";
        document.getElementById("degree"+number+num).appendChild(doctor_degree);
        var doctor_grade = document.createElement("ul");
        doctor_grade.setAttribute("id","doctor_grade"+number+num);
        document.getElementById("doctor_degree"+number+num).appendChild(doctor_grade);
        for(var i = 0;i < doctor.length;i++)
        {
            var str = doctor[i];
            str = str.split("：");
            var ele1 = document.createElement('li');
            ele1.innerHTML = str[0].match(part5);
            ele1.setAttribute("id","grade"+number+num+i);
            document.getElementById("doctor_grade"+number+num).appendChild(ele1);
            var doctor_name = document.createElement("ul");
            doctor_name.setAttribute("id","doctor_name"+number+num+i);
            document.getElementById("grade"+number+num+i).appendChild(doctor_name);
            var name = str[1].split("、");
            for(var j = 0;j < name.length;j++)
            {
                var ele11 = document.createElement('li');
                ele11.innerHTML = name[j];
                ele11.setAttribute("id","name"+number+num+i+j);
                document.getElementById("doctor_name"+number+num+i).appendChild(ele11);
            }
        }
    }
    if(ma!=null)
    {
        var ma_degree = document.createElement("li");
        ma_degree.setAttribute("id","ma_degree"+number+num);
        ma_degree.innerHTML = "硕士生";
        document.getElementById("degree"+number+num).appendChild(ma_degree);
        var ma_grade = document.createElement("ul");
        ma_grade.setAttribute("id","ma_grade"+number+num);
        document.getElementById("ma_degree"+number+num).appendChild(ma_grade);
        for(var i = 0;i < ma.length;i++)
        {
            var str1 = ma[i];
            str1 = str1.split("：");
            var ele2 = document.createElement('li');
            ele2.innerHTML = str1[0].match(part5);
            ele2.setAttribute("id","grade1"+number+num+i);
            document.getElementById("ma_grade"+number+num).appendChild(ele2);
            var ma_name = document.createElement("ul");
            ma_name.setAttribute("id","ma_name"+number+num+i);
            document.getElementById("grade1"+number+num+i).appendChild(ma_name);
            var name = str1[1].split("、");
            for(var j = 0;j < name.length;j++)
            {
                var ele22 = document.createElement('li');
                ele22.innerHTML = name[j];
                ele22.setAttribute("id","name1"+number+num+i+j);
                document.getElementById("ma_name"+number+num+i).appendChild(ele22);

            }
        }
    }
    if(ug!=null)
    {
        var ug_degree = document.createElement("li");
        ug_degree.setAttribute("id","ug_degree"+number+num);
        ug_degree.innerHTML = "本科生";
        document.getElementById("degree"+number+num).appendChild(ug_degree);
        var ug_grade = document.createElement("ul");
        ug_grade.setAttribute("id","ug_grade"+number+num);
        document.getElementById("ug_degree"+number+num).appendChild(ug_grade);
        for(var i = 0;i < ug.length;i++)
        {
            var str2 = ug[i];
            str2 = str2.split("：");
            var ele3 = document.createElement('li');
            ele3.innerHTML = str2[0].match(part5);
            ele3.setAttribute("id","grade2"+number+num+i);
            document.getElementById("ug_grade"+number+num).appendChild(ele3);
            var ug_name = document.createElement("ul");
            ug_name.setAttribute("id","ug_name"+number+num+i);
            document.getElementById("grade2"+number+num+i).appendChild(ug_name);
            var name2 = str2[1].split("、");
            for(var j = 0;j < name2.length;j++)
            {
                var ele33 = document.createElement('li');
                ele33.innerHTML = name2[j];
                ele33.setAttribute("id","name2"+number+num+i+j);
                document.getElementById("ug_name"+number+num+i).appendChild(ele33);

            }
        }
    }
    $(function(){$("#tree_"+number+num+"").jstree({
        plugins : ["types"],
        'core' : {"check_callback" : true,},
        "types": {"default" : {"icon" :false,}}
    });});
    number++;
}
function tree_sub(){
    var msg = document.getElementById("id1").value;
    var msg_num = 0;
    if(msg == null) {alert("您输入的值为空！");}
    msg = msg.split("\n\n");
    for(var i = 0;i < msg.length;i++)
    {
        tree_ana(msg[i],msg_num);
        msg_num++;
    }
}
function tree_clear(){
    document.getElementById("id1").value = "";//重置输入框
}

---

特点设计与展示

多组师生信息输入、重置输入文本框

多棵学术家族树并存
-

---

目录说明与使用说明

目录的组织

• 插件包：vakata-jstree-c9d7c14
• 背景图片：0173e8561b589e32f87557013cf40b.jpg@1280w_1l_2o_100sh.jpg
• README文档：REAMDE.md
• HTML: index.html
• 请将上述的文件统一下载并放入同一文件夹中，以防无法完整显示

网页的使用

- 文本框输入文本信息
- 提交按钮提交信息
- 重置按钮重置文本框内容

- 双击打开或关闭分支

---

单元测试

测试工具：Mocha
学习网站：http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html

---

GitHub的代码签入记录

---

代码异常模块

• 一

  • 问题描述：如果在一组数据中写重复的学生信息，不能合并，会生成两个一样的分支
  • 尝试：给每个导师和学生予唯一的id和pid，重复的学生删除
  • 是否解决： 否
  • 收获：了解到bootstrap、AntV G6 可视化等等可以做

• 二

  • 问题描述：做不到关联树
  • 尝试：百度
  • 是否解决： 否
  • 收获： 否

---

评价队友

值得学习的地方

暂未发现

需要改进的地方

学习能力还有待提高

---