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

前言

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

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

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

以下是我的开源地址,欢迎大家参考学习:gitee.com/cancerai/pr...

准备工作

前端

前端其实我也是想了好久要不要自己写,但又想到我也没什么创造力,想不出好看的 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的适配。

前端部署

使用apache(nginx,IIS都可以),把 git 目录下除了back-end文件夹所有的文件都copy到你的服务器根目录。 浏览器访问你的服务器ip地址,按照正常情况应该是显示网盘首页,但是是空的,因为还没有部署后端。

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

后端部署

springboot

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

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

然后在项目的所有Controller目录中把所有192.168.124.2替换成你自己的实际 ip 。为什么我不把 ip 都写在一起,因为当时写的时候没注意到,我也没办法。(这里替换,大家可以用IDE自带的替换工具来操作,更省力些)

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

数据库

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

验证

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

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

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

给出以下建议:

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

总结

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

开源地址:gitee.com/cancerai/pr...

相关推荐
2301_819287122 小时前
ce第六次作业
linux·运维·服务器·网络
武汉联从信息2 小时前
如何使用linux日志管理工具来管理oracle osb服务器日志文件?
linux·运维·服务器
刘大辉在路上2 小时前
突发!!!GitLab停止为中国大陆、港澳地区提供服务,60天内需迁移账号否则将被删除
git·后端·gitlab·版本管理·源代码管理
Aileen_0v03 小时前
【AI驱动的数据结构:包装类的艺术与科学】
linux·数据结构·人工智能·笔记·网络协议·tcp/ip·whisper
州周3 小时前
Ftp目录整个下载
linux·服务器·数据库
Jackey_Song_Odd3 小时前
Ubuntu 24.04.1 解决部分中文字符(门、径)显示错误的问题
linux·ubuntu
kaixin_learn_qt_ing3 小时前
Linux export命令
linux
余额不足121383 小时前
C语言基础十六:枚举、c语言中文件的读写操作
linux·c语言·算法
冷曦_sole4 小时前
linux-19 根文件系统(一)
linux·运维·服务器
AI大模型学徒4 小时前
Linux(二)_清理空间
linux·运维·服务器