Software Engineering 2019 pair programming work

Blog link

Wang Yu: https://www.cnblogs.com/fishred/
Yang Wenyan: https://www.cnblogs.com/address2019/
job blog: https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/ 8736

GitHub project address

https://github.com/fishred2941214/031702409-031702411

Specific division of labor

Wang Yu: writing code, ui design
Yang Wenyan: jstee use, test

PSP table

PSP2.1	Personal Software Process Stages	It is expected to take (minutes)	The actual time-consuming (minutes)
Planning	Program (this task requires much time estimate)	60	60
Development	Develop	1505	1295
Analysis	Needs analysis (including learning new technologies)	240	360
Design Spec	Generate design documents	60	30
Design Review	Design Review	30	10
Coding Standard	Code specifications (development of appropriate norms for the current development)	5	5
designed	Specific design	60	40
Coding	Specific coding	1080	960
Code Review	Code Review	30	10
Test	Test (self-test, modify the code, submit modifications)	200	260
Reporting	report	100	130
test repor	testing report	30	30
Size Measurement	Computing workload	10	10
Postmortem&Process Improvement Plan	Hindsight and propose process improvement plan	60	90
total		1765	1735

Problem-solving ideas and design implementation

Problem-solving ideas

In the text box input data
In the analysis carried out in the text input function decomposition, to identify the relevant node, create a corresponding div , ul , li tags
Use jstree plug Spanning Tree
Beautification interface

Design and Implementation

JsTree plug

$(function(){$("#tree_"+k+num+"").jstree({
        plugins : ["types","contextmenu"], 
        'core' : {
                    //允许callback，为了后面进行创建、重命名、删除、移动或复制等操作
                    "check_callback" : true,},
      "types": {
          "default" : {
            "icon" :false,  // 关闭默认图标
          },
      },
      'contextmenu':{
                    'items' : {
                        'add':{
                            'label':'新增分类',
                            'action':function(obj){
                                //reference获取当前选中节点的引用
                                var inst = jQuery.jstree.reference(obj.reference);
                                //通过get_node方法获取节点的信息，类似于实例对象
                                var clickedNode = inst.get_node(obj.reference);
                                /*
                                    inst.create_node 参数1:父节点  参数2:新节点的数据
                                    参数3: 1）first：当前节点下的头部新增节点
                                           2）last：当前节点下的尾部新增节点
                                           3）before：当前节点同级的上部新增节点
                                           4）after：当前节点同级的下部新增节点
                                    参数4:回调函数
                                    参数5:Boolean类型,内部参数，指示父节点是否成功加载
                                */  
                                var newNode = inst.create_node(clickedNode,
                                    {    //'id': 'ajson20',
                                        //'parent' : 'ajson2',
                                        'icon' : 'jstree-file',
                                        'text':'新节点'},'last',function(node){
                                        //回调返回创建后点节点，给新节点改名
                                        inst.edit(node,node.val);
                                    },'');
                            }
                        },
                        'rename':{
                            'label':'修改分类',
                            'action':function(obj){
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);    
                                inst.edit(obj.reference,clickedNode.val);
                            }
                        },
                        'delete':{
                            "label": "删除分类",
                            'action':function(obj){
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                inst.delete_node(obj.reference);
                            }
                        }
                    }
                }
      });});

JsTree is a jquery plugin, you first need to use a reference jquery

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>//通过 CDN引用jquery
<script src="./vakata-jstree-c9d7c14/dist/jstree.min.js"></script>      // 引入jstress定义的样式
<link rel="stylesheet" href="./vakata-jstree-c9d7c14/dist/themes/default/style.min.css"/>

More detailed usage, you can view the official website or search tutorial. Official website address: https://www.jstree.com

