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中实现阻塞实例
Mar 24 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
Nodejs进阶:核心模块net入门学习与实例讲解
Nov 21 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
mac下的nodejs环境安装的步骤
May 24 NodeJs
nodejs调取微信收货地址的方法
Dec 20 NodeJs
nodejs 如何手动实现服务器
Aug 20 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 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+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php微信开发之百度天气预报
2016/11/18 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
js图片处理示例代码
2014/05/12 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python数组过滤实现方法
2015/07/27 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
商务司机岗位职责
2015/04/10 职场文书
大学开学感言
2015/08/01 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS