这个作业属于哪个课程	福州大学软件工程实践个人编程作业 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标	学术家族树的前端编写
学号	081800414（洪司坤） 081800216（林友相）
本作业博客链接	https://www.cnblogs.com/pikapi-hsk/p/13800558.html
结对同学博客链接	https://home.cnblogs.com/u/liskarmw/
GitHub项目地址	https://github.com/Pikapika-sk/081800414-081800216
具体分工	081800216 完成 JaveScript 部分和 vue 的框架构建，081800414 完成 html,css,博客

一、PSP表格

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

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

实现思路：项目用 vue+ vue.tree.color 实现
读入文本，进行字符串处理
将解析后的文本传入组件，生成树的结构
树的结构为嵌套式，每个节点结构为

流程图

三、重要代码片段

文本解析与树的生成

 createTree() {
      this.data = { label: "", children: [] };//清空树的内容
      var trees = this.arr.split("\n\n\n");//按行分割
      trees.forEach((treeText) => {
        let lines = treeText.split("\n");
        if (lines[0].slice(0, 2) !== "导师") {
          alert("输入错误请重新输入");//第一行前两个字不是导师就提示错误
          return;
        }
        this.data.label = lines[0].slice(3, lines[0].length);//取出导师作为父节点
        var flag = false;//判断是否已经读到个人信息部分
        for (var j = 1; j < lines.length; ++j) {
          //为空行跳过
          if (lines[j] === "") {
            flag = true;
            //console.log(flag);
            continue;
          }
          if (!flag) {
          //标记“：”，取出“：”之前的字段
          var loc = lines[j].indexOf("：");
            var it = {
              label: lines[j].slice(0, loc),
              children: [],
            };
          //之后每次读到一个“、”就做一次赋值处理
          //注意最后一个人名后面是没有“、”的，要做特别处理
            var n = 0;
            var last = loc;
            for (var i = loc; i < lines[j].length; ++i) {
              if (lines[j][i] == "、" || i == lines[j].length - 1) {
                var str2;
                if (i == lines[j].length - 1)
                  str2 = lines[j].slice(last + 1, i + 1);
                else str2 = lines[j].slice(last + 1, i);
                var it2 = {
                  label: str2,
                  children: [],
                };
                it.children[n++] = it2;
                last = i;
              }
            }
            this.data.children.push(it);
          }
          //进入对个人信息的处理 
          else {
            var flag2 = false;
            loc = lines[j].indexOf("：");
            //取到人名
            var name = lines[j].slice(0, loc);
            name = String(name);
            //没想到好办法，只能遍历所有子结点来找匹配人名
            for (var k = 0; k < this.data.children.length; ++k) {
              for (var m = 0; m < this.data.children[k].children.length; ++m) {
                this.data.children[k].children[m].label = String(
                  this.data.children[k].children[m].label
                );

                if (name === this.data.children[k].children[m].label) {
                  var skill = {
                    label: lines[j].slice(loc + 1, lines[j].length),
                    children: [],
                  };
                  //找到就 push 到人名，当作人名的子结点
                  this.data.children[k].children[m].children.push(skill);
                  flag2 = true;
                }
              }
            }
            //找不到人名说明输入有误
            if (!flag2) {
              alert('输入学生信息有误，"' + name + '"不在师门树中');
            }
            flag = false;
          }
        }
      });
    },

实现展示

四、附加特点设计与展示

生成树可以进行展开、收缩。
增加了添加内容按钮，可在树生成后进行临时添加节点
设计意义：给不想重新输入完整文本的用户一个快捷添加的方式
- 添加时先点击所要添加的父节点然后再输入内容。
- 能力有限，只做了添加按钮..输错了就重新生成吧

五、目录说明和使用说明

目录说明

src文件夹为源文件夹，存放的app.vue与 tree.vue
dist为build后的项目

使用说明

打开dist 文件夹下的index.html文件即可运行我们的网页

六、Github的代码签入记录截图

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

不会 HTML + CSS + JavaScript

这次作业是纯前端，我和队友都没有接触过，很愉快的从零开始了。
尝试用 vue 完成这次作业

