ブログのリンク
王ゆう：https://www.cnblogs.com/fishred/
ヤンWenyan：https://www.cnblogs.com/address2019/
ジョブブログ：https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/ 8736
GitHubのプロジェクトアドレス
https://github.com/fishred2941214/031702409-031702411
労働者の特定の部門
王ゆう：書き込みコード、UIデザイン
ヤンWenyan：jstee使用、テスト
PSPテーブル
| PSP2.1 | パーソナルソフトウェアプロセス段階 | それがかかると予想される（分） | 実際の時間がかかる（分） |
| プランニング | プログラム（この作業は多くの時間の見積もりが必要です） | 60 | 60 |
| 開発 | 開発 | 1505 | 1295 |
| 分析 | （新しい技術を学ぶ含む）ニーズ分析 | 240 | 360 |
| デザインスペック | 設計ドキュメントの生成 | 60 | 30 |
| デザインレビュー | デザインレビュー | 30 | 10 |
| 標準コーディング | コードの仕様（現在の開発のための適切な規範の開発） | 5 | 5 |
| 設計されました | 具体的な設計 | 60 | 40 |
| コーディング | 具体的なコーディング | 1080 | 960 |
| コードレビュー | コードレビュー | 30 | 10 |
| テスト | 検査（セルフテスト、コードを変更し、変更を提出） | 200 | 260 |
| 報告 | レポート | 100 | 130 |
| テストrepor | テストレポート | 30 | 30 |
| サイズ測定 | コンピューティングのワークロード | 10 | 10 |
| 死後＆プロセス改善計画 | 後知恵とは、プロセス改善計画を提案します | 60 | 90 |
| トータル | 1765 | 1735 | |
問題解決のためのアイデアやデザインのインプリメンテーション
問題解決のためのアイデア
- テキストボックスの入力データで
- で分析対応作成し、関連するノードを識別するために、テキスト入力機能分解を行うDIV、ULを、李タグ
- スパニングツリーjstreeプラグを使用します
- 美化インタフェース
設計と実装
JsTreeプラグ
$(function(){$("#tree_"+k+num+"").jstree({
plugins : ["types","contextmenu"],
'core' : {
//允许callback，为了后面进行创建、重命名、删除、移动或复制等操作
"check_callback" : true,},
"types": {
"default" : {
"icon" :false, // 关闭默认图标
},
},
'contextmenu':{
'items' : {
'add':{
'label':'新增分类',
'action':function(obj){
//reference获取当前选中节点的引用
var inst = jQuery.jstree.reference(obj.reference);
//通过get_node方法获取节点的信息，类似于实例对象
var clickedNode = inst.get_node(obj.reference);
/*
inst.create_node 参数1:父节点 参数2:新节点的数据
参数3: 1）first：当前节点下的头部新增节点
2）last：当前节点下的尾部新增节点
3）before：当前节点同级的上部新增节点
4）after：当前节点同级的下部新增节点
参数4:回调函数
参数5:Boolean类型,内部参数，指示父节点是否成功加载
*/
var newNode = inst.create_node(clickedNode,
{ //'id': 'ajson20',
//'parent' : 'ajson2',
'icon' : 'jstree-file',
'text':'新节点'},'last',function(node){
//回调返回创建后点节点，给新节点改名
inst.edit(node,node.val);
},'');
}
},
'rename':{
'label':'修改分类',
'action':function(obj){
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
inst.edit(obj.reference,clickedNode.val);
}
},
'delete':{
"label": "删除分类",
'action':function(obj){
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
inst.delete_node(obj.reference);
}
}
}
}
});});JsTreeはjQueryプラグインである、あなたは、第1の基準を使用する必要がjqueryのを
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>//通过 CDN引用jquery
<script src="./vakata-jstree-c9d7c14/dist/jstree.min.js"></script> // 引入jstress定义的样式
<link rel="stylesheet" href="./vakata-jstree-c9d7c14/dist/themes/default/style.min.css"/>より詳細な使用方法は、公式サイトや検索チュートリアルを表示することができます。公式ウェブサイトのアドレス：https://www.jstree.com
キーコード - テキストの分解とそれに対応するラベルを作成します
//用正则表达式提取输入内容中的导师和不同届学生的信息
var patt1 = /导师\：[\u4e00-\u9fa5]{2,5}/g;
var patt2 = /\d{4}级博士生\：.*/g;
var patt3 = /\d{4}级硕士生\：.*/g;
var patt4 = /\d{4}级本科生\：.*/g;
var patt5 = /\d{4}/;
var k=0;//k值用来记录一共进行了几次输入
function empty(){
document.getElementById("original_tree").value = "";//清空输入框
}
function analysis(content,num){
var teacher = content.match(patt1);//提取出导师信息
if(teacher == null)
{
alert("您输入的格式不正确！");//输入为空或输入无关信息或没有导师信息时，提示输入不正确
return;
}
var t_div = document.createElement('div');
t_div.setAttribute("id","tree_"+k+num);
document.getElementById("tree").appendChild(t_div);
var r_tree = document.createElement('ul');//创建根节点
r_tree.setAttribute("id","root"+k+num);
document.getElementById("tree_"+k+num).appendChild(r_tree);
teacher = teacher.join("").split("：");//所有的join和split操作均为了去除输入中的多余符号，提取所需信息，此处为获取导师名
var ele = document.createElement('li');
ele.setAttribute("id","teacher"+k+num);//添加一个名为导师的节点
ele.innerHTML = teacher[1];//内容为导师姓名
document.getElementById("root"+k+num).appendChild(ele);
var doctor = content.match(patt2);
var master = content.match(patt3);
var undergraduate = content.match(patt4);
//若该导师名下有至少一名学生，则创建代表学位的节点
if(doctor!=null||master!=null||undergraduate!=null)
{
var degree = document.createElement("ul");
degree.setAttribute("id","degree"+k+num);
document.getElementById("teacher"+k+num).appendChild(degree);
}
//该导师有博士学生，则为该导师添加博士类节点，并按照入学年份对学生进行分类，以下的硕士类和本科生类相同
if(doctor!=null)
{
var doctor_degree = document.createElement("li");
doctor_degree.setAttribute("id","doctor_degree"+k+num);
doctor_degree.innerHTML = "博士生";
document.getElementById("degree"+k+num).appendChild(doctor_degree);
var doctor_grade = document.createElement("ul");
doctor_grade.setAttribute("id","doctor_grade"+k+num);
document.getElementById("doctor_degree"+k+num).appendChild(doctor_grade);
for(var i = 0;i < doctor.length;i++)
{
var str = doctor[i];
str = str.split("：");//将入学年份和学位和所有博士学生的姓名分离
var ele1 = document.createElement('li');
ele1.innerHTML = str[0].match(patt5);//得到入学年份
ele1.setAttribute("id","grade"+k+num+i);
document.getElementById("doctor_grade"+k+num).appendChild(ele1);
var doctor_name = document.createElement("ul");
doctor_name.setAttribute("id","doctor_name"+k+num+i);
document.getElementById("grade"+k+num+i).appendChild(doctor_name);
var name = str[1].split("、");//得到所有学生姓名
for(var j = 0;j < name.length;j++)
{
var ele11 = document.createElement('li');
ele11.innerHTML = name[j];
ele11.setAttribute("id","name"+k+num+i+j);
document.getElementById("doctor_name"+k+num+i).appendChild(ele11);
}
}
}
if(master!=null)
{
var master_degree = document.createElement("li");
master_degree.setAttribute("id","master_degree"+k+num);
master_degree.innerHTML = "硕士生";
document.getElementById("degree"+k+num).appendChild(master_degree);
var master_grade = document.createElement("ul");
master_grade.setAttribute("id","master_grade"+k+num);
document.getElementById("master_degree"+k+num).appendChild(master_grade);
for(var i = 0;i < master.length;i++)
{
var str1 = master[i];
str1 = str1.split("：");
var ele2 = document.createElement('li');
ele2.innerHTML = str1[0].match(patt5);
ele2.setAttribute("id","grade1"+k+num+i);
document.getElementById("master_grade"+k+num).appendChild(ele2);
var master_name = document.createElement("ul");
master_name.setAttribute("id","master_name"+k+num+i);
document.getElementById("grade1"+k+num+i).appendChild(master_name);
var name = str1[1].split("、");
for(var j = 0;j < name.length;j++)
{
var ele22 = document.createElement('li');
ele22.innerHTML = name[j];
ele22.setAttribute("id","name1"+k+num+i+j);
document.getElementById("master_name"+k+num+i).appendChild(ele22);
}
}
}
if(undergraduate!=null)
{
var undergraduate_degree = document.createElement("li");
undergraduate_degree.setAttribute("id","undergraduate_degree"+k+num);
undergraduate_degree.innerHTML = "本科生";
document.getElementById("degree"+k+num).appendChild(undergraduate_degree);
var undergraduate_grade = document.createElement("ul");
undergraduate_grade.setAttribute("id","undergraduate_grade"+k+num);
document.getElementById("undergraduate_degree"+k+num).appendChild(undergraduate_grade);
for(var i = 0;i < undergraduate.length;i++)
{
var str2 = undergraduate[i];
str2 = str2.split("：");
var ele3 = document.createElement('li');
ele3.innerHTML = str2[0].match(patt5);
ele3.setAttribute("id","grade2"+k+num+i);
document.getElementById("undergraduate_grade"+k+num).appendChild(ele3);
var undergraduate_name = document.createElement("ul");
undergraduate_name.setAttribute("id","undergraduate_name"+k+num+i);
document.getElementById("grade2"+k+num+i).appendChild(undergraduate_name);
var name2 = str2[1].split("、");
for(var j = 0;j < name2.length;j++)
{
var ele33 = document.createElement('li');
ele33.innerHTML = name2[j];
ele33.setAttribute("id","name2"+k+num+i+j);
document.getElementById("undergraduate_name"+k+num+i).appendChild(ele33);
}
}
}
k++;
}ラベルのインスタンスを作成します。
<div id = "tree">
<!---
产生的数据格式如下：
<ul>
<li>张三
<ul>
<li>博士生
<ul>
<li>2016
<ul>
<li>
王五
</li>
<li>
李四
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
-->
</div>機能の設計と表示
Webページのサポート、複数の入力、複数のツリーが共存すると、ノードでの修正を提供し、削除、および運用ノードを増やします。
インタフェースの表示
最初のインターフェース
複数の入力をサポートし、複数のツリーが共存
ノードに変更され、削除して、ノードを追加
ディレクトリ説明と注意事項
ディレクトリ説明
- ファミリーツリー
- vakata-jstree-c9d7c14：Jstreeプラグインファイル
- TREE.png：画像を挿入
- tree.css：ページのCSSファイル
- tree.html：ページのhtmlファイル
- 森林の.png：挿入画像
- REAMDE：ディレクトリ説明と注意事項
説明書
- してください家系のフォルダまたはダウンロードして、不完全な防ぐために、同じフォルダに置くために上記のファイルをダウンロードします。
- 開くためにブラウザを使用tree.htmlブラウザでページを見ることができ、ファイルを。
- データを入力するテキストボックスの左側には、クリックし[OK]ボタンを、右側のツリーのルートにメンターとして生成されます。
- 小さな三角形をクリック、または「ジョー・スミス」としてノードのコンテンツは、ノードを展開または折りたたむことができますダブルクリックします。
- あなたは、変更、削除、操作ノードを追加することができ、ノードを右クリックします。
- 名前を変更するノード：ノードを変更します。
- ノードの削除：ノードとその下位ノードを削除します。
- ノードを追加する：ノード内の下位ノードを追加します。
ユニットテスト
選択ツール：モカ
学習：学習でテストフレームワークモカチュートリアルとして、彼はおそらくの枠組みを理解することができる時間の使用上のチュートリアルに従うことを開始したことを
、入力されたテキストデータ処理機能のテストを：
// analysis.test.js
var analysis = require('./analysis.js');
var expect = require('chai').expect;//引入断言库“chai”的 expect 断言风格
var message1="李二";
var message2="琪七";
var message3="司四";
var message4="王五";
var message5="刘六";
var message6="许六";
var message7="张三";
var message8="刘一";
var message9="天一";
var message10="吴五";
describe('文本分割测试', function() {
it('学生节点测试', function() {//测试实例
expect(analysis()).to.include(message1);//expect断言：analysis函数返回的数组中包含学生姓名“李二”
});
it('学生节点测试', function() {
expect(analysis()).to.include(message2);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message3);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message4);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message5);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message6);
});
it('导师节点测试', function() {//expect断言：analysis函数返回的数组中包含导师姓名“张三”
expect(analysis()).to.include(message7);
});
it('学生节点测试', function() {//expect断言：analysis函数返回的数组中包含时间信息“201”
expect(analysis()).to.include(message8);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message9);
});
it('学生节点测试', function() {
expect(analysis()).to.include(message10);
});
});インターフェイスのテスト
木生成されたデフォルトは後退しない状態に
ない入力（プロンプトが表示される）
入力の単一のセット（ツリー表示）
スクランブル入力の単一のセット（ツリー表示）
入力の複数のセット（複数のツリーの共存）
2基入力
任意の二つのグループを入力シーケンサ
入力の4組の
教師なしノード（プロンプト表示）
グループスーパバイザノード、教師なしのセット（ツリー表示とプロンプト）の入力ノードの
複数の入力、入力の最初のセット（各表示複数ツリー）
複数の入力、入力の複数のセット（各マルチディスプレイ2つのツリー）
チェックインの記録
異常コードモジュール
問題の説明：どのように動的に生成されたID jstree使用する
試み：関連するコンテンツjstreeの使用を参照し、検索すると、
解決されます。解決済み
評価します
私のパートナーは、偉大なモビリティの男です