NodeJS + Express – Implement file upload download management website
Project Github Address: https: //github.com/qcer/updo
Back end: Based on NodeJS web framework.
front end: Bootstrap Frame + Vuejs, jQuery, etc. JS library
- dronzone.js implementation file drag and drop upload, download, can customize the transfer capacity.
- VUEJS implementation of the dual-way data binding of the table.
- Pure CSS + JQuery implements a one-click back to top.
jQuery.form.min.js form plugin, upgrade form, implementation form submission callback.
Simple Ajax is refreshed.
Overview of Item Structure:
APP /: Typical MVC architecture, which contains models, views, views, controllers (Controller ), But there is no use of the Models layer here, which is completely attempting to interact with the controller. The front-end page is written with the JADE front-end template engine because Jade can support the modularity of the page with the Bootstrap front-end frame.
config /: Application directory, including static directory configuration, database configuration, etc., not to say.
Freedom /: There are two tabs (Hidden / and UPLOAD /), where the Hidden / Directory stores the directory location stored after the file is uploaded. node_modules /: item dependent nodejs third party modules, not more than that.
Public /: The directory of static files (CSS file, JS file, picture).
Detailed Function Point Description:
1, the left navigation column selects the background deeper
This part is simple and rude , With the jQuery selector traversing the ID of the LI label under Main-Name When the HREF attribute of the LI tag is equal to the HREF of the current page, first remove the Active class of the Brothers LI tag, add the current LI tag to Active .
In some cases, it is also possible to bind the event by binding the A tag. When a click event occurs, the class of the LI tag is set to active, but this time A tag has a hyperlink, click after clicking Of course, you can jump on the Class of the LI tag, but the page is jumped, and the page is refreshed again, the effect disappears. Therefore, through jQuery change page effects only the current page is valid, once the page is refreshed, it will no longer be effective.
2, file list implementation
passed The READDIRSYNC synchronization function of the FS module reads all the file names in the freedom / upload / directory, then call the FS module’s Statsync synchronization function based on the details of the file name traversed files.
Important information has cumulative milliseconds (Valueof () acquisition), file name, file size, file recent change time (CTIME ). Finally, array.sort () is sorted according to the cumulative milliseconds. Note Sort This needs to be transferred to the callback function of the custom sorting rule.
The front end: The front end list combines with the JADE template engine and VueJS, and the V-FOR instruction traverses a list of list data sent from the rear end. Vuejs Natural support MVVC mode, view and data model two-way data bindingBe naturally. Delete Two click events are binded by V-ON instructions.
Vue instance code:
where FileDelete () F The method transmits data to the rear end through the POST, and the backend responds back to the latest file list data, and then updates the data of the Model layer, because the Model layer data is connected to the view, the file list content changes. Directly reflected on the webpage to achieve local update effects. Accurately, although the two-way binding is achieved, it is actually only used in the single binding of Model to the View direction.
FileDownload () method directly as a parameter, splicing a URL, redepating the URL, and the backend more URL calls the download method.
3, file drag and drop
The effect of implementing the file drag is achieved by means of a front-end plug-in dronzone.js, from the front end level, essentially uploaded and No difference, you can send data through the PSOT method.
Binds a callback function after uploading success, and the function is requested by POST to request the latest file list data, update the DATA property of the Vue instance, and the View layer is tied by data. Decrease data local update effect.
The rear end:
accepts data through the PSOT method, and accepts data by the Multiparty third-party module, and send the file in the front end to the file name as the file name. FREEDOM / UPLOAD / directory, remember to the correct file name in calling FS, and finally remember to call RES.END ()End the transmission connection, otherwise the front page is always in the waiting state.
4, white copy and paste function
embed a textarea directly in the form , To the button binding click event implementation, send text data to the rear end through the POST method, and submit the partial asynchronous refresh submission through jQuery, displayed on the page. Abandon the default submission function here, because the default submission movement cannot implement submission callbacks, custom Submit action with asynchronous callbacks.
Asynchronous callback Submit has multiple implementations
through jQuery. form.min.js achieve plug
Second way: DIY realized
However, this It is a bit bad to be coupled with the JS code and the HTML code, and the decoupling of the two can be realized by VueJS.
Subscribe to the background code:
At the same time, in order to dynamically increase the functionality of the TextArea space, add a button, and bind the click event, and implement it through jQuery.
5, one button returns top function
Save CSS implementation + JQuery implementation,
Change the CSS attribute via jQuery, whether the controller is displayed, the background color changes in the mouse slide, and the action back to the top is returned when clicked.
The above is all the content of this article, I hope that everyone’s learning is helpful, I hope everyone will support Tumi Cloud.