位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享nodejs+express实现文件上传下载管理网站(node的express),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:node的express,node的express,nodejs的express,nodejs示例,node express 教程,nodejsexpress教程,node express 教程,nodejsexpress教程,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

项目结构总览:

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

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

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

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

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

详细功能点描述:

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

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

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

局部代码:

2、文件列表实现

后台:

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

局部代码:

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

前端:

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

前端列表局部代码:

vue实例代码:

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

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

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

删除和下载的后台代码:

3、文件拖拽上传

前端:

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

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

后端:

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

4、白板复制粘贴的功能

前端:

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

局部代码:

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

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

方式二:DIY实现

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

提交后台代码:

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

5、一键返回顶部功能

存css实现+jquery实现,

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

标签: node的express

本文链接地址:https://www.jiuchutong.com/biancheng/377877.html 转载请保留说明!

上一篇:Node.js 中exports 和 module.exports 的区别

下一篇:用nodeJS搭建本地文件服务器的几种方法小结(搭建nodejs环境)

  • 所得税的记账凭证
  • 一般计税方法适用于500万
  • 运费增值税税率有5吗
  • 加计抵扣10%的进项税 会计处理
  • 小微企业免税销售额填含税还是不含税
  • 免抵退税额如何填报
  • 货物运费包含哪些项目
  • 进项税发票认证期限多长时间
  • 职工教育经费怎么花
  • 银行贷款减值准备转回处理
  • 开具发票时如何选择对应的商品分类编码?
  • 那些情况可以申请退税
  • 母公司为子公司担保是利好还是利空
  • 跨境电商怎么交税
  • 银行期初数不对,怎么调整
  • 经营性罚款和行政性罚款的区别
  • 印花税必须每个月零申报吗
  • 印花税应税凭证填是还是否
  • 生产企业上税如何计算?
  • 生产企业出口退税流程及账务处理
  • 税务的电子钥匙是干嘛的
  • 水利建设基金的缴费基数是什么
  • 企业买卖股票应注意事项
  • 为什么纳税人不是负税人
  • 供应商质量问题通知函范文
  • 股票派息后会除权吗
  • 试生产期间的账务处理
  • 主营业务成本记账
  • 厂家给返点算拿回扣吗
  • 管理费用金额多做了,如何减少
  • win11安装失败无法开机
  • win7绝地求生帧数不稳定
  • mac桌面的文件夹怎么换到别的地方
  • uni app
  • 喜加一平台
  • php面向对象优点,缺点
  • 怎么修改boot启动项
  • 同一控制下的控股合并与非同一控制下的控股合并
  • 通知单位发放过节补助怎么说
  • 房地产企业预售期间广告费
  • 计提消费税的会计科目
  • La Selva生物站热带雨林树冠上的黑嘴巨嘴鸟,哥斯达黎加 (© Greg Basco/Minden Pictures)
  • 网络请求失败什么意思
  • 代扣代缴的企业所得税计入成本吗
  • 进项税大于销项税怎么交税
  • 医院交什么保险
  • 申报的财务报表在哪里查询
  • 印花税每个月都有吗
  • access不能打开数据库
  • 进项发票未认证
  • 车间管理人员的福利费计入什么科目
  • 装修费用会计科目
  • 退货销售折让会计分录
  • 社会保险费计提分录
  • 土地作为无形资产需要计提折旧吗?
  • 成本核算的意义在于
  • 进项税有什么相关要求
  • win8.1ie浏览器在哪
  • windows2000server安装过程
  • Win10 Mobile 10572预览版新增了哪些功能? 更新内容汇总
  • ubuntu的sudo
  • win7安装程序遇到错误0xc0000135
  • 在Linux操作系统中哪些命令可以正确关闭系统防火墙
  • mac的100个必备小技巧
  • win7系统如何屏幕放满屏幕
  • linux cut-c
  • android break
  • 表单javascript
  • java多线程最佳实践
  • nginx日志切割原理
  • 7z.exe 命令行
  • iframe transparent透明背景方法
  • JQueryEasyUI之DataGrid数据显示
  • python如何发送http请求
  • [置顶]游戏名 TentacleLocker
  • 面向对象的程序设计语言是
  • javascript程序设计教程
  • 建筑劳务分包业务范围
  • 税收与税务的区别是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设