Which course does this assignment belong to | https://edu.cnblogs.com/campus/fzu/SE2020 |
---|---|
What are the requirements for this assignment | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
The goal of this assignment | < specific content of the assignment objectives you understand > |
Student number | 031802406 |
Blog link of paired students: | --------------- |
GitHub project address of the warehouse created by your team | https://github.com/huipai/031802443-031802406 |
- 1, Specific division of labor
- 2, PSP table
- 3, Problem solving idea description and design implementation description
- 4, Additional feature design and display
- 5, Table of contents and instructions for use
- 6, Unit test
- 7, Give a screenshot of Github's code check-in record
- 8, Code module exceptions or pairing difficulties encountered and Solutions
- 9, Evaluate your teammates
1, Specific division of labor
member | Student number | Division of labor | Blog |
---|---|---|---|
Hu yeyan | 031802406 | UI design, summary | https://www.cnblogs.com/alangakong/p/13786718.html |
Zheng minhao | 031802443 | Code writing | ---- |
2, PSP table
PSP2.1 | Personal Software Process Stages | Estimated time (minutes) | Actual time (minutes) |
---|---|---|---|
Planning | plan | 10 | 10 |
Estimate | Estimate how long this task will take | ||
Development | development | 60 | 500 |
Analysis | Demand analysis (including learning new technologies) | 800 | 1200 |
Design Spec | Generate design documents | 30 | 30 |
Design Review | design review | 60 | 60 |
Coding Standard | Code specifications (develop appropriate specifications for current development) | 40 | 40 |
Design | Specific design | 60 | 60 |
Coding | Specific coding | 300 | 500 |
Code Review | Code Review | 180 | 180 |
Test | Test (self test, modify code, submit modification) | 180 | 180 |
Reporting | report | 60 | 120 |
Test Report | Test report | 60 | 120 |
Size Measurement | Calculation workload | 30 | 20 |
Postmortem & Process Improvement Plan | Summarize afterwards and put forward process improvement plan | 60 | 80 |
total | 1930 | 3100 |
3, Problem solving idea description and design implementation description
Code implementation ideas, text description
This programming uses the jstree plug-in, so the key is how to convert the input data to make it an object that the plug-in can use. Firstly, decompose the input data into groups, and generate a group of trees for each tutor independently. Then, according to the keywords, divide the nodes representing different degrees from the tutor's name, and divide the nodes of different grades from the nodes of different degrees. The grade nodes contain the students of this level.
Flow chart or data flow chart of key implementation
Post code snippets that you think are important / valuable and explain them
function buildTree(str,num,submitNum) //submitNum is the number of input times of the user. Num is the number of input times. This is the num group of data { var supervisorPatt=/Tutor:.*/g; //Extracting tutor and student information using regular expression var doctorPatt=/\d{1,}Doctoral students:.*/g; var postgraduatePatt=/\d{1,}Level master:.*/g; var undergraduatePatt=/\d{1,}Undergraduate students:.*/g; var numberPatt=/\d{1,}/g; //Using regular expression to extract the year of enrollment var supervisor=str.match(supervisorPatt); //Get tutor information if(supervisor==null) //Tutor information is empty { alert("Please enter the tutor name in the format"); throw new Error(result.error_code); } else if(supervisor.length>1) //Multiple tutor information is read from a set of data { alert("The number of blank lines between each tutor is 2"); throw new Error(result.error_code); } var treeDiv=document.createElement('div'); //Create the div block of the tree treeDiv.setAttribute("id","tree"+submitNum+num); document.getElementById("studyTree").appendChild(treeDiv); var treeRoot=document.createElement('ul'); //Establish the root node according to the jstree format treeRoot.setAttribute("id","root"+submitNum+num); document.getElementById("tree"+submitNum+num).appendChild(treeRoot); supervisor=supervisor.join("").split(": "); //Split the extracted tutor information to get the tutor name var ele = document.createElement('li'); //Establish mentor node ele.setAttribute("id","supervisor"+submitNum+num); ele.innerHTML=supervisor[1]; document.getElementById("root"+submitNum+num).appendChild(ele); var doctor=str.match(doctorPatt); //Look for master's, doctor's and bachelor's degrees in the input data var postgraduate=str.match(postgraduatePatt); var undergraduate=str.match(undergraduatePatt); if(doctor||postgraduate||undergraduate) //If there is student data, establish the degree root node { var degree = document.createElement('ul'); degree.setAttribute("id","degree"+submitNum+num); document.getElementById("supervisor"+submitNum+num).appendChild(degree); } else { alert("Note: the data entered is not valid"+supervisor[1]+"No student data is detected. If the data is correct, please ignore the prompt") }
Then the node is established according to the plug-in format, taking the doctor as an example
if(doctor) { var doctorDegree=document.createElement('li'); //Establish doctor node doctorDegree.setAttribute("id","doctorDegree"+submitNum+num); doctorDegree.innerHTML="Doctor"; document.getElementById("degree"+submitNum+num).appendChild(doctorDegree); var doctorGradeUl=document.createElement('ul'); //Establish doctoral grade root node doctorGradeUl.setAttribute("id","doctorGradeUl"+submitNum+num); document.getElementById("doctorDegree"+submitNum+num).appendChild(doctorGradeUl); for(var i=0;i<doctor.length;i++) //Read the doctoral data of all grades and establish nodes of each grade { var doctorStr=doctor[i]; doctorStr=doctorStr.split(": "); //Distinguish between the front and back of the colon. The first is the grade and the second is the specific student var doctorGradeLi=document.createElement('li'); //Establish grade node doctorGradeLi.innerHTML=doctorStr[0].match(numberPatt); doctorGradeLi.setAttribute("id","doctorGradeLi"+submitNum+num+i); document.getElementById("doctorGradeUl"+submitNum+num).appendChild(doctorGradeLi); var doctorNameUl = document.createElement('ul'); //Establish student root node doctorNameUl.setAttribute("id","doctorNameUl"+submitNum+num+i); document.getElementById("doctorGradeLi"+submitNum+num+i).appendChild(doctorNameUl); var nameValue=doctorStr[1].split(","); //Split all students for(var j=0;j<nameValue.length;j++) //Establish unique nodes for each student { var doctorNameLi=document.createElement('li'); doctorNameLi.setAttribute("id","Not yet"+nameValue[j]+submitNum+num); doctorNameLi.innerHTML=nameValue[j]; document.getElementById("doctorNameUl"+submitNum+num+i).appendChild(doctorNameLi); } } }
The establishment process of master's and undergraduate nodes is similar
str=str.split("\n\n"); //Split personal experience and skills for(var i=1;i<str.length;i++) //Traverse all experiences { //Because the student node id is generated according to the name, the name in the experience is directly extracted and searched. The student id is changed to name + skill and experience to facilitate the generation of click events var abilityStr=str[i]; abilityStr=abilityStr.split(": "); if(!document.getElementById("Not yet"+abilityStr[0]+submitNum+num)) { alert("Name not found"+abilityStr[0]+"Student,Failed to add this skill experience"); } else { document.getElementById("Not yet"+abilityStr[0]+submitNum+num).setAttribute("id",abilityStr[0]+"Skills and experience:"+abilityStr[1]); } }
4, Additional feature design and display
The originality of the design, the significance of this design
Considering that errors may occur when entering data multiple times, a reset function is provided to empty the tree and text box
Considering that there may be new data, the functions of adding nodes, deleting nodes and renaming nodes are provided in the generated tree
In order to facilitate modification, the function of dragging nodes to modify the tree is provided
Thought realization
Refer to the jstree api documentation and the blog to configure jstree
Post code snippets that you think are important / valuable and explain them
$(function(){$("#tree"+submitNum+num+"").jstree({ plugins : ["types","contextmenu","state","dnd"], 'state': { "opened":true //Default spanning tree expansion }, 'core' : { "check_callback" : true,}, //Allow modification of nodes "types": { "default" : { "icon" :false, //Close icon }, }, 'contextmenu':{ 'items' : { 'add':{ 'label':'New node', 'action':function(obj){ //Reference calls the current node reference var inst = jQuery.jstree.reference(obj.reference); //get_node method to obtain node information var clickedNode = inst.get_node(obj.reference); //Create a new node var newNode = inst.create_node(clickedNode, { 'icon' : false,//Turn off default icon 'text':'New node'},'last',function(node){ inst.edit(node,node.val); },''); } }, 'rename':{ //Modify the selected node name 'label':'Modify node', 'action':function(obj){ var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); inst.edit(obj.reference,clickedNode.val); } }, 'delete':{ //Delete selected sub node "label": "Delete node", 'action':function(obj){ var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); inst.delete_node(obj.reference); } } } } });});
Achievement demonstration
It supports multiple groups of input, multiple input and coexistence of multiple trees. It supports adding nodes, deleting nodes, modifying node names, dragging nodes to rearrange trees, and resetting functions
Multi group input
Multiple input
Right click the child node to open the menu bar
Drag nodes to modify
5, Table of contents and instructions for use
Explain how your directory is organized
Academic tree generation
-
JS folder: myjs JS file contains the main JS code of generating academic tree and the jQuery and jsTree files used.
-
dist folder: jstree plug-in directory
-
image folder: inserted pictures
-
css folder: css file of web page
-
index.html: html file of web page
-
REAMDE.md: Catalog description and instructions
Please download the above files uniformly and put them in the same folder to prevent exceptions.
-
Use the browser to open index HTML file, you can see the page in the browser.
-
Enter data in the text box on the left and click generate to generate a tree with tutor as the root node on the right.
-
When inputting, there are two lines between each group of data and one line between personal skills. The symbols in the data use Chinese half width characters.
-
Click the reset button to clear the text box and the generated tree.
-
Click the student type node, and personal skills and experience will appear.
-
Click the small triangle or double-click the content of the node. For example, you can expand or collapse the node.
-
It supports dragging nodes to modify the tree
-
Right click the node to add or delete.
Modify node: rename the selected node.
Delete node: deletes the selected node and its child nodes.
Add node: add a child node at this node.
How do testers run your web page
After downloading the complete code, ensure that other folders are also in them, which are files referencing local relative paths
Use Google browser to open index HTML to open the web page
In the academic tree generator, input and generate according to the sample to obtain the corresponding spanning tree
Click the name to view the skill tree and experience
6, Unit test
Explain the testing tools you choose and how you learn unit testing
mocha testing tool is selected according to the tutorial Mocha instance tutorial of testing framework
API Tutorial
First install node JS, installation reference Node.js installation configuration
Then open cmd and enter
npm install --global mocha
Install mocha
Refer to the mocha tutorial above to write the test code
Use the describe block to form a test suite, and call the assert assertion provided by node to complete the test
describe('Abnormal condition', () => { it('The input data is empty', () => { assert.throws(() => {//Want to throw an exception test.spiltInput("") },Error); }); it('Tutor information format error 1', () => { assert.throws(() => { test.buildTree(`Tutor Zhang San 2016 First level doctoral students: Tian Yi, Wang Er, Wu Wu 2015 Level master students: Li Si, Wang Wu, Xu Liu 2016 Level master students: Liu Yi, Li Er, Li San 2017 Undergraduate: Liu Liu, Qi Qi Liu Liu: JAVA,mathematical modeling Li Er: byte beating, JD cloud`)},Error); }); });
Explain the idea of constructing test data. How do you consider various situations? How do you consider the difficulties of future testers?
1. First, a sample of a standard spanning tree is tested
2. Test the example of non-standard input format of a spanning tree
3. Test the normal condition of multiple trees
4. Test the non-standard input format in multiple trees
5. Test for duplicate names in a tree
6. Test for duplicate names in multiple trees
7, Give a screenshot of Github's code check-in record
8, Code module exceptions or pairing difficulties encountered and Solutions
In the code, among multiple trees, the skill tree is only displayed on the first tree. The node id of the same name is set the same. By adding parameters, the node with the same name of the two trees can obtain different IDs. At present, the problem has been solved,
9, Evaluate your teammates
Teammates are hardworking and self-learning people with high learning efficiency. They are not good at expressing their ideas, but they will find a solution.