javatang / netdisk

Vue.js+Laravel构建的前后端分离网盘系统

netdisk

Vue.js+Laravel构建的前后端分离网盘系统

百毒网盘（http://github.com/cw1997/netdisk）

技术栈：PHP，MySQL，Apache，Redis，Laravel5.3，Vue.js2.0，ElementUI.

开发规模：1人，4天

开发时间：2017年3月

项目简介：

该项目为本人首个使用Laravel 5.3 + Vue.js2.0开发的前后端分离项目，具有注册登录，文件上传下载，上传进度显示，文件以及文件夹的新建删除，文件回收站的清空和恢复，文件分享，加密分享，当前文件夹搜索和当前网盘全局搜索，具有一般网盘的基础功能。网盘安全性高，用户体验良好。 项目优点：

1. 前后端分离，用户体验良好。
2. 使用elementUI框架构建，用户交互细节考虑周全，让用户操作体验良好，比如loading界面，messagebox提示。
3. 安全性高。文件下载非直接返回路径，而是通过对一个会过期的token进行签名，通过签名方式生成的token既不用在数据库存储又可以简化代码逻辑，将发送至前端后用户的下载链接会带上该token下载文件，防止恶意用户通过爆破文件路径的方式偷走其他用户的隐私文件，同时也可以对分享文件进行可控操作（用户的私密分享不会因为被黑客猜测出路径而被窃取）。用户前端登录之后，后端返回的是一个存储在redis中的会过期的access_token，达到模拟cookie自动过期的效果。注册以及修改密码等关键操作需要发送邮件验证码进行验证。

项目缺陷：

1. 设计数据库时没有考虑到多个用户可能会上传同一个文件时，文件实体与用户实体间的关系本应该为一对多的关系被设计成了一对一，导致需求中有一项“极速秒传”功能无法实现。且意识到这个问题的时候该项目以及开发了一大半，数据库修改带来的工程量过大从而放弃了。
2. 虽然后端对单IP的验证码发送做了限制，但是没有加入验证码，会导致注册时的邮件发送接口被人使用代理IP恶意刷走。
3. Laravel框架本身是一个以服务容器为核心的框架，但是由于该项目是本人为即将到来的项目答辩而做，考虑到时间原因以及后期基本不会维护，从而没有对部分服务做足够的抽象和分层，大量业务代码写在控制器中，导致代码不够优雅，也浪费了Laravel框架本身的优秀特性。
4. 部分功能没有实现完全，或者在高并发情况下会有BUG，比如说文件删除功能理应使用消息队列服务，因为考虑到两种情况。情况1：有可能某个用户在删除一个已经被分享出去的文件的同时，另一名用户正在下载它，导致系统出错。情况2：文件内容过大，服务器高负载情况下删除操作可能速度缓慢，当用户直接关闭浏览器的时候，可能该操作并未完全成功，也有可能导致数据库中文件已被删除，但是文件本身在服务器磁盘中并未删除，造成不一致现象。
5. Vue.js前端编码中，由于时间原因以及自己对于axios这个ajax库了解不够深入，导致后端接口地址被硬编码进了代码中，如果后端需要移植到别的域名，或者后端API路由做了修改，前端将需要进行大量修改。
6. 前端模块组件没有在内聚与解耦把握好平衡。由于考虑到该项目仅仅为答辩项目，因此大量后端异步交互代码写在Vuex中，而非根据情况写在组件中，组件迁移时需要在Vuex中同时迁移异步操作代码，失去了Vue.js所倡导的组件独立的**。
7. 未做异步组件，代码分割以及数据懒加载，导致未被访问的路由中的组件也会被加载进来，浪费了服务器资源，带宽资源以及用户流量。

项目总结：

做一个完美的项目非常不容易，尤其是在一个人做且时间紧迫的情况下。很多东西，比如说编程中的工程化，安全，稳定，效率方面的考虑和优化，都是需要经过大量实践中才能总结出来的。这上面的优缺点很多都是我参考业界开源项目以及前辈的经验总结出来的。虽然在这次项目答辩中，老师和同学对我以及该项目评价很高，但是我自己认识到该项目的缺陷仍然非常多，如果将这种项目投入生产环境中，后果不堪设想。