自己用html+springboot写了个网盘项目（探讨+吐槽+唠嗑大杂烩）

前言

最近一直在学习java和springboot，于是哈，我突发奇想，想自己写一个网盘（因为我觉得可以写出来，虽然是新手）。而且放在家里还能当个小云盘用呢。

之前我在网上有没有看了好多的开源网盘，要么太丑了，要么就是功能太杂，和我的预想不符合。那么我想自己开发一个网盘，反正我也在学编程，就当做练习了。

项目的部署详细步骤我放在文章最后，感兴趣的可以研究一下，有任何问题都可以在留言区或在gitee提交issues。

以下是我的开源地址，欢迎大家参考学习：https://gitee.com/cancerai/project/tree/master/AiPan

准备工作

前端

前端其实我也是想了好久要不要自己写，但又想到我也没什么创造力，想不出好看的 ui 和 js 交互，所以我还是在 GitHub 上拷了一个国外老哥的开源（登录界面），也是非常感谢开源社区的力量。
具体的GitHub地址忘了，没保存。

还有就是网盘首页，我用了阿里云盘的ui

后端

后端我是打算自己写的（毕竟我也是学后端的，不自己写那还练什么），后端在写之前大致也整理了下需要怎么写：

其实也很简单，首先肯定有用户登录吧，那就要涉及到数据库的增删改查，这个很简单。
然后对于文件的操作至少也是有 上传，删除，修改（名字）等，这些看起来不难（实际也不难）。

使用技术

前端

html + css + js
没看错哈，就是原生web开发，因为vue我不熟

后端

springboot + mybatis

跌宕起伏的开发历程

为什么说跌宕起伏呢，因为没我想的这么简单，大部分时间都浪费在了前端(。òᆺó)，本来只想练练后端的。

前端UI部分

登录注册界面

之前有说了，登录注册界面是用了GitHub上的一位老哥的开源项目，不得不说，他写的代码还是挺不错的，在ui这一块基本不需要改动，不过因为他是国外的，所以他的网页语言我也看不懂（不是英语），我要做的就是翻译他的网站。反正东西也不多，去 bing 一下就知道了。

网盘首页

网盘首页我是拷了阿里云的，这边我也纠结了好久，不是因为侵权哈，而是要不要用开源。但我在各大开源社区和论坛逛了一圈发现，那个ui要么太丑要么就是要 momey ，作为白嫖党的我肯定不会氪金啦。又想到可以自己写，但是我想了好久也没想到美观的ui，看来我还是更适合后端o(╥﹏╥)o

于是乎，我想到了我之前用的阿里云网盘，他界面美观，也没有什么多余的功能，很符合我对网盘的憧憬。

于是哈，我反手 f12 ，代码到手✧٩(ˊωˋ*)و✧
不过有一个问题就是copy下来的代码太乱了，足足2万多行，嘶～毕竟人家功能多，而且应该也是用框架开发然后生成的（盲猜）

经过我一晚上的优化终于理顺了这么一大坨代码了，我把css和HTML分离出来，让我 happy 的是里面没有写js（全是引入的），这就很方便了。
我删除了我不需要的元素，以及加上了注释，整体html就不到300行。至于css嘛，其实那2万行代码主要就是css撑出来的，我也试过优化，但失败了，所以css我没改过。

前端脚本部分

登录注册界面

登录注册这边其实很简单，无非就是发请求给后端，然后看看用户对不对，密码对不对，再返回个结果。
说起来很简单，做起来也很简单(◍•ᴗ•◍)

但让我烦恼的就是逻辑我觉得有些麻烦，我有个缺点就是写一些逻辑的时候，有时候写着写着忘记要怎么写了，或者说脑子乱了。这就很难受(◍•﹏•)，就因为这个，刚开始我还真差点乱了（登录注册本身简单，就是加上个token验证让我乱了阵脚）

于是，我就做了个ppt，在ppt上把需要实现的思路都画出来，然后再把他们实现为代码。

经过这个的流程，我的思路还真的很流畅，提高了开发效率(ᐛ )👍

网盘首页

网盘首页大致一想的话，也没什么难的。

大致理一下哈，网页加载完请求后端来获取有哪些文件，有哪些目录，以及他们的名字，修改日期，大小等。然后再把这些用js渲染到页面。

然后我还做了自定义右键菜单，这里也是我弄的比较久的地方（现在都想不明白我为什么要花这么长时间搞前端ಥ_ಥ，但又没办法）。
这时候该有人吐槽了，右键难吗，不就是取消默认动作，然后显示个自己的div吗，确实哈。但难点不在这，我想的是怎么在右键的地方出现菜单，emm怎么说呢，就是在哪里右键，就在哪里显示。这其实不难，但我不会这一块技术（不会定位鼠标位置），而且还要计算出现div的位置，感觉比较麻烦，

