2020软件工程第二次结对作业

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 学习用前端语言HTML+CSS+Javascript制作web端
学号 031802412、031802421

一、团队成员及相关链接

1.1 团队成员博客链接

学号 姓名 博客园链接
031802412 连书缘 https://www.cnblogs.com/FBABFBA/
031802421 刘婷婷 https://www.cnblogs.com/TTLTT/

1.2 Github项目地址

https://github.com/FBABFBA/031802412-031802421

二、具体分工

学号 姓名 分工
031802412 连书缘 撰写博客、主编写代码
031802421 刘婷婷 素材收集、主UI设计
部分代码、部分UI界面设计及部分博客内容均由二人讨论共同完成。

三、PSP表格

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

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

4.1 代码实现思路

通过分析题目的需求和痛点,得出我们要完成的web端界面需要具有一个文本框(信息输入界面)及生成并展示家族树的界面。实现的功能为当用户输入相应格式的文本后,点击生成家族树按钮便能生成相对应的家族树。该web端的数据流图如下:

4.2 关键实现的数据流图

4.3 重要代码片段及解释

家族树实现信息分组关键代码:


function getdata() {
            var text = $("#text").val(); //获取id为text的textarea的全部内容
            var text1 = text.split("\n\n");//调用split函数以“\n\n"为关键字进行分组,得到每棵树的信息
            for (var k = 0; k < text1.length; k++) { //text1.length用于得到分组的数量
                var arry = text1[k].split("\n");//针对每棵树的一组数据,以“\n"为关键字进行分组,得到每条导师和学生的信息
                var teacher = {
                        name: '',
                        children: []
                    }


                for (var ii = 0; ii < arry.length; ii++) {
                    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++) { //a3.length用于得到每条身份信息里名字的数量


                        var student = {};
                        if (ii == 0) {
                            teacher.name = a3[j];
                        }
                        if (ii != 0) {
                            student.name = a3[j];
                            type.push(student);


                        }
                    }
                    if (ii != 0) {
                        type1.children = type;
                        teacher.children.push(type1);
                    }
                }


                treeData[k] = [];
                treeData[k] = teacher;
                maketree(k);
            }
        }

五、附加特点设计与展示

5.1 设计的创意独到之处及意义

1.实现了多棵树并存,可以在展示界面同时展示以导师为结点的多棵树
2.设计了重置功能,方面大家随时进行数据的修改,但每次修改都需要重置界面,不能在原有界面上进行修改,否则会出现重复的结点树。
3.将生成树的连线设置为棕色,节点设置为绿色,就像真实的树一般,增加了趣味性。

5.2 实现思路

通过上网查找相关实现方式进行学习并完成实现。

5.3 重要代码片段及解释

1、改变节点颜色关键代码:


//学术家族树.html

nodeEnter.append("rect")
                    .attr("x", -23)
                    .attr("y", -10)
                    .attr("width", 70)
                    .attr("height", 20)
                    .attr("rx", 10)
                    .style("fill", "#97bc5d");//表示节点颜色为#97bc5d(绿色)

//type.css
.node rect {
    fill: #97bc5d;
    stroke: #97bc5d;//将节点的描边颜色设置为相同的绿色
    stroke-width: 5px;//设置描边的大小为5px
.link {
    fill: none;
    stroke: rgb(154, 110, 32);//将连线的颜色设置为rgb(154, 110, 32)(棕色)
    stroke-width: 3px;//设置连线的粗细为3px
}

2、设置重置功能关键代码:
<input type=button value=重置 onclick="location.reload()"
class="button_left">//js中,这类多附件上传后在输入框左边有个删除按钮

5.4 实现成果展示

示例1(作业博客中的示例)

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四
刘六:JAVA、数学建模
李二:字节跳动、京东云

页面展示如下:

示例2(页面支持呈现多棵树并存)

导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四

导师:方流
2013级博士生:梁九、蓝六、景七
2014级本科生:吴一、柳六、周二
2012级硕士生:李一、王八、许四

页面展示如下:

六、目录说明和使用说明

6.1 目录结构

6.2 网页使用说明

1.将1.1-master 文件件打包下载,解压后使用,需保证所有文件在同一个文件夹下。

2.用Chrome打开学术家族树.html文件,按照作业要求输入
3.在出现的文本框输入数据,点击生成家族树按钮,将在下方生成一棵以导师为根节点的树
4.若希望修改数据则点击重置按钮,然后重新输入修改后的数据,再点击生成家族树按钮。

七、单元测试

测试工具:MOCHA

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

九、结对困难及解决方法

1.问题描述:对HTML、css、JavaScript等基础知识不够了解,导致页面设计不合理,不够美观
做过哪些尝试:百度,和队友相互交流学习
是否解决:已解决部分
收获:学习了一些新的知识,对css有了更进一步的认识
2.问题描述:不清楚题目中样例数据的输入格式,以至于没有找到切分文本信息的的方法
做过哪些尝试:百度,请教同学
是否解决:已解决
收获:掌握了切分文本信息的方法,解决了问题

十、评价你的队友

值得学习的地方

连书缘,很淡定心态很好,时间不够也没有着急而是步一步的修改完善,学习能力很强!!!

需要改进的地方

我们的时间观念都不是很强,加上对各方面的知识都没有很了解,所以每次的结对作业时间都会很紧张。

posted @ 2020-10-12 12:30  TTLTT  阅读(159)  评论(0编辑  收藏  举报