| Ingeniería de software | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1 |
|---|---|
| Requisitos de trabajo | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619 |
| Meta de la tarea | Requerir que las personas escriban programas |
| Tarea | Ver abajo |
| Referencias | Baidu |
1. Enlace del blog y dirección del proyecto Github
Personas emparejadas:
Shen Biao
20177663
Diseño de marco, diseño de
interfaz de usuario de embellecimiento posterior , escritura de código
PSP表格
| PSP2.1 | Etapas del proceso de software personal | Tiempo estimado (minutos) | Tiempo real (minutos) |
|---|---|---|---|
| Planificación | Plan | 20 | 20 |
| Estimar | Calcule cuánto tiempo llevará esta tarea | 30 | 30 |
| Desarrollo | Desarrollo | 300 | 330 |
| Análisis | Análisis de necesidades (incluido el aprendizaje de nuevas tecnologías) | 720 | 900 |
| Especificaciones de diseño | Generar documentos de diseño. | 30 | 30 |
| Revisión de diseño | Revisión de diseño | 20 | 30 |
| Norma de codificación | Especificaciones del código (hacer especificaciones apropiadas para el desarrollo actual) | 60 60 | 80 |
| Diseño | Diseño específico | 120 | 120 |
| Codificación | Codificación específica | 360 | 420 |
| Revisión de código | Revisión de código | 60 60 | 90 |
| Prueba | Prueba (autocomprobación, modificar código, enviar cambios) | 360 | 300 |
| Informes | Informe | 20 | 20 |
| Test Repor | Informe de prueba | 20 | 20 |
| Medida de tamaño | Carga de trabajo de cálculo | 5 5 | 5 5 |
| Plan de mejora de procesos y autopsias | Resuma luego y proponga un plan de mejora de procesos | 20 | 10 |
| Total | 2145 | 2405 |
使用说明
Instrucciones de uso:
en este proyecto de emparejamiento en GitHub, descargue la carpeta del árbol y todos sus archivos internos. Una variedad de archivos js establecen las funciones completadas por el profesor y los alumnos en el mismo árbol . El archivo css determina el marco de vista de la página. Después de la descarga, abra el índice El archivo .html puede abrir la página y puede ingresarlo en el cuadro de texto de acuerdo con los requisitos del título.
En el directorio, el código usa el marco d3, al que nos referimos descargando sus archivos.
Y al usar nuestro árbol, debe tenerse en cuenta que cuando hay múltiples grupos de entrada en el mismo árbol, debe haber líneas en blanco entre cada grupo de datos.
解题思路描述与设计实现说明
Descripción de la idea:
La parte importante es la parte de extracción de la información de entrada. El algoritmo corta los datos de texto de entrada de acuerdo con el formato del árbol d3, y luego los almacena en el contenedor o variable correspondiente, y luego genera el nodo correspondiente, que se muestra por el nodo; por otro lado Para el título: "mentor:", "estudiante de doctorado de nivel:", "estudiante de maestría de nivel:", "estudiante de pregrado de nivel:" y ",", palabras clave, seleccione datos basados en estos e importe.
Organización del código y diseño de implementación interna (diagrama de clase)
Explicar el diagrama de flujo de la clave y la implementación clave del algoritmo.
La idea general es que el módulo del algoritmo es similar al árbol en la estructura de datos. Según las palabras clave "estudiante de doctorado", "estudiante de maestría", "estudiante de pregrado", "mentor", "nivel xx" para identificar el nivel del objeto para crear un nodo y nombre Escribir
Publique fragmentos de código que considere importantes / valiosos y explique
//解析输入数据，放到创建树的函数里
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 }); }); //根节点即导师 Código de front-end
<!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中 El siguiente código es para deletrear los datos del árbol d3
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 }; } . 附加特点设计与展示
La originalidad del diseño, la importancia de este diseño.
Cada nodo se puede expandir y cerrar haciendo clic, y sus nodos secundarios se pueden ocultar.
Ideas de implementacion
Para lograr algunas operaciones a través de las funciones en el archivo d3
Exhibición de logros :
. Github的代码签入记录
. 遇到的代码模块异常或结对困难及解决方法
Dificultades y soluciones:
Cuando vi la pregunta por primera vez, sentí que si una persona pintaba el árbol, era muy difícil. ¿Qué biblioteca debería tener? Al preguntarle a otros y a Baidu en línea, descubrí que js proporciona la biblioteca d3, pero como soy solo una entrada, no tengo sustancia. Ganancias sexuales. Después de pedirles a los demás que nos ayuden a resolver este problema, también traté de entender.
Antes de ver esta tarea, nunca hemos estado en contacto con html + css + js, por lo que todos deberían aprender a hacer y programar páginas web desde cero.
Código de excepción del módulo:
Debido a que algunas funciones no están muy bien implementadas, no tenemos forma de resolver la asociación del árbol.
.心得总结
Cuando encontré esta tarea por primera vez, no sabía nada y vi el tema confundido. Después de un día, ambos comenzaron a estudiar estas nuevas tecnologías que no eran posibles, y en el proceso de aprendizaje, pensaron en cómo completar los módulos correspondientes. En términos de aprendizaje, hemos concluido que debemos estudiar mucho y no tener miedo de quienes no lo hacen. La profesión y dichos proyectos deben ser aprendidos por nosotros mismos, de lo contrario, ¿qué necesitamos? ¡Y debería ser así para cualquier problema!
.评价你的队友
Lo que vale la pena aprender, lo que necesita mejorar
Está bien. Aprendí mucho sobre cómo hacer software.