于是哈，在我的再三思考下，直接 bing 一下，拿到代码后略微改一下就好了。

其实还有一个我搞了更久更崩溃的，就是右键文件，我要实现的是，右键一个文件，然后再点击右键菜单里的属性来显示这个文件的属性。
我想的可能比较麻烦了，我想的是点击一个文件，调用一个function，这个function的形参是event，然后我用了 event.target ，我把他log出来一点点找的 o(╥﹏╥)o， 就很烦。
注： 我的目的是为了获取当前右键的文件的文件名，在点击属性的时候把文件名当作实参传到点击属性按钮的函数，然后点击属性按钮的函数把文件名传到后端来返回他的文件信息。
这边肯定会有更优的方法，欢迎大家来讨论。

之后的话应该就没什么好说的，都不难，无非就是时间问题，慢慢写，总能写完的。

后端开发

前面写前端可累死我了，本来想着重于后端，但没想到前端搞我这么长时间ಥ_ಥ

其实总的来说后端我写的还是很简单的，比如说登录注册的部分，无非就是数据库的增删改查。

主要来说说网盘部分，网盘这一块其实也没难点，就是和小伙伴唠唠哈。先说下大致流程：
网页加载完发请求，后端接收到请求后用FIle去服务器（我本机）找对应的用户根目录，我的结构是这样的：在某路径下有个user_file目录，下面一级存放每个用户的根目录，在每个用户目录下存放该用户所有的网盘文件和目录，和Linux的home目录一样。
在根据用户找到对应的文件和目录后以List类型返回给前端，然后交给前端去渲染。返回的结果我封装了个Result，方便前端处理。

然后想什么上传文件，删除文件，修改文件名，查看属性这些功能还是不难的，主要还是前端搞了好久。后端主要涉及到File文件操作，数据库操作，jwt验证等，其他的就没什么了。

项目部署说明

使用环境

ubuntu22.03 + apache2 + mysql8 + jdk21 + springboot3.0.3
注： 因为我没有对windows路径做适配，所以只能在linux下部署（windows路径是反斜杠，linux是正斜杠），不知道以后还会不会做windows的适配。

前置准备

把项目 clone 到本地: https://gitee.com/cancerai/project
Tip：project 这个仓库是我平时做的一些项目会放到上面，这次我们需要的是 AiPan（我网盘的项目名字）。
把AiPan下所有的东西 copy 到你的 web 服务器根目录。

前端部署

使用apache（nginx，IIS都可以），在 AiPan 项目下找到 globalVariable.js 文件，这是定义前端中所有的全局变量，
在里面修改 serverIP 为你后端服务器的 IP，再把下面的 backEndPort 改成你后端将要部署的端口（默认8080），

浏览器访问你的前端服务器ip地址，按照正常情况应该是显示网盘首页，但是是空的，因为还没有部署后端。

检查登陆注册是否正常显示：浏览器手动输入 前端地址:端口/login/index.html
正常来说，登陆，注册，忘记密码三个页面可以正常打开。

后端部署

springboot

安装好jdk，mvn等工具
打开 application.properties 文件，修改里面的mysql连接信息
在下面有我自定义的 static.path 属性，这个是你的用户文件存放的位置，通俗点来说，相当于 linux 上的 home 目录。

还有一个我自定义的属性是 server.ip.address 这个是你服务器的ip地址，将其改成你自己的。

全部都配置好后，可以使用IDEA把项目运行起来，或者用mvn打包运行，（我用的是默认的8080端口，如果你自定义了，需要在前端里把请求端口替换成实际的）

数据库

在pom.xml文件中修改数据库信息为你自己的。
在 AiPan 根目录中可以找到sql.sql文件，把它source进你的数据库即可。

验证

运行完浏览器访问前端服务器：
首次进入，正常情况下会进入登录页面，按照提示注册，完成后，在你的用户根目录(就是 static.path 属性配置的目录)中可以看到以你注册的名字为名字的目录，那么这时候说明注册成功。

正常情况下登陆完即可进入云盘主页，此时在页面上右键即可上传文件，文件夹等操作。如果都没问题，则部署成功，反之失败。

运行效果和预期不一样怎么办

给出以下建议：

• f12检查网络请求进行判断。
• 查看后端输出的log来判断错误
• 检查前后端代码是否书写错误。
• 检查前后端运行的端口是否正确，有无冲突。

总结

总体来说，我这次写出来的效果还是挺满意的，也是作为我自己的一个练习来完成。总耗时一周时间开发完成。也算是对我前后端所学的一个整合吧。

开源地址：https://gitee.com/cancerai/project/tree/master/AiPan