nodejs+express實(shí)現(xiàn)文件上傳下載管理網(wǎng)站-創(chuàng)新互聯(lián)

nodejs+express-實(shí)現(xiàn)文件上傳下載管理的網(wǎng)站

創(chuàng)新互聯(lián)主營湛江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),湛江h(huán)5小程序開發(fā)搭建,湛江網(wǎng)站營銷推廣歡迎湛江等地區(qū)企業(yè)咨詢

項目Github地址：https://github.com/qcer/updo

后端：基于nodejs的express的web框架.

前端：bootstrap框架+vuejs、jquery等js庫

功能點(diǎn)：

1. dronzone.js實(shí)現(xiàn)文件拖拽上傳、下載，可自定義傳輸容量。
2. vuejs實(shí)現(xiàn)表格雙向數(shù)據(jù)綁定。
3. jquery.form.min.js表單插件，升級表單，實(shí)現(xiàn)表單提交回調(diào)。
4. 純css+jQuery實(shí)現(xiàn)一鍵返回頂部。
5. 簡單的ajax異步刷新。

項目結(jié)構(gòu)總覽：

app/:典型的MVC架構(gòu)，其下包含模型（models），視圖（views），控制器（controller），不過此處沒有用到models層，完全是試圖與控制器進(jìn)行數(shù)據(jù)的交互。前端頁面用jade前端模板引擎編寫，因為jade可以很好的支持頁面的模塊化，套用bootstrap前端框架。

config/:應(yīng)用的配置目錄，包括靜態(tài)目錄的配置，數(shù)據(jù)庫的配置等，不多說。

freedom/:其下有兩個字子目錄（hidden/和upload/），其中hidden/目錄存放文件上傳后存放的目錄位置。

node_modules/:項目依賴的nodejs第三方模塊，不多說。

public/:存放靜態(tài)文件的目錄（css文件，js文件，圖片）。

詳細(xì)功能點(diǎn)描述:

1、左側(cè)導(dǎo)航欄選中背景加深

這部分實(shí)現(xiàn)是簡單粗暴，借助jQuery選擇器遍歷id為main-name下面的li標(biāo)簽當(dāng)li標(biāo)簽的子標(biāo)簽a的href屬性等于當(dāng)前頁面的href時，首先去除兄弟li標(biāo)簽的active類，再添加當(dāng)前l(fā)i標(biāo)簽的class為active。

在某些情況下，也可以通過給a標(biāo)簽綁定點(diǎn)擊事件，當(dāng)發(fā)生點(diǎn)擊事件時，設(shè)置li標(biāo)簽的class為active，但是此時a標(biāo)簽中帶有超鏈接，點(diǎn)擊之后，固然可以將li標(biāo)簽的class的active，但是隨即頁面發(fā)生跳轉(zhuǎn)，頁面再次被刷新，效果消失。因此，通過jQuery改變頁面效果僅當(dāng)前頁面有效，一旦頁面刷新，便不再有效。

局部代碼：

2、文件列表實(shí)現(xiàn)

后臺:

通過fs模塊的readdirSync同步函數(shù)讀取freedom/upload/目錄下的所有文件名，再根據(jù)文件名遍歷文件每個文件的詳細(xì)信息，此處調(diào)用fs模塊的statSync同步函數(shù)。

局部代碼：

重要的信息有累計毫秒數(shù)（valueOf()獲?。?，文件名，文件大小，文件最近改變時間（ctime）。最后在調(diào)用Array.sort()根據(jù)累計毫秒數(shù)降序排序。注意sort此時需要傳入自定義排序規(guī)則的回調(diào)函數(shù)。

前端：

前端列表以jade模板引擎和vuejs相結(jié)合，v-for指令遍歷從后端發(fā)送過來的列表數(shù)據(jù)列表，由于vuejs天生支持MVVC模式，視圖與數(shù)據(jù)模型的雙向數(shù)據(jù)綁定變得自然而然。刪除分別通過v-on指令綁定兩個點(diǎn)擊事件。

前端列表局部代碼：

vue實(shí)例代碼:

其中fileDelete()f方法通過post的方式發(fā)送數(shù)據(jù)到后端，后端響應(yīng)最新的文件列表數(shù)據(jù)回來，進(jìn)而更新model層的數(shù)據(jù)，由于model層數(shù)據(jù)與視圖通過view-model層聯(lián)系實(shí)現(xiàn)綁定，文件列表內(nèi)容的改變會直接反映到網(wǎng)頁上，實(shí)現(xiàn)局部更新的效果。準(zhǔn)確的講，這里雖然實(shí)現(xiàn)了雙向綁定，實(shí)際上只用到了model向view方向的單項綁定。

fileDownload()方法則直接一文件名作為一個參數(shù)，拼接一個url，重定到該url，后端更具該url調(diào)用下載方法即可。

刪除和下載的后臺代碼：

3、文件拖拽上傳

前端：

實(shí)現(xiàn)文件拖拽的效果借助于一個前端插件dronzone.js實(shí)現(xiàn)，從前端層面看來，本質(zhì)上與表單上傳并無差異，都可以通過psot方法發(fā)送數(shù)據(jù)。

綁定一個上傳成功后的回調(diào)函數(shù)，函數(shù)中通過post想后臺請求最新的文件列表數(shù)據(jù)，更新vue實(shí)例的data屬性，view層通過數(shù)據(jù)綁定實(shí)現(xiàn)數(shù)據(jù)局部更新效果。

后端：

后端通過psot方法接受數(shù)據(jù)，并通過multiparty第三方模塊接解析數(shù)據(jù)，將前端發(fā)送過里的文件以一個隨即字符串作為文件名存放在freedom/upload/目錄下，在調(diào)用fs的renameSync方法更改為正確的文件名，最后記得調(diào)用res.end()結(jié)束傳輸連接，否則前端頁面一直處于等待狀態(tài)。

4、白板復(fù)制粘貼的功能

前端：

直接在表單中嵌入一個textarea標(biāo)簽，給按鈕綁定點(diǎn)擊事件實(shí)現(xiàn)提交，通過post方法向后端發(fā)送文本數(shù)據(jù)，提交成功后通過Jquery實(shí)現(xiàn)局部異步刷新提交的內(nèi)容，顯示在頁面上。此處拋棄form默認(rèn)的提交功能，因為默認(rèn)的提交動作不能實(shí)現(xiàn)提交回調(diào)操作，自定義帶有異步回調(diào)的submit動作。

局部代碼：

異步回調(diào)的submit有多重實(shí)現(xiàn)方式

方式一：通過jquery.form.min.js插件實(shí)現(xiàn)

方式二：DIY實(shí)現(xiàn)

但是此處有點(diǎn)不好地方在與，js代碼與html代碼存在耦合，通過vuejs來重構(gòu)可以實(shí)現(xiàn)兩者的解耦。

提交后臺代碼：

同時為了動態(tài)增加textarea空間的功能，增加一個按鈕，并綁定點(diǎn)擊事件，通過jQuery實(shí)現(xiàn)。

5、一鍵返回頂部功能

存css實(shí)現(xiàn)+jquery實(shí)現(xiàn)，

通過Jquery改變css屬性，控制器是否顯示，鼠標(biāo)滑過時的背景顏色變化，以及點(diǎn)擊時返回頂部的動作。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)建站。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、建站服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：nodejs+express實(shí)現(xiàn)文件上傳下載管理網(wǎng)站-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article10/cddedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、微信小程序、電子商務(wù)、動態(tài)網(wǎng)站、網(wǎng)站營銷、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)