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实用示例 缩址还原
Dec 28 NodeJs
Ubuntu中搭建Nodejs开发环境过程分享
Jun 01 NodeJs
Google官方支持的NodeJS访问API,提供后台登录授权
Jul 29 NodeJs
nodejs中实现路由功能
Dec 29 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
Apr 27 NodeJs
nodejs接入阿里大鱼短信验证码的方法
Jul 10 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
浅说js变量
2011/05/25 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python中的迭代器漫谈
2015/02/03 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python with语句的原理与用法详解
2020/03/30 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
全国道德模范事迹
2014/02/01 职场文书
工作保证书范文
2014/04/29 职场文书
计划生育个人总结
2015/03/02 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
基于Python实现对比Exce的工具
2022/04/07 Python