听说 vue 很棒，但不知道棒在哪里，于是去学习了尝试用vue完成本次作业。
发现用 vue 开发都是用 vue-cli 辅助开发

啥也不会的然后又去学了 vue-cli 怎么用，对项目的构建，打包有了一个初步的了解（像极了上个月学 gradle 的我）
发现用 vue-org-tree 这个组件好像来生成树形结构很棒的样子（走弯路了）

然后之后的几天都陷入这个组件的深坑。下面说说使用这个组件时遇到的问题
1. 首先就是从外部读数据到生成树这一步
  
  这个组件默认都是数据写好好的，不存在读数据这一步，没给出具体的方法。于是费了好大劲才将文本框输入的字符串传进去并生成树。
2. 然后就是无法生成两个树
  
  为了生成两个树我做了很多尝试，比如父组件分析输入的字符串，传值给子组件，用子组件生成树。失败。这种生成一个树没啥问题，生成第二棵树的时候就完全不行。
  
  也尝试过如何循环调用子组件，找了好多博客，完全找不到思路。最后实在是 DDL 了没办法，只能放弃了。（对不起太菜了。
3. 增加节点功能时遇到 bug
  
  想着两个树不能生成，就写点额外的功能捞点分吧。然后遇到这个组件的一个 bug ，点击展开树的子节点的按钮也会触发增加子节点事件，非常的奇怪，明明完全不能通过这种方式调用增加子节点的函数。也没有找到解决办法。
  
  然后只能增加一个额外的增加内容按钮来增加子节点。
  
  注：原先的想法是点一下节点的文本框即可增加这个节点的子节点。
4. 尝试增加删除节点功能破产
  
  可以删除这个节点的内容，但是会留下一个什么内容的没有的节点。找不到解决的办法，这种删除又毫无意义。就没有写到代码中。
就如前面所说，做到后面才发现 vue-org-tree 这个组件完全不适合本次作业，尝试用 element-ui 中的树形组件

在和 vue-org-tree 斗智斗勇到 ddl 前夕，发现了 element-ui，发现也有个树形组件。虽然已经不可能再重新换一个组件写代码了，但是我们还是去试了试。发现这次连解析完的数据都没办法 push 到树的 data 中去。同样也没找到解决办法，没办法了只能作罢。

总结一下吧，这次作业完成的非常非常不好，比前三次都要糟糕很多。反省了一下，首先就是面对一个不熟悉的领域（可以这么说吧，毕竟从来没写过)，应该先去多了解了解再开始编码，之前分析 json 文件那次作业，就是一步一步的，明白要用 fastjson 解析，用 fileUtils 读写文件，gradle 构建项目等等，感觉做下来是非常顺的。这次就是处处碰壁，几乎每一步都会遇到一个完全不知道怎么解决的新问题，然后就是死磕好久也找不到解决办法，看着 ddl 逼近，却没有一点进展。直到最后还解决不了作业的基本要求。感觉没做好的原因就是时间安排不合理，了解的知识不够，看起来简单的东西自己要动手实现起来就是另外一回事了。当然了，连基本功能都没搞好，最后自然也是没有搞出单元测试。算是吃到了一个教训，希望能有个及格分这次。

再来说说收获。

从一个对前端完全空白的到小入门了前端三件套
对 vue 以及 vue-cli 有了初步认识
学习了一些有关 vue 的组件知识
对如何使用 GitHub 进行协作开发有了进一步的认识。

八、评价队友

林友相：

值得学习的地方：他解决问题的效率比我高多了，我老是对着一个问题死磕，导致时间没了进度也没了。而他会尝试更多的方法来处理问题，比如我一直在和 vue-org-tree 斗智斗勇，他就劝我赶紧换一个。对不起我应该早点听他的，这次我记大过。
需要改进的地方：希望沟通能更顺畅一下，时常说着说着就各自做各自的，然后发现两个人都在白忙活。两个人还是都喜欢单干了，结果就是都干不好。

洪司坤：

值得学习的地方，友相几乎从0开始接触前端入门了最重要的vue 与树的生成部分，太猛了！！，
需要改进的地方：年轻人回头是岸，早点换element组件不香吗

posted on 2020-10-12 00:47 NefelibataLLM 阅读(140) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部