| 软件工程 | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1 |
| 作业要求 | https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619 |
| 作业目标 | 学术家族树，结对 |
| 作业正文 | 如下 |
| 参考文献 | 各种手册以及技术网站 |
一.链接
成员：
刘博文：https://home.cnblogs.com/u/smith324/
陈龙：https://www.cnblogs.com/rainbowchan/
项目GitHub：https://github.com/smithLIUandhisbaby/20177572-20177606
二.具体分工
刘博文：负责代码和博客内容
陈龙：设计UI和美化界面以及测试
三.PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 20 | 30 |
| Estimate | 估计这个任务需要多少时间 | 360 | 700 |
| Development | 开发 | 200 | 360 |
| Analysis | 需求分析 (包括学习新技术) | 100 | 160 |
| Design Spec | 生成设计文档 | 20 | 20 |
| Design Review | 设计复审 | 30 | 50 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 10 | 30 |
| Design | 具体设计 | 10 | 10 |
| Coding | 具体编码 | 30 | 100 |
| Code Review | 代码复审 | 10 | 30 |
| Test | 测试（自我测试，修改代码，提交修改） | 20 | 25 |
| Reporting | 报告 | 10 | 15 |
| Test Repor | 测试报告 | 10 | 20 |
| Size Measurement | 计算工作量 | 10 | 15 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 100 |
| 合计 | 1665 |
四.解题思路描述与设计实现说明
（注：所有代码都放在了GITHUB，这里就不全部展示了）
主页面样式
<div id="textbody" style="z-index: 9999;position: fixed;padding:5px;right: 10px;top: 10px;">
<textarea placeholder="在这里写入如下内容：
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
...
然后点击“生成学术家族树”按钮
可通过鼠标拖动、滚轮进行缩放展示
↓快按下这个按钮试试吧(`・ω・´)！！↓" required></textarea>
<div><button id='begin' style="width:500px;">生成学术家族树</button></div>
</div>
<div style="z-index: 9999;position: fixed;padding:5px;right: 10px;bottom:10px;text-shadow:2px 2px 0px #fff;font-size: 24pt;">Made by     Shigure、 Chen<br>Last upload 2020.4.15</div>定义要调用的函数，以Begin为标志
数据处理部分：
临时学了一点点Jquery，再靠各种网站源码的帮助下实现了数据的处理工作
$("#begin").click(function() {
let text = document.getElementsByTagName('textarea')[0].value
let line1 = text.split(/[(\r\n)\r\n]+/) // 根据回车分割
if (line1.length == 1) {
line1 = ['导师：张三', '2016级博士生：天一、王二、吴五', '2015级硕士生：李四、王五、许六', '2016级硕士生：刘一、李二、李三', '2017级本科生：刘六、琪七、司四']
}
let teacher = line1[0].split('：')
let sign1 = 1
let sign2 = 1
let sign3 = 1
let teacherObj = {
name: '',
children: []
} // {老师:{本科生:{2017:学生}}}
let studentObjList = [] // {2017:学生}
let gradeObjList = [] // {本科生:{2017:学生}}
let boshishengObjList = []
let benkeshengObjList = []
let shuoshishengObjList = []
//////
for (let i = 1; i < line1.length; i++) {
let student = line1[i].split('：') //得到学生的名单
let degree = student[0].split('级')[1]
let grade = student[0].split('级')[0]
let students = student[1].split('、')
// 封装，将学生包含到年级里
studentObjList = []
////
for (let i = 0; i < students.length; i++) {
let obj = {}
obj.name = students[i]
studentObjList.push(obj)
}
////
gradeObjList = []
gradeObjList.name = grade + '级'
gradeObjList.children = studentObjList
//teacherObj.children.push(gradeObjList) // 插入其他年级及届数
if (degree === '博士生') {
if (sign1) {
boshishengObjList = []
boshishengObjList.name = '博士生'
boshishengObjList.children = gradeObjList
boshishengObjList.children.push(gradeObjList)
teacherObj.children.push(boshishengObjList)
sign1 = 0
} else {
boshishengObjList.children.push(gradeObjList)
}
} else if (degree === '本科生') {
if (sign2) {
benkeshengObjList = []
benkeshengObjList.name = '本科生'
benkeshengObjList.children = gradeObjList
benkeshengObjList.children.push(gradeObjList)
teacherObj.children.push(benkeshengObjList)
sign2 = 0
} else {
benkeshengObjList.children.push(gradeObjList)
}
} else if (degree === '硕士生') {
if (sign3) {
shuoshishengObjList = []
shuoshishengObjList.name = '硕士生'
shuoshishengObjList.children = gradeObjList
shuoshishengObjList.children.push(gradeObjList)
teacherObj.children.push(shuoshishengObjList)
sign3 = 0;
} else {
shuoshishengObjList.children.push(gradeObjList)
}
}
}
//////
teacherObj.name = teacher[1]
console.log(line1)
treeData = [] //把数据置为空
treeData.push(teacherObj) //放入数据
root = treeData[0]
update(root) //调用D3.JS
});样式部分：
<style>
.node {
cursor: pointer
}
.node circle {
fill: #357cae;
stroke: #4682b4;
stroke-width: 3px
}
.node circle:hover {
transform: scale(1.1)
}
.node rect {
transition: all .5s;
fill: #2990ca;
stroke: #4682b4;
stroke-width: 1.5px
}
.node rect:hover {
transform: scale(1.1)
}
.node text {
font: 20px sans-serif
}
.node text:hover {
font-weight: 700;
transform: scale(1.05)
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 4px
}
.link:hover {
transition: all .5s;
stroke: #4d4d4d
}
body {
display: block;
margin: 8px;
background-image: url(src/background.jpg);
background-position: bottom 0;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover
}
html {
overflow-x: hidden;
overflow-y: hidden
}
</style>
算法设计图
说明难点：
- 获取文本框之中的文字内容并处理
- 需要将分析出来的数据进行转化成树
- 将制作出来的树变成动态的
- 多棵树如何生成
为了实现动态内容，我们花费了很多的时间推倒重来，最后还是确定了使用数据可视化的JSON来实现这一功能，可惜最后实现的并不完美
至于数据内容倒是没有想象中的困难，使用的Jquery来解决的。
这一次比较遗憾的是没能实现多棵树的功能，自己的水平还不够，希望以后能多多学习。
五.附加特点设计与展示
*树是可以动态缩放的
六.目录说明和使用说明
目录组织、使用说明
目录说明：
我们在js、css、fonts、src的文件夹中放入了所有资源
使用说明：
下载资源后，打开index.html文件即可使用
要保证其他文件夹也在其中，都是引用本地相对路径的文件
七.单元测试
单元测试这个部分做的比较潦草，也没有接触过前端的单元测试，所以使用的是Firefox浏览器自带的开发者工具（F12）,在代码中使用console.log()的命令检查数据分割的正确性
https://developer.mozilla.org/zh-CN/docs/Tools/Browser_Console
这里是教程，可以学习一下
在代码中使用console.log()的命令检查数据分割的正确性
八、贴出Github的代码签入记录
九.遇到的困难及解决方法
那可就太多了……
1.如何实现数据读入，如何实现动态，如何实现多棵树等等……
答：我们使用的是Jquery，也尝试过vue.js与d3.js的结合。
2.前面前端学的太差了，而且对Jquery部分可以说是完全不知道，也不记得老师讲的一些内容了（疫情让我变傻了）
结果：要花费大量的时间从头学起，把忘掉的部分都捡回来
（幸好不要写后端，不然我会崩溃……）
最后的收获：虽然我以后不太想做前端的工作，但是谁有知道呢，现在不好好学以后更加没法学好了，所以学计算机真的是会把人都学崩溃的
十：评价你的队友
陈龙：
值得学习的地方：能够制作出精美的流程图，还能够使用测试工具
需要改进的地方：还需要提高沟通能力，多多学习
