The fifth operation of 2020 software engineering

Software engineering	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
Work requirements	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
Homework goal	Require individuals to write programs
Homework	See below
references	Baidu

1. Blog link and Github project address

Paired people:

Shen Biao

20177663

Frame design, later beautification
UI design, code writing

PSP表格

PSP2.1	Personal Software Process Stages	Estimated time (minutes)	Actual time (minutes)
Planning	plan	20	20
Estimate	Estimate how much time this task will take	30	30
Development	Development	300	330
Analysis	Needs analysis (including learning new technologies)	720	900
Design Spec	Generate design documents	30	30
Design Review	Design review	20	30
Coding Standard	Code specifications (making appropriate specifications for current development)	60	80
Design	Specific design	120	120
Coding	Specific coding	360	420
Code Review	Code review	60	90
Test	Test (self-test, modify code, submit changes)	360	300
Reporting	report	20	20
Test Repor	testing report	20	20
Size Measurement	Calculation workload	5	5
Postmortem & Process Improvement Plan	Summarize afterwards and propose a process improvement plan	20	10
total		2145	2405

使用说明
Instructions for use:
In this pairing project on GitHub, download the tree folder and all its internal files. A variety of js files establish the functions completed by the teacher and students . The css file determines the view frame of the page. After the download is complete, open the index The .html file can open the page, and you can enter it in the text box according to the requirements of the title.
In the directory, the code uses the d3 framework, which we refer to by downloading its files.

And when using our tree, it should be noted that when there are multiple groups of input in the same tree, there must be blank lines between each group of data.

解题思路描述与设计实现说明

Idea description:

The important part is the extraction part of the input information. The algorithm cuts the input text data according to the format of the d3 tree, and then stores it in the corresponding container or variable, and then generates the corresponding node, which is displayed by the node; on the other hand For the title: "mentor:", "level doctoral student:", "level master student:", "level undergraduate student:" and ",", keywords, select data based on these and import.

Code organization and internal implementation design (class diagram)

Explain the flow chart of the key and key implementation of the algorithm

The general idea is that the algorithm module is similar to the tree in the data structure. According to the keywords "doctoral student", "master student", "undergraduate student", "mentor", "xx level" to identify the level of the object to create a node and its name Write.

Post code snippets that you think are important / valuable and explain

//解析输入数据，放到创建树的函数里
            try {
                let treeDataList = extractData(data)
                console.info(treeDataList)
                for (let i = 0; i < treeDataList.length; i++) {
                    let div = document.createElement("div");
                    let id = 'tree' + i div.id = id //实际为姓名标识符 div.class = 'tree' document.getElementById('tree-group').appendChild(div) let treeData = parseTreeData(treeDataList[i]) createTree(treeData, '#' + id) } } catch (err) { console.error(err) return alert('数据格式不正确，请检查') }

///不同学历学生的节点创建并初始化、之后建立关系
Object.keys(stageSet).forEach(function(v) {
    const students = [];
    if (doctorNameList[v]) {
      students.push({
        name: "博士生",         //博士生情况
        children: doctorNameList[v].map(function(v) {
          return {
            name: v
          };
        })
      });
    }
    if (masterNameList[v]) {
      students.push({
        name: "硕士生", //硕士生 children: masterNameList[v].map(function(v) { return { name: v }; }) }); } if (bachelorNameList[v]) { students.push({ name: "本科生", //本科生 children: bachelorNameList[v].map(function(v) { return { name: v }; }) }); } children.push({ name: v, children: students }); }); //根节点即导师

Front-end code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <script src="./lib/d3.v5.min.js"></script> <title>Tree</title> </head> <body> <div class="source-data"> <label for="data-area">请输入:</label> <textarea id="data-area" rows="8" cols="36"></textarea> </div> <div class="tree-action"> <button id="btn-calculate">OK</button> </div> <div class="tree-group" id="tree-group"> <!-- tree --> </div> </body> </html> ///这里我们只展现部分代码，更多的函数在js中

The following code is to spell the data of the d3 tree

 Object.keys(stageSet).forEach(function(v) {
    const students = [];
    if (doctorNameList[v]) {
      students.push({
        name: "博士生",
        children: doctorNameList[v].map(function(v) {
          return {
            name: v
          };
        })
      });
    }
    if (masterNameList[v]) {
      students.push({
        name: "硕士生", //若是研究生，应当放在对应的节点 children: masterNameList[v].map(function(v) { return { name: v }; }) }); } if (bachelorNameList[v]) { //若是本科生，应当放在对应的节点 students.push({ name: "本科生", children: bachelorNameList[v].map(function(v) { return { name: v }; }) }); } children.push({ name: v, children: students }); }); return { name: teacherName, children: children }; }

. 附加特点设计与展示

The originality of the design, the significance of this design

Each node can be expanded and closed by clicking, and its child nodes can be hidden.

Implementation ideas

To achieve some operations through the functions in the d3 file

Achievement display :

. Github的代码签入记录

. 遇到的代码模块异常或结对困难及解决方法

Difficulties and solutions:

When I first saw the question, I felt that if the tree was painted by a person, it was very difficult. What library should I have? By asking others and online Baidu, I found that js does provide the d3 library, but because I am just an entry, I have no substance. Sexual gains. After asking others to ask others to help us solve this problem, I also tried to understand.
Before seeing this assignment, we have never been in touch with html + css + js, so everyone should learn how to make and program web pages from scratch.

Code module exception:

Because some functions are not very well implemented, we have no way to solve the tree association.

.心得总结
When I first encountered this task, I didn't know anything, and I saw the topic confused. After a day, both of them started to study these new technologies that were not possible, and in the process of learning, they thought about how to complete the corresponding modules. In terms of learning, we have concluded that we should study hard and do n’t be afraid of those who do n’t. The profession and such projects must be learned by ourselves, otherwise what do we need? And, it should be like this for any problems!

.评价你的队友

What is worth learning, what needs improvement

It's good. I just learned a lot about making software.