【CSDN开源夏令营】 基于Web的SSH客户端，实现跨平台的云服务管理（四）文件树功能的实现

【CSDN开源夏令营】 基于Web的SSH客户端，实现跨平台的云服务管理（四）文件树功能的实现

 

一.实现思路



二.开发前所需的知识储备（思路中所有篮框为所需知识储备）

如果想完成该功能的实现需要下列知识储备：

1.了解ssh客户端功能

2.了解bootstrap，jquery，熟悉tty.js的交互流程，理解我博客第三章登录功能实现的方法

3.熟悉linux命令

4.熟悉html属性

5.熟悉websocket，nodejs特性，jqueryAPI。

文件树功能前后台交互流程：

只增加远程登陆功能后交互流程：



增加了远程登陆和文件树功能后交互流程：



流程介绍：

为文件树单开一个ssh模拟器，先执行博客所说的登陆功能，登录到用户远程主机后执行下面流程：

步骤1+2与3：前台通过socket.io.js向term.js发送ls -F  路径 | grep /$\r（得到路径下所有文件夹）使用setTimeout()函数50毫秒后在发送ls -F  路径 | grep -v /$\r命令（得到路径下所有文件）

步骤4,5,6,7：term将命令发送给跳板机，由于跳板机已经登录用户远程主机，跳板机将要执行的命令发送给用户远程主机，用户远程主机收到命令执行后将结果发送给跳板机，跳板机接收到的命令又被term.js监听到。

步骤8,9+10：term.js将结果通过socket.io.js跳过term.js直接发送给前台。

  

核心代码如下：

1+2箭头左边发送代码（登陆用户远程主机后）

<span style="font-size:14px;">tty.socket.emit('login', gid, "ls -F "+ obj.getAttribute('title') +" | grep /$\r");
setTimeout(function(){tty.socket.emit('login', gid, "ls -F "+obj.getAttribute('title')+" | grep -v /$\r");},500);</span>

9+10箭头左边接受判断代码

tty.socket.on('data', function(id, data) { ///////////////后台返回信息，可以在这里做write判断。
if (!tty.terms[id]) return;
tty.terms[id].write(data);
if(data.i
4000
ndexOf("Last login")>=0){output=true;}
if(output){
var flag = data.split('\r\n')[0];
if(flag.indexOf("ls -F")>=0||flag.indexOf("~]#")>=0||flag.indexOf("Last login")>=0){}
else{if(folders==''&&data.indexOf('/\r\n')){folders = data;}else{files = data; } }
}
});
前台文件树核心代码如下

html

<span style="font-size:14px;"><div class="tree well">
<ul>
<li class="parent_li">
<span title="/" onclick="spanClick(this);" ><i class="icon-folder-close"></i> <%=user%>@<%=ip%>(我的主机)</span>
<ul></ul>
</li>
</ul>
</div></span>css

<span style="font-size:12px;">.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}</span>js代码（由于js文件过于庞大只展示html中onclick方法的实现代码）

<span style="font-size:12px;">function spanClick(obj) {
var children = $(obj).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
setTimeout(function(){children.remove();},1000); //为了使jquery的折叠效果更佳顺滑，所以需要等待1秒后，让jquery完成折叠特效后再删除他的所有子类。使下次展开的时候能从新去远程主机来去文件结构，保证信息的实时性。
$(obj).find(' > i').addClass('icon-folder-close').removeClass('icon-folder-open');
} else {
//写一个函数拿到该文件下文件来添加child
tty.socket.emit('login', gid, "ls -F "+ obj.getAttribute('title') +" | grep /$\r");
setTimeout(function(){tty.socket.emit('login', gid, "ls -F "+obj.getAttribute('title')+" | grep -v /$\r");},500);
setTimeout(function(){
if(folders!='')
{
var folderArray = folders.split("\r\n");
for(var i=0;i<folderArray.length-1;i++)
{
$(obj).next().append('<li class="parent_li"><span title="'+obj.getAttribute('title') + folderArray[i]+'"onclick="spanClick(this)"><i class="icon-folder-close"></i>'+folderArray[i]+'</span><ul></ul></li>'); //添加一个文件夹，并给他赋予onclick方法。title属性
}
}
if(files!='')
{
var fileArray = files.split("\r\n");
for(var i=0;i<fileArray.length-1;i++)
{
$(obj).next().append('<li><span><i class="icon-leaf"></i>'+ fileArray[i]+'</span></li>'); //添加一个文件
}
}
folders = '';
files = '';
children.show('fast');
$(obj).find(' > i').addClass('icon-folder-open').removeClass('icon-folder-close');
},3000); //等待3s后执行该函数，也可以新建一个线程监听信息是否来临。
}</span>
到此文件树就实现了