【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.indexOf("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="/" οnclick="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]+'"οnclick="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>

到此文件树就实现了