preface

For what purpose would I manually develop an FTP client? In fact, very simple, love toss, if not like toss, may not be so obsessed with software development, so obsessed with the principle of implementation, a programmer who does not like toss, may lose the sense of direction. Recently, the company has been integrating more and more services with third-party vendors, and the SDKS are also getting bigger and bigger. The SVN server is not allowed to manage SDKS over 50 MB. So where do we put these SDKS? Yes, the FTP server. In the past six months, I had a terrible experience with FTP as a Mac user. The SYSTEM Finder could not access the FTP server, and I could not find the right software online. Between Mac and Windows 10, there is a seamless transition throughout the year.

In fact, out of curiosity about the principle, I decided to start the development of FTP client, the development process is 20 hours, about 4 nights, also encountered problems in the middle, but also solved, the whole process down, a lot of harvest.

Overview of basic functions

The client download address blogzzyc.obs.cn-east-2.myhuaweicloud.com/ipa/ftpclie…

  • FTP File Navigation
  • File download
  • Delete the file
  • Right click file upload
  • Right click add folder

Technology selection

The core of the FTP service, which must be the connection to the server, is found on the Gihtub a 4 year old product called “Nod-FTP”.

The whole document looks down, the function is complete, the manual test, can normally access the FTP server, so I decided to use this module. (There is a small problem here, I did not test the API comprehensively, but only tested one connected API, which resulted in Chinese coding problems when using the API in the subsequent development process. This shows the technical research, so we must be rigorous and careful)

The client container uses NWJS (Nod-webKit). In fact, I have been interested in this technology for a long time and have never had a chance to put it into practice. This time I finally use NWJS, which is actually a Hybrid App. You can use NodeJS API as Native Code directly in the container, which is nice.

The presentation layer, I used Vue+ElmemtUI, the most popular, high development efficiency, they are.

To start developing

I found a ready-made Vue+ElementUI background project template on the Internet, ate NPM instal and NPM Run serve, ran the project out, and quickly deleted the modules that were not needed in the template. After some operation, I encountered the first problem. Vue projects can’t use nodejs directly? Start the local development service with NPM Run Serve, oh! ? You need to run the address in NWJS. You need to run the address in NWJS. You need to run the address in nwjs. IO. Webpack has a compilation process. If you write nodejs code directly in the Vue project, it may be compiled by es5 other syntax, so I added nwbridg. js file in the public directory. In index.html, I actively introduce a file, which is responsible for connecting Vue events to nodejs API, run it again, run it again with remote-debug, it still doesn’t work, theoretically this time should be successful, but it doesn’t, I think again. NWJS is not allowed to call nodejs from online addresses. I open NWJS DevTool and input location.href= development address. This time I run directly, but nodeJS API is still not successfully called. The next step is to use NPM run build, then add a package.json file, add a new NWJS development directory nw, and put the generated source package and package.json file in it. NPM/NPM/NPM/NPM/NPM/NPM/NPM/NPM/NPM/NPM run build (vue-cli-service build)&&(RM-rf. /nw/dist)&&(mv dist./nw)&&(nwjs. /nw) You just need to run the NPM run build to preview, debug, and then the development environment is set up.

How to develop the page, do not say, the workload is not much more than a few, then ready to connect to the first API, show the target server directory, after a little tinkering, there is the following effect:

Very happy, and the click of the docking modules into subdirectories, then met a serious problem, don’t have access to Chinese catalogue, click on the no effect, I spend the longest time and the problem solving spent six hours, to note here of the beginning is not Chinese catalogue, we can now see Chinese because I use the iconv – lite module, The FTP server must be a Window server, because GBK only exists in Windows, and nodeJS does not support GBK, so you need this famous library iconV-Lite. So far, the representation layer may not be able to solve this problem, so I will minimize the content, using JS script to directly execute the Chinese command, I found that it does not work, can not access, so I have to read the source code of Nodes-FTP, the source code is relatively small, I spent two hours to read, I found that its principle is similar to SMTP, IAMP. Similarly, I set up the socket to connect to the specified server, and then write FTP standard instructions to the pipeline, such as LIST command, here I suddenly understand that the pipeline is written GBK, write back must also be GBK, so modify the source code, write back to the pipe unified place. Use iconV-Lite to carry out a layer of conversion, but it still does not work, so I get back the Chinese bytes from the pipeline, manually filter the Chinese bytes, find the Chinese variable of the specified file name, and write the bytes back from the pipeline unchanged, this time, successful!! “This proved that the theory is correct, so I again to write dead Chinese, through a layer of conversion to write back to the pipeline, but still not, this time why? Helpless, again after the screening, found that I write directly in death of Chinese string, convert the byte and returned from the FTP pipeline write Chinese parameter conversion of bytes, sent a, because a cause can’t execute commands, so this time, I wrote with FTP pipeline directly back to Chinese variables, visit its catalogue again, and sure enough it a success.

Put a successful graph and successfully enter the other subdirectories.

After the above problems were solved, there were basically no major problems, so we began to develop the rest of the content, including uploading files, downloading files, deleting files, adding folders, breadcrumbs in the navigation bar, reading and writing FTP records, etc. There was a problem when downloading files. How to open the file save dialog box?

Sure enough, NWJS overloads the input tag, making it support save as, OK!! When this function is complete, we can finally start packing our App.

conclusion

Why do I need to do it, because the plan will need to put into practice, or idea, can only stay in mind NWJS left for a long time, and after this thing, and I found myself more profound understanding of the Hybrid App, as a programmer, initiative driving is very important, must take the initiative to find demand, found the problem, Take the initiative to communicate, to interaction, between programmers is nothing more than who first step out of their own acres of land, who first take the initiative, who can harvest more.