嗯,没错,这个 Pixiv 就是你们想象中的那个东东,那个 世界最大的插画交流网站。
我为这个项目取了一个更加朗朗上口的名字: Picals 。
话不多说,先放几张目前开发好的状态吧,感兴趣的同学也可以直接点开目前部署好的地址进行访问:点这里
# 现阶段成果展示
# 为什么要做这个项目?
- 我是老馋二次元(
- 为了提升我的技术
- 希望能够多交到一些朋友,一起沟通交流~
- 真正自己体会一遍从零开始的全栈开发
# 技术栈
# 前端
前端,采用 React18 + Vite + TypeScript + Redux + Unocss。
为什么用 React?因为 Pixiv 官网就用的 React,并且我自己也有意识的想去拓展自己的技术栈,算是给之前只会 vue 的自己一点挑战吧。
Vite,单纯是因为它构建速度快、开发体验好。
Redux,单纯的是被过时的资料给误导了。之后打算换成 Zustand。
Unocss,原子化的 CSS 框架。它真正的实现了在开发过程中不写一行 css 代码。尤其是对于纯 React 来说,如果不使用 Unocss,每一个组件几乎都需要一个配套的 index.scss
来存放样式。因此,在这个项目中采用它能够做到 纯 TSX 开发。而且有一说一,样式非常便于管理,并且支持自定义样式名称来扩展。 难的地方在于怎么记住每个样式对应的名称。 顺带一提,我是配合 Unocss 官方的 vscode 代码提示插件一个个试出来的(笑)。
# 后端
后端,采用 Nest + Typeorm + MySQL + Redis。
为什么用 Nest?因为它可以配合 React,实现完全的前后端使用同一种语言进行开发, 大大降低了前后端接口对接、类型维护的成本。 并且可以根据接口自动生成 Swagger 文档,十分的方便。传统 MVC 架构也十分符合我们的开发思维。
Typeorm,是一个 ORM 映射框架,主要在 TS 中配合装饰器使用。Typeorm 和 Nest 的相性非常好,因为两者都依赖于装饰器进行面向切面编程。
emmm,不过最近貌似出来了一个新的 Prisma,似乎也很厉害,之后在重构的时候出于对技术栈的扩展说不定会采用。
MySQL,是一个非常传统的关系型数据库。选它的原因单纯是我对它比较熟,用的比较多。之后可能会考虑和别的数据库相结合如 mongodb,因为其在处理如 作品推送 的逻辑时会变得非常难以处理,导致整个表的记录条数以指数级别增长。考虑到如果数据量过多、并发量过大,更为 PostgreSQL。
Redis,用做缓存来优化数据库查询性能以及验证码的限时校验。
# 相关文档
该项目的相关文档我已经全部在我的个人博客里进行发布。
现阶段的文档总共分为八个部分(未完待续):
如果有需要了解该项目的前世今生,或者是想要借鉴学习、提出建议的小伙伴,可以点击进行查阅哦~!
# 仓库地址
该项目由我本人从 0 到 1 完全一行一行代码手写出来。100% 开源、免费,欢迎有需要借鉴学习的小伙伴 fork、查阅。如果能稍微给个 star 那就再好不过啦~
顺便吐槽一下,这个 nest 项目在我实践的过程中几乎找不到其所谓的最佳实践目录结构的范本。因此我的组织结构肯定不是最完美的,但是我个人认为是结构比较清晰的。有更好的想法,欢迎提 Issue 一起交流哦~
后端仓库:Picals-Backend-Nest
# 数据来源
现阶段的数据为 纯手工上传 + Pixiv 爬虫。
# 后记
其实这篇文章,现阶段发出来对我来说其实也是一个心态上的挑战。
这个项目是我个人纯粹的兴趣驱动项目。 从最开始到如今的成果,一路上其实踩了非常多的坑,尤其是对从没有接触过系统后端开发的我来说。并且由于整个项目纯粹的由我一个人编写完成,中途也没有人来对我进行指导,仅凭我一个人的技术调研自然免不了有 闭门造车 的嫌疑。
自然,我撰写这篇文章的目的也是希望能够吸引一些 对技术感兴趣 ,或者是 单纯喜欢插画 的小伙伴一起来完善、增强该项目的功能。毕竟我也只是一个学生,大家的意见才能促使我进步呀!!我本人,也在非常迫切的寻找所谓的 最佳实践 中!!
该项目目前只是 最基本的第一版 大致开发完毕,其中仍有比较多的错误以及开发不到位的、我自己没排查到的地方。十分十分欢迎大家的斧正!!
如果在使用过程中有遇到 bug,欢迎到我对应的上述的 前端仓库(不是后端仓库) 中新增一个 Issue,我看到了都会即时回复的!!
另外,如果同样也是有想参与到这个项目当中一起共同交流,或者只是单纯的想要学习的同学,当然也十分的欢迎!有关于详细的细节,可以参见我的小博客的概览文章哦!
嗯,希望我的这个小项目能够带给有需要的人一些参考、借鉴的价值!感谢您能够读到这里,ありがとうございました!!