nodejs+express实现文件上传下载管理网站


Posted in NodeJs onMarch 15, 2017

nodejs+express-实现文件上传下载管理的网站

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

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

前端:bootstrap框架+vuejs、jquery等js库

功能点:

  1. dronzone.js实现文件拖拽上传、下载,可自定义传输容量。
  2. vuejs实现表格双向数据绑定。
  3. jquery.form.min.js表单插件,升级表单,实现表单提交回调。
  4. 纯css+jQuery实现一键返回顶部。
  5. 简单的ajax异步刷新。

项目结构总览:

app/:典型的MVC架构,其下包含模型(models),视图(views),控制器(controller),不过此处没有用到models层,完全是试图与控制器进行数据的交互。前端页面用jade前端模板引擎编写,因为jade可以很好的支持页面的模块化,套用bootstrap前端框架。

config/:应用的配置目录,包括静态目录的配置,数据库的配置等,不多说。

freedom/:其下有两个字子目录(hidden/和upload/),其中hidden/目录存放文件上传后存放的目录位置。

node_modules/:项目依赖的nodejs第三方模块,不多说。

public/:存放静态文件的目录(css文件,js文件,图片)。

nodejs+express实现文件上传下载管理网站

详细功能点描述:

1、左侧导航栏选中背景加深

这部分实现是简单粗暴,借助jQuery选择器遍历id为main-name下面的li标签当li标签的子标签a的href属性等于当前页面的href时,首先去除兄弟li标签的active类,再添加当前li标签的class为active。

在某些情况下,也可以通过给a标签绑定点击事件,当发生点击事件时,设置li标签的class为active,但是此时a标签中带有超链接,点击之后,固然可以将li标签的class的active,但是随即页面发生跳转,页面再次被刷新,效果消失。因此,通过jQuery改变页面效果仅当前页面有效,一旦页面刷新,便不再有效。

局部代码:

nodejs+express实现文件上传下载管理网站

2、文件列表实现

后台:

通过fs模块的readdirSync同步函数读取freedom/upload/目录下的所有文件名,再根据文件名遍历文件每个文件的详细信息,此处调用fs模块的statSync同步函数。

局部代码:

nodejs+express实现文件上传下载管理网站

重要的信息有累计毫秒数(valueOf()获取),文件名,文件大小,文件最近改变时间(ctime)。最后在调用Array.sort()根据累计毫秒数降序排序。注意sort此时需要传入自定义排序规则的回调函数。

nodejs+express实现文件上传下载管理网站

前端:

前端列表以jade模板引擎和vuejs相结合,v-for指令遍历从后端发送过来的列表数据列表,由于vuejs天生支持MVVC模式,视图与数据模型的双向数据绑定变得自然而然。删除分别通过v-on指令绑定两个点击事件。

前端列表局部代码:

nodejs+express实现文件上传下载管理网站

vue实例代码:

nodejs+express实现文件上传下载管理网站

其中fileDelete()f方法通过post的方式发送数据到后端,后端响应最新的文件列表数据回来,进而更新model层的数据,由于model层数据与视图通过view-model层联系实现绑定,文件列表内容的改变会直接反映到网页上,实现局部更新的效果。准确的讲,这里虽然实现了双向绑定,实际上只用到了model向view方向的单项绑定。

fileDownload()方法则直接一文件名作为一个参数,拼接一个url,重定到该url,后端更具该url调用下载方法即可。

删除和下载的后台代码:

nodejs+express实现文件上传下载管理网站

nodejs+express实现文件上传下载管理网站

3、文件拖拽上传

前端:

nodejs+express实现文件上传下载管理网站

实现文件拖拽的效果借助于一个前端插件dronzone.js实现,从前端层面看来,本质上与表单上传并无差异,都可以通过psot方法发送数据。

nodejs+express实现文件上传下载管理网站

绑定一个上传成功后的回调函数,函数中通过post想后台请求最新的文件列表数据,更新vue实例的data属性,view层通过数据绑定实现数据局部更新效果。

后端:

后端通过psot方法接受数据,并通过multiparty第三方模块接解析数据,将前端发送过里的文件以一个随即字符串作为文件名存放在freedom/upload/目录下,在调用fs的renameSync方法更改为正确的文件名,最后记得调用res.end()结束传输连接,否则前端页面一直处于等待状态。

nodejs+express实现文件上传下载管理网站

4、白板复制粘贴的功能

前端:

直接在表单中嵌入一个textarea标签,给按钮绑定点击事件实现提交,通过post方法向后端发送文本数据,提交成功后通过Jquery实现局部异步刷新提交的内容,显示在页面上。此处抛弃form默认的提交功能,因为默认的提交动作不能实现提交回调操作,自定义带有异步回调的submit动作。

局部代码:

nodejs+express实现文件上传下载管理网站

异步回调的submit有多重实现方式

方式一:通过jquery.form.min.js插件实现

nodejs+express实现文件上传下载管理网站

方式二:DIY实现

nodejs+express实现文件上传下载管理网站

但是此处有点不好地方在与,js代码与html代码存在耦合,通过vuejs来重构可以实现两者的解耦。

提交后台代码:

nodejs+express实现文件上传下载管理网站

同时为了动态增加textarea空间的功能,增加一个按钮,并绑定点击事件,通过jQuery实现。

nodejs+express实现文件上传下载管理网站

5、一键返回顶部功能

nodejs+express实现文件上传下载管理网站

nodejs+express实现文件上传下载管理网站

存css实现+jquery实现,

通过Jquery改变css属性,控制器是否显示,鼠标滑过时的背景颜色变化,以及点击时返回顶部的动作。

nodejs+express实现文件上传下载管理网站

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
用nodejs实现PHP的print_r函数代码
Mar 14 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 NodeJs
Nodejs高扩展性的模板引擎 functmpl简介
Feb 13 NodeJs
CentOS 安装NodeJS V8.0.0的方法
Jun 15 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 NodeJs
Nodejs下使用gm圆形裁剪并合成图片的示例
Feb 22 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
nodejs中express入门和基础知识点学习
Sep 13 NodeJs
Nodejs libuv运行原理详解
Aug 21 NodeJs
NodeJS有难度的面试题(能答对几个)
Oct 09 NodeJs
nodejs搭建本地http服务器教程
Mar 13 #NodeJs
搭建简单的nodejs http服务器详解
Mar 09 #NodeJs
nodejs读写json文件的简单方法(必看)
Mar 09 #NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 #NodeJs
nodejs中全局变量的实例解析
Mar 07 #NodeJs
nodejs根据ip数组在百度地图中进行定位
Mar 06 #NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 #NodeJs
You might like
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php实现RSA加密类实例
2015/03/26 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
专科应届生求职信
2013/11/24 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
团日活动总结
2014/04/28 职场文书
档案工作汇报材料
2014/08/21 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
太行山上观后感
2015/06/05 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server