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获取本机内网和外网ip地址的实现代码
Jun 01 NodeJs
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
nodejs开发——express路由与中间件
Mar 24 NodeJs
nodejs入门教程五:连接数据库的方法分析
Apr 24 NodeJs
nodejs+websocket实时聊天系统改进版
May 18 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
基于nodejs res.end和res.send的区别
May 14 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
python实现求最长回文子串长度
2018/01/22 Python
简单了解python中的与或非运算
2019/09/18 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
海飞丝的广告词
2014/03/20 职场文书
老员工辞职信范文
2015/05/12 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
年终工作总结范文
2019/06/20 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
浅析Python OpenCV三种滤镜效果
2022/04/11 Python