Skip to content

cuzxx9929/XNetdisk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

X网盘

本项目为前后端分离项目,前端基于Vue2,后端基于Nodejs采用Express框架,用户文件信息采用Mysql保存。

项目基本功能简介

  • 支持用户注册、登录,对用户名和密码有长度及内容有一定要求。用户可选择是否保存登录状态,即下一次登录是否需要重新输入用户信息。
  • 用户登录、注册需要通过滑动验证码证证实真实身份,验证图片及缺块位置由后端动态随机生成。由后端验证人机的真实身份,前端仅传递鼠标轨迹。
  • 支持于网盘内部创建文件夹、删除文件夹、进入文件夹、点击上传文件、拖拽上传文件、下载文件、查看文件信息、筛选文件、批量删除文件等操作。
  • 支持pc浏览器窗口及手机移动端窗口。
  • 数据传输采用https协议,数据库加密存储,保证数据安全。

项目核心功能实现方案

  • 用户登录

    我才用的是JWT结合LocalStorage和SessionStorage保存用户实现用户登录状态保存。当用户登录时,后端生成并返回JWT,如果用户选择下次自动登录,浏览器将其保存于LocalStorage,若不选择,则将其保存于SessionStorage。除了登录、注册、获取验证码接口外,其他业务逻辑接口必须进行身份验证,即必须携带JWT,保证数据的安全性。基本逻辑由下图所示。

  • 验证码实现

    用户输入完登录或注册的用户信息后,并非直接向后端发送请求,而是需要完成滑动验证码操作。前端向后端发送请求,后端调用Python脚本从图片库中随机选择一张图片并随机截取其中的一部分作为验证图片,再于此验证图片中随机截取一个位置的图片作为滑块,将滑块位置信息记录于Session中。用户点击验证码时开始记录鼠标位置信息,用户松开鼠标时发送鼠标轨迹信息及用户登录或注册的用户信息。后端首先验证滑动验证码是否有效,若有效,清除Session,再进行用户的登录或注册等操作。若无效,则不再进行进行后序操作,返回前端错误信息,前端重新发送获取验证码的请求。基本逻辑如下图所示。

  • 文件操作

    文件上传采用FormData携带文件,文件下载是在后端读取文件二进制数据返回前端的方式。用户上传文件会在数据库中记录其存储位置以便后序操作。在某个文件夹下上传文件或新建文件夹会在数据库中记录该文件或文件夹所属的父文件夹,若删除某文件夹,会通过宽度优先遍历得到该文件夹下所有的子文件夹和子文件并一一删除。

  • 移动端适配

​ 页面布局采用Flex布局,自适应设备宽度。

项目网站

X网盘

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published