The key code - create text decomposition and the corresponding label

 //用正则表达式提取输入内容中的导师和不同届学生的信息
    var patt1 = /导师\：[\u4e00-\u9fa5]{2,5}/g;
    var patt2 = /\d{4}级博士生\：.*/g;
    var patt3 = /\d{4}级硕士生\：.*/g;
    var patt4 = /\d{4}级本科生\：.*/g;
    var patt5 = /\d{4}/;
    var k=0;//k值用来记录一共进行了几次输入
    function empty(){
      document.getElementById("original_tree").value = "";//清空输入框
    }
    function analysis(content,num){
      
      var teacher = content.match(patt1);//提取出导师信息
      if(teacher == null)
      {
        alert("您输入的格式不正确！");//输入为空或输入无关信息或没有导师信息时，提示输入不正确

        return;
      }
      var t_div = document.createElement('div');
      t_div.setAttribute("id","tree_"+k+num);
      document.getElementById("tree").appendChild(t_div);
      var r_tree = document.createElement('ul');//创建根节点
      r_tree.setAttribute("id","root"+k+num);
      document.getElementById("tree_"+k+num).appendChild(r_tree);
      teacher = teacher.join("").split("：");//所有的join和split操作均为了去除输入中的多余符号，提取所需信息，此处为获取导师名
      var ele = document.createElement('li');
      ele.setAttribute("id","teacher"+k+num);//添加一个名为导师的节点
      ele.innerHTML = teacher[1];//内容为导师姓名
      document.getElementById("root"+k+num).appendChild(ele);
      var doctor = content.match(patt2);
      var master = content.match(patt3);
      var undergraduate = content.match(patt4);
      //若该导师名下有至少一名学生，则创建代表学位的节点
      if(doctor!=null||master!=null||undergraduate!=null)
      {
        var degree = document.createElement("ul");
        degree.setAttribute("id","degree"+k+num);
        document.getElementById("teacher"+k+num).appendChild(degree);
        
      }
      //该导师有博士学生，则为该导师添加博士类节点，并按照入学年份对学生进行分类，以下的硕士类和本科生类相同
      if(doctor!=null)
      {
        var doctor_degree = document.createElement("li");
        doctor_degree.setAttribute("id","doctor_degree"+k+num);
        doctor_degree.innerHTML = "博士生";
        document.getElementById("degree"+k+num).appendChild(doctor_degree);
        var doctor_grade = document.createElement("ul");
        doctor_grade.setAttribute("id","doctor_grade"+k+num);
        document.getElementById("doctor_degree"+k+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(patt5);//得到入学年份
          ele1.setAttribute("id","grade"+k+num+i);
          document.getElementById("doctor_grade"+k+num).appendChild(ele1);
          var doctor_name = document.createElement("ul");
          doctor_name.setAttribute("id","doctor_name"+k+num+i);
          document.getElementById("grade"+k+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"+k+num+i+j);
           document.getElementById("doctor_name"+k+num+i).appendChild(ele11);

          }
        }
      }
      if(master!=null)
      {
        var master_degree = document.createElement("li");
        master_degree.setAttribute("id","master_degree"+k+num);
        master_degree.innerHTML = "硕士生";
        document.getElementById("degree"+k+num).appendChild(master_degree);
        var master_grade = document.createElement("ul");
        master_grade.setAttribute("id","master_grade"+k+num);
        document.getElementById("master_degree"+k+num).appendChild(master_grade);
        for(var i = 0;i < master.length;i++)
        {
          var str1 = master[i];
          str1 = str1.split("：");
          var ele2 = document.createElement('li');
          ele2.innerHTML = str1[0].match(patt5);
          ele2.setAttribute("id","grade1"+k+num+i);
          document.getElementById("master_grade"+k+num).appendChild(ele2);
          var master_name = document.createElement("ul");
          master_name.setAttribute("id","master_name"+k+num+i);
          document.getElementById("grade1"+k+num+i).appendChild(master_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"+k+num+i+j);
           document.getElementById("master_name"+k+num+i).appendChild(ele22);

          }
        }
      }
      if(undergraduate!=null)
      {
        var undergraduate_degree = document.createElement("li");
        undergraduate_degree.setAttribute("id","undergraduate_degree"+k+num);
        undergraduate_degree.innerHTML = "本科生";
        document.getElementById("degree"+k+num).appendChild(undergraduate_degree);
        var undergraduate_grade = document.createElement("ul");
        undergraduate_grade.setAttribute("id","undergraduate_grade"+k+num);
        document.getElementById("undergraduate_degree"+k+num).appendChild(undergraduate_grade);
        for(var i = 0;i < undergraduate.length;i++)
        {
          var str2 = undergraduate[i];
          str2 = str2.split("：");
          var ele3 = document.createElement('li');
          ele3.innerHTML = str2[0].match(patt5);
          ele3.setAttribute("id","grade2"+k+num+i);
          document.getElementById("undergraduate_grade"+k+num).appendChild(ele3);
          var undergraduate_name = document.createElement("ul");
          undergraduate_name.setAttribute("id","undergraduate_name"+k+num+i);
          document.getElementById("grade2"+k+num+i).appendChild(undergraduate_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"+k+num+i+j);
           document.getElementById("undergraduate_name"+k+num+i).appendChild(ele33);

          }
        }
      }
 k++;
}

Create a label instance

<div id = "tree">
        <!---
          产生的数据格式如下：
          <ul>
            <li>张三
              <ul>
                <li>博士生
                  <ul>
                    <li>2016
                      <ul>
                        <li>
                          王五
                        </li>
                        <li>
                          李四
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        -->
      </div>

Features design and display

Web page support multiple input, multiple trees co-exist and provide modifications at the nodes, delete, and increase operational nodes.

Interface display

The initial interface

Support multiple input, multiple trees coexist

Be modified at the node, delete and add nodes

Directory Description and Instructions

Directory Description

Family Tree
- vakata-jstree-c9d7c14: Jstree plug-in files
- TREE.png: insert picture
- tree.css: page css file
- tree.html: page html file
- Forest .png: the inserted picture
REAMDE: Directory Description and Instructions

Instructions for use

Please family tree folder or to download the above file to download and put in the same folder, to prevent as incomplete.
Use browser to open tree.html file, you can see the page in a browser.
In the left side of the text box to enter data, click OK button, will be generated as a mentor to the root of the tree on the right side.
Click the small triangle, or double-click the node content, such as "Joe Smith" can expand or collapse nodes.
Right-click the node, you can modify, delete, add operation node.
- Modify the node: The node to rename.
- Delete Node: Remove the node and its subordinate node.
- Adding nodes: add a subordinate node in the node.

unit test

Selection tool: Mocha
learning: learning by testing framework Mocha tutorial examples that he started to follow tutorial on the use of time can probably understand the framework of
the input text data processing function test:

// analysis.test.js
var analysis = require('./analysis.js');
var expect = require('chai').expect;//引入断言库“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函数返回的数组中包含时间信息“201”
        expect(analysis()).to.include(message8);
    });
    it('学生节点测试', function() {
        expect(analysis()).to.include(message9);
    });
    it('学生节点测试', function() {
        expect(analysis()).to.include(message10);
    });
});

Interface testing

Trees generated default retracted state
no input (displayed prompt)

a single set of inputs (a tree display)

a single set of scrambled input (display a tree)

multiple sets of input (the coexistence of multiple trees)
2 groups inputs

two arbitrary groups input sequencer

4 set of input

unsupervised node (displayed prompt)

a group supervisor node, the input node of a set of unsupervised (a tree display and prompt)

multiple inputs, a first set of inputs (each display a plurality tree)

multiple inputs, a plurality of sets of inputs (each multi display two trees)