【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="/" 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>

到此文件树就实现了