开源一个网页版的 Xshell,支持 FTP 和 SFTP 两种方式!
介绍
该平台类似于网页版的 Xshell,基于 cookie 和 json 的方式存储登录信息无数据库更方便兼容每个用户的使用,支持 SFTP 和 FTP 两种登录方式,打破原有黑端显示命令行和文件名的方式,以 div 的方式展示文件图,支持命令输入,报错输出。
目前代码已开源,代码规范支持开闭原则,你可以添加新的连接方式如 SSH LOCAL 等 目前代码中有 ssh 代码连接示例,你可以在它原有的基础上做改善
1.首页
![](https://static001.geekbang.org/infoq/e5/e552d71379d7569d710535499db31990.png)
2.点击配置列表,配置登录信息
![](https://static001.geekbang.org/infoq/c3/c3244cd92d466f665c7170bc02e8fa2a.png)
3.点击添加
![](https://static001.geekbang.org/infoq/a3/a3d3a76bf73f5f568c463dfad223b3da.png)
4.填写登录信息
![](https://static001.geekbang.org/infoq/b7/b787313cf552dddd9a72d7703aeaad9e.png)
5.列表中我们可以点击登录
![](https://static001.geekbang.org/infoq/c5/c5b75882e498be91d904b76c3694918f.png)
6.登录后
![](https://static001.geekbang.org/infoq/e9/e9e0b38adc48a7cddcbfc86525b2f661.png)
7.双击进入可进入文件夹,单击可预览文件
![](https://static001.geekbang.org/infoq/57/572026a1b5b5b258569eee571e3c92e1.png)
![](https://static001.geekbang.org/infoq/7c/7c8c24b99b7ea4c714d25f1564dc68fe.png)
8.当我们右击文件可显示菜单项,文件夹不支持右击,只支持文件右击,菜单操作见名之意
![](https://static001.geekbang.org/infoq/fe/feb84490ab76a7c5553711330e24ee55.png)
9.我们可以点击查看命令
![](https://static001.geekbang.org/infoq/cf/cf4ddd79ba35224d6bb88e6b4c13b310.png)
![](https://static001.geekbang.org/infoq/ae/ae33d53c6f5161241b7d1f3683e2b2c2.png)
10.创建一个文件夹玩一下
![](https://static001.geekbang.org/infoq/d2/d26cf8052eb4a93d1b4a67e8bc019611.png)
11.回车
![](https://static001.geekbang.org/infoq/97/97e6a1f3e9c7c20bd3824a42fabc1a87.png)
12.删除
![](https://static001.geekbang.org/infoq/72/726950aaef9ef155d2533cb671f194f1.png)
![](https://static001.geekbang.org/infoq/78/78e11732bde48b1f18115a7f43f973a0.png)
13.注意:rmrf 命令是安全命令,他不会像是 rm -rf,如果当前文件下面有文件,则会删除失败,如图下,报异常后,会提示异常
![](https://static001.geekbang.org/infoq/a5/a55dd69b8ea77d34f64f32b9a87c9dc6.png)
14.清除
![](https://static001.geekbang.org/infoq/af/afe4e9e00bc502bf8c8922c6a2b77413.png)
![](https://static001.geekbang.org/infoq/94/94fe26d04bfa36238bd17cbfebf9c85a.png)
15.cd 命令
![](https://static001.geekbang.org/infoq/2e/2eb65c710c5183ae11f28daccaccaadb.png)
16.也可以这样
![](https://static001.geekbang.org/infoq/c4/c4cf72d41d3fdb200e6403ee8be93a7c.png)
17.但是 cd 命令不支持 …/ 返回上一层,所以为了弥补这缺陷,增加一个按钮添加命令,把当前路径添加为可点击的按钮
![](https://static001.geekbang.org/infoq/4e/4e12d07c413f84ccdd2408cd4b1a7e7d.png)
18.回车后,下次我们可以直接点击这个按钮直接跳入到当前路径,默认显示在首页的导航栏,我们可以 add btnPath -b 这样就显示在按钮层了
![](https://static001.geekbang.org/infoq/24/246e16bc55e490bea26fcebf3b0255f8.png)
19.显示按钮层
![](https://static001.geekbang.org/infoq/17/17645b775cd6bcb3d9d5f8972aa4cdf6.png)
20.没有变化?
![](https://static001.geekbang.org/infoq/46/4652d051b63a979a3d28605e90edcdb6.png)
21.不!我们可以点击按钮管理,它将会显示在这
![](https://static001.geekbang.org/infoq/35/35825eb70c1dc52de99d28be91161579.png)
22.如图,你可以删除,或者直接进入
![](https://static001.geekbang.org/infoq/8d/8d5b634fec8d1bb0d7376d05247a43f0.png)
23.点击路径标签可以输入,该功能类似于 cd 但是它需要你输入全路径名称
![](https://static001.geekbang.org/infoq/db/db533ad607a3f83d4d3ff451f096120c.png)
24.点击后,我们可以输入路径,按下回车即可
![](https://static001.geekbang.org/infoq/57/578945904a1f77c93e4a486db9c41904.png)
25.回到首页,我们可以看见我们有两个按钮,导出 json,和导入 json,它可以把当前的数据进行导出或者导入
![](https://static001.geekbang.org/infoq/82/82b993871dc8fee407e35b49b6d7b83a.png)
我们可以看见在头部有一个滑块按钮,这个其实就是存储方式,默认当前的登录数据和你保存按钮的数据会保存在你的 cookie 中,点击切换后,会读取你桌面的路径创建一个文件夹,把登录数据和按钮数据保存在这个文件夹中,下次直接来读取就好了。
当然这带一点入侵性,但是为了保证减少 cookie 的压力而设计,此系统刚刚开始设计的时候并没有考虑使用数据库去保存用户的数据,为了是隐私性安全性和便捷性,当然项目部分功能还没有演示到,你可以慢慢探索研究
评论