基于Vue.js和Node.js的个人网盘系统——科技立项中期成果

基于Vue.js和Node.js的个人网盘系统

个人网盘系统前端使用Vue.js框架，特别使用了Vue3支持的Element Plus组件库。后端使用Node.js提供服务。数据库使用MongoDB。主要功能有注册、登录、上传文件、删除文件、下载文件、在线预览文件、分享文件。

1. 注册功能

注册页面的url为"ip:port/#/register"。主体界面如下。

两个输入框，分别可以输入用户名和密码。两个按钮分别是注册按钮和返回按钮，返回按钮点击后当回到登录页面。这些组件使用的都是Element Plus中的组件，分别用了<el-form> 、<el-input>和<el-button>。

当我们输入的时候，输入格式如果不正确的话，下方会进行提示。

在密码输入框中，提供了明文按钮（一个小眼睛），供用户查看自己的密码是否打正确。

当然点击那个小×按钮的功能，就是把输入的内容进行清空。

这两个小功能因为使用了<el-input>，非常容易实现，实际上只是在标签里加了个show password和clearable属性，小图标用的是el-icon。

<el-input placeholder="请输入密码"  v-model="registerForm.password" show-password clearable prefix-icon="el-icon-lock"></el-input>

我们点击后，如果用户名以及被注册，就会提示该用户名被注册

如果用户名没有重复，那么就会提示注册成功，并且自动跳转到登录界面。

那两条提示分别是Element Plus中的Message组件和Notification组件，它们在一定时间后就会自动消失，起到提示的作用。

2.登录功能

登录界面的url为"ip:port/#/login"。登录界面和注册界面几乎一致。如果用户输错密码了，那么会提示密码错误，同样是Element Plus中的Message组件。

如果用户输错了用户名，那么Message就会提示用户名不存在。

如果输入正确，那么就会进入用户的文件管理页面。Message会提示欢迎回来。

3.主界面介绍

主界面整体的布局主要有header、aside和main。布局是用Element Plus中的Container组件实现的。大体代码框架如下。

侧边的菜单栏用的是Element Plus中的NavMenu导航菜单组件。我们点击相应的按钮，界面就会筛选出对应的文件格式。

侧边栏还可以进行折叠以扩大右边文件的显示面积。

当鼠标移动到菜单的那个图标时，会产生浮动的选项卡。

接下来我们介绍一下左边的主体部分。

它主要有一个上传按钮，点击它后就可以选择本机上的文件进行上传。运用的是Element Plus中的Upload组件，具体在之后的上传文件功能再讲。还有一个大表格，里面包含了我们以及上传了的文件名、文件大小、上传日期和相关操作（在线预览、下载、分享、删除），它运用的组件是Table表格组件。表格可以选择一个列进行升序或者降序的排序。

值得注意的是，我对不同种类的文件，比如音乐、图片都设置了不同的彩色图标，用的是阿里矢量库里的svg图标。

4.上传文件功能

我们现在点击上传按钮。页面就会弹出资源管理器。

我们上传两个视频试试。

我们可以看到，在页面上会出现一个上传列表，里面就是我们刚刚选择的两个视频，从蓝色进度条和百分比我们可以得知上传进度。

上传成功后在两个文件后面会出现一个绿色的勾。同时，我们可以看到页面已经自动更新，表格中已经出现了我们上传的两个视频。

上传的文件成功上传后进度条并不会消失，我们可以点击隐藏列表按钮来隐藏上传列表。

再次点击后，就会重新出现。

如果点击清空列表按钮后，这个列表就会彻底消失，清空列表和隐藏列表按钮也会消失，知道下次上传文件重新出现。

5.在线预览文件功能

在线预览图片

运用的是Element Plus中Image组件中的大图预览功能。

可以实现放大缩小、顺时针旋转和逆时针旋转的功能。

在线视频预览

运用的是Vue-video-player插件，同时运用了Element Plus中的Dialog组件提供全屏遮罩效果。

视频菜单栏中有暂停按钮、音量调节按钮、时间轴拖动、倍速调节以及全屏按钮，这里不做演示。

在线pdf预览

运用的是PDFObject插件，我进行封装成单文件组件后调用使用。

该插件和Edge浏览器中的pdf预览插件貌似是同一个，拥有强大的功能，比如画笔绘制、高亮显示、打印等等。这里也不做演示。右上角点击×可以关闭预览。

mp3音频预览

运用的是HTML5原生标签<audio>实现在线预览。因为许多优秀的音频预览插件都不支持vue3，最终选择了原生标签。

6.文件下载功能

点击下载按钮就可以自动调出浏览器下载对应文件。

7.文件分享功能

点击分享按钮后，页面将自动生成一个可供外界访问的链接。

我们点击复制链接后就可以复制此链接，点击后还会有Message组件提示复制成功。

8.文件删除功能

删除成功同样会有Message提示。

---

至此，基于Vue.js和Node.js的个人网盘系统的主要功能介绍完毕了。

源码github地址