天天看点

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

作者:老诚不bug

介绍

该平台类似于网页版的Xshell,基于cookie和json的方式存储登录信息无数据库更方便兼容每个用户的使用,支持SFTP和FTP两种登录方式,打破原有黑端显示命令行和文件名的方式,以div的方式展示文件图,支持命令输入,报错输出。

目前代码已开源,代码规范支持开闭原则,你可以添加新的连接方式如 SSH LOCAL 等 目前代码中有ssh代码连接示例,你可以在它原有的基础上做改善

1.首页

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

2.点击配置列表,配置登录信息

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

3.点击添加

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

4.填写登录信息

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

5.列表中我们可以点击登录

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

6.登录后

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

7.双击进入可进入文件夹,单击可预览文件

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!
开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

8.当我们右击文件可显示菜单项,文件夹不支持右击,只支持文件右击,菜单操作见名之意

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

9.我们可以点击查看命令

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!
开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

10.创建一个文件夹玩一下

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

11.回车

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

12.删除

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!
开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

13.注意:rmrf命令是安全命令,他不会像是rm -rf,如果当前文件下面有文件,则会删除失败,如图下,报异常后,会提示异常

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

14.清除

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!
开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

15.cd 命令

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

16.也可以这样

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

17.但是cd 命令不支持 …/ 返回上一层,所以为了弥补这缺陷,增加一个按钮添加命令,把当前路径添加为可点击的按钮

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

18.回车后,下次我们可以直接点击这个按钮直接跳入到当前路径,默认显示在首页的导航栏,我们可以 add btnPath -b 这样就显示在按钮层了

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

19.显示按钮层

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

20.没有变化?

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

21.不!我们可以点击按钮管理,它将会显示在这

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

22.如图,你可以删除,或者直接进入

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

23.点击路径标签可以输入,该功能类似于cd 但是它需要你输入全路径名称

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

24.点击后,我们可以输入路径,按下回车即可

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

25.回到首页,我们可以看见我们有两个按钮,导出json,和导入json,它可以把当前的数据进行导出或者导入

开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!

我们可以看见在头部有一个滑块按钮,这个其实就是存储方式,默认当前的登录数据和你保存按钮的数据会保存在你的cookie中,点击切换后,会读取你桌面的路径创建一个文件夹,把登录数据和按钮数据保存在这个文件夹中,下次直接来读取就好了。

当然这带一点入侵性,但是为了保证减少cookie的压力而设计,此系统刚刚开始设计的时候并没有考虑使用数据库去保存用户的数据,为了是隐私性安全性和便捷性,当然项目部分功能还没有演示到,你可以慢慢探索研究

项目地址

https://gitee.com/susantyp/remoteConnection
来源:tanyongpeng.blog.csdn.net/article/details/122754995