GitHub地址：https://github.com/CDCDA/031702219-031702232.git
博客地址
031702232林涛：https://www.cnblogs.com/lllovehhh/
031702219陈毅东：https://www.cnblogs.com/FC01/
具体分工
031702219陈毅东：代码编写
031702232林涛：博客撰写，测试
PSP表格
|||||||||
|:--|:--|:--|:--|
|PSP2.1|Personal Software Process Stages|预估耗时（分钟)|实际耗时（分钟）
|Planning|计划| 30 | 30
|Estimate|估计这个任务需要多少时间| 1290 |1510
|Development |开发 |150|180
|Analysis| 需求分析(包括学习新技术) |480 |600
|Design Spec| 生成设计文档 |60|60
|Design Review| 设计复审|30 |30
|Coding Standard|代码规范 (为目前的开发制定合适的规范) |20|20
|Design|具体设计|30 |30
|Coding |具体编码|200|240
|Code Review|代码复审|60| 60
|Test| 测试（自我测试，修改代码，提交修改）|120|150
|Reporting |报告 |30|30
|Test Repor |测试报告 |30|30
|Size Measurement |计算工作量|20|20
|Postmortem & Process Improvement Plan |事后总结, 并提出过程改进计划|30| 30
|合计||1290|1510|
作业内容
简单解题思路及过程
在生成树时决定采用在一个页面获取并处理数据，然后跳转到另一个页面接受数据并生成树。在处理数据发送时因为太菜卡了很久，最后百度了半天决定使用最简单明了的本地存储的方式。生成树使用了依赖于jqurey的ztree插件。
代码
ui设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家族树</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<style type="text/css">
#textid{
border:0;
font-size: 30px;
color: white;
background-color:rgba(10%,20%,30%,0.6);
height: 400px;
500px;
text-align:center;
}
</style>
<style type="text/css">
body{
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
</style>
<SCRIPT type="text/javascript">
var zNodes=[];
var q=0;
function huoqu() {
var array = $("#textid").val();
var array1 = array.split("
");
var d = 1;
var b = 10;
var p1 = /导师/;
var p2 = /博士生/;
var p3 = /硕士生/;
var p4 = /本科生/;
for (var i = 0, n = array1.length; i < n; i++) {
if (p1.test(array1[i])) {
zNodes[q] = {id: d, pId: 0, name: array1[i].replace('导师：','')};
q++;}
if(p2.test(array1[i])){
var Name=array1[i].split("：")
var arr=Name[1].split("、")
zNodes[q]={id:b,pId:d,name:Name[0]};q++;
for(var j=1;j<=arr.length;j++) {
zNodes[q]={id:b+j,pId:b,name:arr[j-1]};q++;
}b=b+10;
}
if(p3.test(array1[i])){
var Name1=array1[i].split("：")
var arr1=Name1[1].split("、")
zNodes[q]={id:b,pId:d,name:Name1[0]};q++;
for(var l=1;l<=arr.length;l++) {
zNodes[q]={id:b+l,pId:b,name:arr1[l-1]};q++;
}b=b+10;
}
if(p4.test(array1[i])){
var Name2=array1[i].split("：")
var arr2=Name2[1].split("、")
zNodes[q]={id:b,pId:d,name:Name2[0]};q++;
for(var m=1;m<=arr.length;m++) {
zNodes[q]={id:b+l,pId:b,name:arr1[m-1]};q++;
}b=b+10;
}
}
window.localStorage.e=q;
var Data = JSON.stringify(zNodes)
window.localStorage.k =Data;
window.location.href='2.html';
}
</SCRIPT>
</head>
<body background="63e1f6ac08c40e585a782b4d8f534712.jpg">
<div style="text-align: center">
<textarea id="textid" placeholder="请输入文本" ></textarea>
<input type="button" value="提交" onclick="huoqu()"/>
<ul class="ztree" id="treeDemo"></ul>
</div>
</body>
</html>
生成树
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<style type="text/css">
body{
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;}
</style>
</head>
<body background="63e1f6ac08c40e585a782b4d8f534712.jpg">
<SCRIPT>
var q=localStorage.e;
var data=localStorage.k;
var Ob= JSON.parse(data);
var setting = {
data: {//表示tree的数据格式
simpleData: {
enable: true,//表示使用简单数据模
}
}
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting,Ob);});
</SCRIPT>
</body >
<ul class="ztree" id="treeDemo"></ul>
</html>
效果展现
单元测试
使用谷歌浏览器的f12测试工具
GitHub签入记录
困难
团队两个人对html+css+javascript都是毫无基础，所有东西都是从网上的资料和B站的教学视频，一步步学过来的，最后的作品或许比较简单，但是过程还是十分艰辛，算是有所收获，有所进步。
需要改进之处
暂时不能实现多棵树节点，页面不够美观。
对队友的评价（商业互吹）
林涛：队友的学习能力是非常nice了，代码编写能力也很强，超级棒。
陈毅东：大家都是零基础一起学习，很有默契，队友十分优秀。