The web version of xshell supports FTP connection and SFTP connection [detailed tutorial] continued from the previous article

Web version of Xshell

Project address ：

Demo address Click to jump
Web version Xshell Open source address
Tutorial address

Project introduction

The platform is similar to the web version Xshell, be based on cookie and json The way to store login information without database is more convenient and compatible with the use of each user , Support SFTP and FTP Two ways to log in , Break the old way of displaying command line and file name in black end , With div Show the document diagram in the way of , Support command input , Error output At present, the code has been open source ,, The code specification supports the open close principle , You can add new connections such as SSH LOCAL etc. There are... In the current code ssh Code connection example , You can improve it on its original basis

1. First we can see the home page
   
2. Click on the configuration list , Configure login information
   
3. Click Add
4. Fill in login information
5. In the list, we can click login
6. After logging in
7. Double click to enter the folder , Click to preview the file
8. When we right-click on the file, we can display the menu item , Folder does not support right clicking , Only right clicking on files is supported , See the meaning of the name for menu operation
9. We can click to view the command
   
10. Create a folder to play with
11. enter
12. Delete （）
    
13. Be careful ：rmrf The command is a security command , He doesn't look like rm -rf, If there is a file under the current file , The deletion fails , As shown in the figure below , After an exception is reported , It will prompt the exception
14. eliminate
    
15. cd command
16. You can do that
17. however cd Command not supported …/ Go back to the previous level , So in order to make up for this defect , Add a button to add a command , Add the current path as a clickable button
18. After returning , Next time we can directly click this button to jump to the current path , By default, it is displayed in the navigation bar of the home page , We can add btnPath -b This is displayed in the button layer
19. Show button layer
20. There is no change ？
21. No ！ We can click the button to manage , It will show up here
22. Pictured , You can delete , Or go straight into
23. Click the path tab to enter , This function is similar to cd But it requires you to enter the full path name
24. After clicking , We can enter the path , Just press enter
25. Back to the front page , We can see that we have two buttons , export json, And import json, It can export or import the current data
26. We can see that there is a slider button in the head , This is actually the storage method , By default, the current login data and the data of your save button will be saved in your cookie in , Click to switch , Will read the path of your desktop and create a folder , Save the login data and button data in this folder , Just read it directly next time , Of course it's a little invasive , But in order to reduce cookie Designed for the pressure of , When this system was just designed, it did not consider using database to save user data , For privacy, security and convenience , Of course, some functions of the project have not been demonstrated yet , You can explore it slowly

an account of happenings after the event being told

Thank you for reading this article , Waste your precious time , This project aims to exchange and learn , If you think the current project is innovative and interesting, or you have any suggestions or opinions , You can comment directly in the comment area