2020软件工程第二次结对编程作业
这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020 |
---|---|
这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
这个作业的目标 | <在网页页面上呈现树形结构形式的师门树> |
学号 | <031802515,031802539> |
一、链接
- 解睿思031802515:https://www.cnblogs.com/genesisrkp/
- 岳嘉宁031802539:https://www.cnblogs.com/pikaq58/
- 本作业博客的链接:https://www.cnblogs.com/genesisrkp/p/13779635.html
- GitHub 项目地址:https://github.com/Genesis-R/031802515-031802539
二、具体分工
- 岳嘉宁031802539:负责师门树的设计和网页界面的美化,编写 HTML+CSS+JavaScript 代码,完善博客内容,编写文件说明和测试说明。
- 解睿思031802515:负责学习并进行vue的框架构建,单元测试框架,编写单元测试用例,编写博客。
三、PSP表格
PSP2.1 | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 50 | 60 |
Estimate | 估计这个任务需要多少时间 | 1500 | 1775 |
Development | 开发 | 360 | 400 |
Analysis | 需求分析 (包括学习新技术) | 400 | 470 |
Design Spec | 生成设计文档 | 60 | 70 |
Design Review | 设计复审 | 30 | 40 |
Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 30 | 35 |
Design | 具体设计 | 50 | 55 |
Coding | 具体编码 | 240 | 300 |
Code Review | 代码复审 | 60 | 80 |
Test | 测试(自我测试,修改代码,提交修改) | 80 | 90 |
Reporting | 报告 | 50 | 60 |
Test Report | 测试报告 | 30 | 30 |
Size Measurement | 计算工作量 | 30 | 40 |
Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 45 |
合计 | 1500 | 1775 |
四、解题思路描述与设计实现说明
代码思路:
- 通过 Html 中的文本框读取输入的文本数据。
- JavaScript 捕获数据并进行处理。
- JavaScript 控制 SVG 实现家族树的输出以及缩放动画
流程图:
代码片段:
- 家族树:
var treeData = [{
"name": "",
"parent": "",
"children": [
{
"name": "",
"parent": "",
"children": [
{
"name": "",
"parent": ""
},
{
"name": "",
"parent": "",
"children": [
{
"name": "",
parent: ""
}]
},
{
"name": "",
"parent": ""
}, {
"name": "",
"parent": ""
}]
}, {
"name": "",
"parent": "",
"children": [{
"name": "",
"parent": ""
}, {
"name": "",
"parent": ""
}, ]
}, {
"name": "",
"parent": ""
}, ]
}];
- 数据处理:
function getdata() {
var text = $("#text").val(); //获取信息————获取文本框输入的信息
var text1 = text.split("\n\n\n");//分组————使用split函数进行分割
for (var k = 0; k < text1.length; k++) {
var text2=text1[k].split("\n\n");//分割开师门树和技能点信息
var arry = text2[0].split("\n");//针对每一组数据,以“\n"为关键字进行分组,得到每条导师和学生的信息
for(var j=1;j<text2.length;j++)//把技能树、工作经历的信息添加到师门书末端
{
arry.push(text2[j]);
}
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);
}
}
- 动画:
//声明与定义画布属性
var svg = d3.select("body").append("svg")//在body里添加了一个svg
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[k]; //treeData为上边定义的节点属性
root.x0 = height / 2;
root.y0 = 0;
五、实验成果网页展示
六、附加特点的设计与展示
设计的独到之处
- 使用了福大60周年校庆的 LOGO
- 背景也是福大图书馆
实现思路
- CSS实现
代码片段
- LOGO
<div class="mask"></div>
.mask {
width: 80px;
height: 80px;
margin-top:10px;
background-image: url('img/u.jpg');
background-size: cover;
border-radius: 15px;
}
- 背景
.bg{
background: url('img/bg.jpg');
background-size: cover;
position: fixed;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
-webkit-filter: blur(15px);
filter: blur(15px);
z-index: -1;
}
成果展示
七、目录说明和使用说明
八、单元测试
单元测试步骤及代码
-
选用的工具:jest+vue/test-utils
-
创建好的项目:
-
在 package.json 中定义一个单元测试的脚本。
{
"scripts": {
"test": "jest"
}
}
- 配置 jest.conf.js 配置文件:
import { mount } from '@vue/test-utils'
import Component from './functions'
describe('Component', () => {
test('单棵树', () => {
const wrapper = mount(Component)
expect(wrapper.functions()).toEqual()
})
})
测试结果
构造测试数据的思路
- 因为主要测试了对用户输入数据的分割函数和树的形成函数,所以测试数据要考虑到对程序的不同功能测试和对输入错误数据时的测试,测试用例包括输入一棵树、输入两棵树,信息输入的正误,符号分割要包括输入正确符号和输入错误符号等。
- 我觉得要应对将来测试人员的***难就要考虑的周全,从程序的功能入手,进而考虑的用户可能面对的问题,设置测试样例时要尽可能简洁,方便以后理解分析。
九、GitHub 代码签入记录截图
十、 困难及解决方法
- 问题:HTML 中的文本框以前一直用的 < input > 然后发现没办法达到效果
- 解决:换成了< textarea > < / textarea >
- 问题:JavaScript 如何获取数据
- 解决:使用 JQuery 通过 id 定位到文本框获取文本框的 value
- 问题:技能树的添加
- 解决:尝试想把技能树加在人名的后面,失败了。。然后只能把个人以及技能信息加在师门树末端
- 问题:动画
- 解决:没有解锁 SVG 的技能点,只能踩在前人的肩膀上了
- 问题: vue-cli 环境的搭建
- 解决: 看了大概有十几个博客,装了好久都有报错,重新装又报错,最后用了 force 指令清理 cache 才终于安装好
- 问题: 测试用例的编写
- 解决: 因为没有基础所以只能跟着博客和教程从头学
- 问题: jest.conf.js 文件的配置
- 解决: 对比博客代码探索着编写,中间出了很多差错
十一、队友评价
评031802539岳嘉宁
- 值得学习的地方:我的队友学习能力很强,打代码也很熟练,速度快而且认真。并且我的队友人特别好,总是很耐心的帮我解决问题。
- 需要改进的地方:木有
评031802515解睿思
- 值得学习的地方:做事非常认真仔细踏实,很好沟通,团队合作遇到问题可以很及时的解决,也很愿意承担作业内的事务,愿意花时间精力学习很多新东西。
- 需要改进的地方:需要继续提高代码能力
十二、收获
- GitHub 用得更加熟练了
- 分析代码和学习新技术能力也增强了
- 搭建了 vue-cli 环境,对 javascript 单元测试有了初步的认识
- 学习了 jest 这个测试框架,最后用 jest+vue/test-utils 测试工具进行了单元测试