Nodejs express-一个用于文件上传和下载管理的网站

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

后端：基于nodejs的express的web框架。

前端：bootstrap框架vuejs、jquery和其他js库

功能点：

Dronzone.js通过拖拽实现文件的上传和下载，可以自定义传输容量。Vuejs实现了表的双向数据绑定。jquery.form.min.js表单插件可以对表单进行升级，实现表单提交的回调。纯css jQuery实现了一键返回顶部。简单的ajax异步刷新。项目结构概述：

app/:的典型MVC架构包括模型、视图和控制器，但这里没有使用模型层，只是尝试与控制器进行交互。前端页面由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标签的活动类，然后将当前li标签的类添加为活动类。

在某些情况下，也可以将点击事件绑定到A标签。当点击事件发生时，li标签的类别被设置为活动，但是在A标签中有一个超链接。点击后，li标签的类可以被激活，但是之后页面跳转，页面再次刷新，效果消失。因此，通过jQuery更改页面效果仅对当前页面有效，一旦页面刷新，就不再有效。

本地代码：

2.文件列表的实现

后台：

使用fs模块的readdirSync同步功能读取freedom/upload/目录中的所有文件名，然后根据文件名遍历每个文件的详细信息。这里，调用fs模块的statSync同步函数。

本地代码：

重要信息包括累计毫秒数(由valueOf())获得)、文件名、文件大小和文件上次更改时间(ctime)。最后，调用Array.sort()根据累计的毫秒数进行降序排序。请注意，此时排序需要传入自定义排序规则的回调函数。

前端：

前端列表结合jade模板引擎和vuejs，v-for指令遍历后端发送的列表数据列表。因为vuejs自然支持MVVC模式，视图和数据模型之间的双向数据绑定变得自然。删除由v-on指令绑定两个点击事件。

前端列表的本地代码：

Vue实例代码：

fileDelete()f方法通过post的方式向后端发送数据，后端响应最新的文件列表数据，然后更新模型层的数据。由于模型层的数据通过视图-模型层与视图绑定，文件列表内容的变化会直接反映在网页上，实现本地更新的效果。准确地说，虽然这里实现了双向绑定，但实际上只使用了从模型到视图的单一绑定。

fileDownload()方法直接以文件名为参数，拼接一个url，重置为url，后端可以用url调用Download方法。

删除和下载的背景代码：

3.拖动并上传文件

前端：

文件拖拽的效果是借助一个前端插件dronzone.js实现的，从前端来看，本质上和表单上传是一样的，数据可以用psot方法发送。

上传成功后绑定回调函数。该功能通过post在后台请求最新的文件列表数据，并更新vue实例的数据属性。视图层通过数据绑定实现本地数据更新效果。

后端：

后端通过psot方法接收数据，通过多方第三方模块解析数据，将前端发送的文件以随机字符串作为文件名存储在freedom/upload/directory中，调用fs的renameSync方法后改为正确的文件名，最后记得调用res.end()结束传输连接，否则前端页面总是在等待。

4.白板复制粘贴功能

前端：

在表单中直接嵌入一个textarea标签，将click事件绑定到按钮上实现提交，通过post方法将文本数据发送到后端，提交成功后通过Jquery在本地异步刷新提交的内容，并显示在页面上。这里放弃了表单默认的提交功能，因为默认的提交动作无法实现提交回调操作，自定义了异步回调的提交动作。

本地代码：

异步回调提交有多种实现

方法1:通过jquery.form.min.js插件实现

方法二：自己动手实现

然而，这里有一些缺点，js代码和html代码是耦合的，它们之间的解耦可以通过重构vuejs来实现。

提交背景代码：

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

5.一个按钮返回顶部功能

保存css实现jquery，

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。