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

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

1. 注册功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwC1UjZQ-1620663425961)(科技立项中期.assets/注册.png)]

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

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

在这里插入图片描述

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QyuBOTW-1620663425977)(科技立项中期.assets/密码明文显示.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHIAPJPp-1620663425979)(科技立项中期.assets/密码明文显示2.png)]

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZnv1huJ-1620663425981)(科技立项中期.assets/用户名被注册.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HYip5nDA-1620663425983)(科技立项中期.assets/注册成功.png)]

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

2.登录功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bAa6n8Kh-1620663425984)(科技立项中期.assets/密码错误.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVp3w3HC-1620663425984)(科技立项中期.assets/用户名不存在.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JexB8okx-1620663425985)(科技立项中期.assets/登录成功-1620658186965.png)]

3.主界面介绍

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwd66vb0-1620663425986)(科技立项中期.assets/container.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g9ROVw8V-1620663425987)(科技立项中期.assets/菜单图片.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O67MGKfU-1620663425987)(科技立项中期.assets/菜单折叠.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xtE6ZgvW-1620663425988)(科技立项中期.assets/浮动选项卡.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1x1tSNlH-1620663425989)(科技立项中期.assets/主题.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAdHgUm9-1620663425990)(科技立项中期.assets/上传日期降序.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3Q0QIzd-1620663425991)(科技立项中期.assets/上传日期升序.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fad8daHm-1620663425991)(科技立项中期.assets/svg.png)]

4.上传文件功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xD3bi8AF-1620663425992)(科技立项中期.assets/弹出资源管理器.png)]

我们上传两个视频试试。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9VwjOe5-1620663425993)(科技立项中期.assets/视频上传进度条.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNHb1yL6-1620663425994)(科技立项中期.assets/上传成功.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lBUh3Uko-1620663425995)(科技立项中期.assets/隐藏列表.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t3NmIeQb-1620663425995)(科技立项中期.assets/重新点击.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HgV3Pqs5-1620663425996)(科技立项中期.assets/列表彻底消失.png)]

5.在线预览文件功能

在线预览图片

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j1K3cDDQ-1620663425997)(科技立项中期.assets/在线预览图片.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vt6ErRit-1620663425998)(科技立项中期.assets/放大缩小.png)]

在线视频预览

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXyAISha-1620663425999)(科技立项中期.assets/视频预览.png)]

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

在线pdf预览

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ULtEfWl9-1620663426000)(科技立项中期.assets/pdf预览.png)]

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

mp3音频预览

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHqm7R8p-1620663426001)(科技立项中期.assets/MP3在线预览.png)]

6.文件下载功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zzs0QqxE-1620663426001)(科技立项中期.assets/视频下载.png)]

7.文件分享功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O4baylRl-1620663426002)(科技立项中期.assets/分享界面.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVL48nEr-1620663426003)(科技立项中期.assets/复制后分享.png)]

8.文件删除功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDN1Q57J-1620663426004)(科技立项中期.assets/文件删除1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OxhIcBYZ-1620663426005)(科技立项中期.assets/删除成功.png)]

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


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

源码github地址

Logo

前往低代码交流专区

更多推荐