软工实践第4次作业-结对编程之实验室程序实现

目录

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 <网页前端学习与设计>
GitHub项目地址 https://github.com/nlp-lw/041801516-181800404
学号 <041801516，181800404>
分工 我主要负责 css，我的队友主要负责 js 函数的编写，共同完成了 html

一、PSP表格

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

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

  • 解题思路：首先对从文本框中输入的文本做解析操作，然后根据得到的元素构造师门树，点击树的结点可以收缩。
  • 流程图
流程图
  • 重要代码片段
function getdata() {
    var text = $("#text").val();                    //获取id为text的textarea的全部内容
    var text1 = text.split("\n\n\n");               //多组数据输入情况，以“\n\n\n"为关键字进行分组，调用split函数进行分割
    
    for (var k = 0; k < text1.length; k++)
    {
        var arry = text1[k].split("\n");            //每一组数据，以“\n"为关键字进行分组，得到每条导师和学生的信息
        var teacher = {
                name: '',
                children: []
            };
        var flag = 1;                               //录入状态
        for (var ii = 0; ii < arry.length; ii++)
        {
            if(arry[ii] == "")                      //录入状态结束
                flag = 0;
            if(flag != 0)
            {    
                var newarr = arry[ii].split("：");  //每条导师和学生的信息，以“：”为关键字进行分组，可得到身份标签和身份信息
                var type = [];
                var type1 = [];
                var a1 = newarr[0];                 //获取身份标签，保存在a1变量
                if (ii != 0)
                    type1.name = a1;
                var a2 = newarr[1];                 //获取身份信息，保存在a2变量
                var a3 = a2.split("、");            //每组身份信息，以“、”为关键字进行切分，得到每个人的名字信息
                for (var j = 0; j < a3.length; j++) 
                {
                    var student = {};
                    if (ii == 0)
                        teacher.name = a3[j];
                    else if(a3 != "") {
                        student.name = a3[j];
                        type.push(student);
                    }
                }
                if (ii != 0) {
                    type1.children = type;
                    teacher.children.push(type1);
                }
            }else if(arry[ii] != "")
            {
                var s = {
                    name: '',
                    skill: []
                };
                var temp = arry[ii].split("：");
                s.name = temp[0];
                s.skill = temp[1];
                sdetails.push(s);
            }
        }
        treeData[k] = [];
        treeData[k] = teacher;
        maketree(k);
    }
}
  • 成果展示
    • 单棵树
    • 多棵树

三、附加特点设计与展示

  • 生成的树可以进行展开、收缩，并且有过渡动画
  • 添加了清空按钮
  • 添加了显示个人工作经历或技能按钮
  • 输入一组数据之后，可按照运行的格式直接在文本框之后添加下一组数据以生成下一棵树
  • 设计意义：
    • 对树的展开和收缩使用模板添加了过渡动画，感官上提升用户体验
    • 当输入格式错误无法生成师门树时，可以通过清空按钮快速刷新页面
    • 因为能力有限，无法实现点击叶子结点展示详细信息，所以想到添加一个相关按钮，点击后，可以在网页最后查看每个人的详细信息
    • 对于添加数据时，只需在原来数据之后按规定格式继续添加，点击生成按钮之后会在已经生成的树之后，产生新树
  • 实现思路
    当点击相关按钮之后，调用相关 js 函数
  • 代码片段
    显示个人工作经历或技能按钮

HTML

<button href="1" onclick="output()" class="button_left">显示技能及经历</button>

JavaScript

function output(){      //代替解决方案：将工作经历或者技能输出到网页末尾
    for(var i = 0; i < sdetails.length; i++)
        document.body.innerHTML+=
        "<div id=\"skill\">" + "<p>" + sdetails[i].name + "的工作经历或技能：" + sdetails[i].skill + "</p>" + "</div>";
}
  • 成果展示

四、目录说明和使用说明

  • 目录说明
    • bootstrap：框架文件，官网可下载
    • images: 网页背景图及标签图片
    • js：树展开动画所使用到的 d3.js 等文件
    • README：使用说明
    • my.js：主要 js 函数
    • type.css：css 文件
    • 师门树mod3.html：HTML 文件
  • 使用说明
      在项目页点击 Code，选择 Download ZIP。解压之后使用 Google Chrome 打开 HTML 文件即可使用。
      注意： 输入的多组数据之间请空两行，开头不允许有空行，严格按照样例格式输入（求求各位美女帅哥给个机会）

五、单元测试

  • 选用 mocha 框架
    • 学习过程：
        通过博客底下给出的教程配合百度，基本实现了单元测试。自己的简易教程?（有缘再会）
    • 测试代码说明：
        由于我们的建树函数是无输入参数的，所以没想到怎么去写测试函数，只能通过在浏览器中查看最后结果来验证
    • 构造测试数据的思路：
        虽然我们的程序做不到对异常情况进行反馈和处理，但是我们觉得测试是及其重要的。
        测试数据主要针对单组输入和多组输入分两种情况讨论，因为主要是用户输入的数据，所以重点放在了输入格式的差异上。比如：空行的位置和数量、标点符号的全角半角问题、关键词是否缺失。
        我们想在输入异常的情况下对用户进行提示，虽然我们目前无法实现，但是这样的思想是必须具备的。

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

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

  问题一

  • 问题描述
      最大的问题肯定是语言问题，在开始做之前，HTML + CSS + JavaScript 仅仅只是听说过而已，连概念都没有
  • 做过哪些尝试
      我和队友花了很多时间把 HTML + CSS + JavaScript 通过菜鸟教程从头开始简要的学习了一遍，菜鸟教程提供在线编译工具，能够快速看到结果，大大提高了效率
  • 是否解决
      尽管学会的只是冰山一角，但是也收获颇丰，算解决了吧
  • 有何收获
      最大的收获莫过于对网页的构建有了基本的概念，对前端做的工作有了大致的印象，懂了一点点基本的前端知识（以后再也不说人家网页做得烂了）。在此过程中，很深刻地意识到有很多任务并不是让我们从头开始造轮子，因为时间紧任务重，从头开始这是不太可能（大佬请体谅一下我们），所以更多时候我们是用别人写好的框架去实现，这不仅仅能够减少学习成本，也能够在要求的时间内保证完成核心功能。
      
    问题二
      
  • 问题描述
      我们无法实现点击叶结点来展示个人信息
  • 做过哪些尝试
      我和队友尝试通过百度寻找直接解决方案，花了很长时间也没能解决，遂尝试通过其他形式解决。尝试过输出树之前，通过弹窗输出个人信息，成功了，但是最终采用了添加显示个人信息按钮来实现
  • 是否解决
      实事求是地说没有，但是我们努力寻找了补救方案
  • 有何收获
      对于一些功能的实现确实不是加一两行代码就可以实现的，有时可能要重写整个函数，所以以后如果某产品的某个功能无法快速实现，请给他们多一些时间和理解。如果我们无法实现某个功能，我们认为应该采取一些补救措施，而不是不予理睬。补救措施也许不能直接解决问题，但是比没有要强。

八、评价你的队友

李伟
值得学习的地方：善于利用搜索引擎去检索有帮助的资料，能够有转化问题的思路
需要改进的地方：心态有待加强，学习效率不够，编码能力不够

甘俊洋
值得学习的地方：能够耐心地看教程，自学能力强，心态好
需要改进的地方：编码和算法能力有待提高

posted @ 2020-10-12 15:47  painy333  阅读(135)  评论(1)  编辑  收藏  举报