1.结对信息
2.分工
031802424 史金易 |
页面美化,实现功能代码,博客 |
031802420 刘任世麒 |
后续代码整改和性能优化 |
3.PSP表格
PSP2.1 |
Personal Software Process Stages |
预估耗时(分钟) |
实际耗时(分钟) |
Planning |
计划 |
30 |
30 |
Estimate |
估计这个任务需要多少时间 |
1000 |
|
Development |
开发 |
|
|
Analysis |
需求分析 (包括学习新技术) |
1000 |
1500 |
Design Spec |
生成设计文档 |
10 |
10 |
Design Review |
设计复审 |
10 |
10 |
Coding Standard |
代码规范 (为目前的开发制定合适的规范) |
30 |
35 |
Design |
具体设计 |
10 |
10 |
Coding |
具体编码 |
10 |
10 |
Code Review |
代码复审 |
0 |
0 |
Test |
测试(自我测试,修改代码,提交修改) |
60 |
60 |
Reporting |
报告 |
|
|
Test Report |
测试报告 |
|
|
Size Measurement |
计算工作量 |
|
|
Postmortem & Process Improvement Plan |
事后总结, 并提出过程改进计划 |
20 |
20 |
合计 |
|
1120 |
1685 |
4.解题思路描述与设计实现说明
又是一个没有接触过得东西o(╥﹏╥)o。于是开始上网查资料。因为一位大佬恰巧光临宿舍,看到我在学网页设计,推荐了webstorm,于是用它做开发。(很好用,就是我脑子不好用。)b站小甲鱼的视频看了20集后发现有点拖拉,而且基本不涉及JavaScript部分(不过对html和css有基本了解)于是开始用菜鸟教程学习。用了两个晚上,htmlcssjs的基本功能了解了,发现学到的东西都是分散的,很难短时间把它们结合到一起去使用,于是开始网上找代码。在找到过程中看了一些代码,懂得了文本框的作用,推翻了一开始的想法:使用者在代码中修改文本。然后就知道了与文本框这方面要求有关的知识和使用,textarea,split给输入文本划分等等。要用代码和关键词实现各级层次的分层。树形结构的代码基本网上嫖的,自己写不出。接下来就是用css完成页面的设计,比如button按钮、文本框大小居中、页面背景。单元测试没有研究呜呜呜,用到就是最农民的举例法。树形结构的分支部分实现,有些结点伸缩错误,需要进一步修改。
总体框架
(1)输入文本框数据的读取与分类
(2)各级数据的处理:
(3)树形结构设计
(4)结点的添加和搜索
(5)美化网页
5.代码与界面
(1) 对输入数据进行处理
for (const lab of labs) {
const lines = lab.trim().split('\n')
const mentorRegex = /导师:(.+)/
const mentor = lines[0].match(mentorRegex)[1]
const labData = {
id: mentor,
children: []
}
const tmp = {}
for (let line of lines) {
line = line.trim()
if (line.includes('导师')) {
continue
}
const kv = line.split(':')
const key = kv[0]
const students = kv[1].split('、')
for (let i in students) {
students[i] = {
id: students[i]
}
}
const year = key.match(/[0-9]+/)[0]
const type = key.split('级')[1]
if (tmp[year] === undefined) {
tmp[year] = {}
}
tmp[year][type] = students
}
for (const key of Object.keys(tmp)) {
const yearStds = tmp[key]
console.log(yearStds)
const types = ['本科生', '硕士生', '博士生']
const yearChildren = []
types.forEach(type => {
console.log(yearStds[type])
console.log(type)
if (yearStds[type] !== undefined) {
console.log(1)
yearChildren.push({
id: type,
children: yearStds[type]
})
}
})
console.log(yearChildren)
const yearData = {
id: key,
children: yearChildren
}
labData.children.push(yearData)
}
data.push(labData)
console.log(labData)
}
(2)树形结构实现
const generateGraph = (container, data) => {
var graph = new G6.TreeGraph({
container: container,
width: 800,
height: 500,
pixelRatio: 2,
modes: {
default: [{
type: "collapse-expand",
onChange: function onChange(item, collapsed) {
var data = item.get("model").data;
data.collapsed = collapsed;
return true;
}
}
]
},
defaultNode: {
size: 16,
anchorPoints: [
[0, 0.5],
[1, 0.5]
],
style: {
fill: "#ff408c",
stroke: "#d90909"
}
},
defaultEdge: {
shape: "cubic-horizontal",
style: {
stroke: "#babfa3"
}
},
layout: {
type: "compactBox",
direction: "LR",
getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
}
}
});
graph.node(function (node) {
return {
size: 26,
style: {
fill: "#ff408c",
stroke: "#d90909"
},
label: node.id,
labelCfg: {
position: node.children && node.children.length > 0 ? "left" : "right"
}
};
});
graph.data(data);
graph.render();
graph.fitView();
(3)页面设计部分
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: scroll;
margin: 0;
background-image: url("img/timg1.jpg");
}
textarea {
display:block;
margin-left:auto;
margin-right:auto;
}
button {
display:block;
margin-left:auto;
margin-right:auto;
}
#input{
width: 600px;
min-height: 200px;
background-color: aquamarine;
}
h1 {
text-align: center;
color: blueviolet;
}
6.成果展示
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012090033356-1867981181.png)
7.使用说明
(1)在文本框输入信息
(2)点击生成按钮生成树
(3)点击树的结点进行放缩
(4)测试人员将html和js文件下载本地,用webstorm打开(其他软件亦可),右上角选择浏览器即可生成网页
8.单元测试
(1)
导师:张三
2016级博士生:天一、王二、吴五
2015级硕士生:李四、王五、许六
2016级硕士生:刘一、李二、李三
2017级本科生:刘六、琪七、司四
刘六:JAVA、数学建模
李二:字节跳动、京东云
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012091158157-1810341879.png)
(2)
导师:李二
2018级本科生:王五
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012091335090-1025893023.png)
(3)
导师:法外狂徒张三
2018级博士生:鸡你太美
2018级硕士生:加拿大电鳗
2019级硕士生:非洲炮王,95年的郑伊健
2019级本科生:杀破狼的甄子丹
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012175608981-873971773.png)
(4)
导师:孙笑川
2016级博士生:卢本伟、pdd
2015级硕士生:芜湖大司马
2015级本科生:腾杨天下
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012175506991-1816887855.png)
(5)
导师:张栋
2018级本科生:stark,鸡哥
2017级博士生:佚名,佚名
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012092246575-1708089184.png)
warning!!!:这部分会发现显示错误,因为输入文本框的“、”误写成了“,”。体现了程序的严谨。
8.Github签入截图
![](https://img2020.cnblogs.com/blog/2145680/202010/2145680-20201012092452747-1042237562.png)
9遇到的困难
学习html➕css➕js,视屏和菜鸟教程一起看。不过感觉学习的内容松散,都是实现单一的功能。难以完全自主实现js的部分。
力不从心。
10评价你的队友
031802424史金易:队友031802420刘任世麒是个乐观家族,熬夜能手。希望提高效率,任务能及时完成,加油。
031802420刘任世麒:队友031802424史金易,加油奥利给!!!