没错，这个 Pixiv 就是你们想象中的那个 Pixiv，那个 世界最大的插画收藏网站。
我为这个项目取了一个更加朗朗上口的名字： Picals 。
嗯，话不多说，先放几张目前开发好的状态吧，感兴趣的同学也可以直接点开目前部署好的地址进行访问（国内可以正常访问）：https://www.picals.moe
# 现阶段成果展示
# 为什么要做这个项目？
其实很简单，因为 我喜欢二次元，并且恰好我觉得我能够实现它 。
有些事情，总是是先有个想法。如何抓住它，将这个转瞬即逝的想法成功实现并落地，我觉得是一个技术人，或者是说一个有能力的人该有的品质。
最开始的最开始，我也仅仅只是一个喜欢在 Pixiv 上收藏插画的一名普普通通的小二次元。
刚逛 P 站的我，对于所谓的网站开发实际上并没有什么概念，我只是单纯的觉得这个站做的真不错，充斥着大量的图片元素，映入眼帘的都是我感兴趣的插画。并且点击进入可以浏览图片详情，用户的主页也做得十分的美观。
也正是在不久之后，在一次偶然的契机下，我正式的入坑了前端开发这一领域，开始系统性的接触到了网页应用的编写与开发。在学校的一个 web 课中，老师让我们期末上交一个使用纯三件套编写的静态页面作为期末大作业的内容，题目自拟。
这个时候，我脑海中闪过的第一个念头便是：模仿一个像 Pixiv 这样的网站。这个网站大部分的元素都是由图片组成，只要放的图够多，老师就看不出我这个网站本身如何了！！而且，图这么多，本身结构一定不复杂！！
然而，事实证明，Pixiv 本身的复杂度比我想象中要多得多。 因此那个大作业，也仅仅只是画了几个静态原型图罢了（不过最后还是拿了高分 www）。
也正是从此刻开始，我意识到 我自己纯手写一个类似的站点，似乎也不是不可能？ 于是这个想法开始慢慢地被种下。
在之后的一年时间里，我依然主要在前端方面下功夫。先后学习了 Vue2 + Vue3 后，又去学习了前端相关的衍生知识，如 TS、打包工具、SSR 等。
除了前端方面，对于服务端我也出于兴趣，系统性的学习了数据库、运维相关的一些知识，并且接触到了 Node.js，为我日后开始大规模编写全栈应用打下了基础。
并且在学校的这段时间也成功的积累到了几个比赛的项目，做出了一定的成果，直到现在。现在的我，说不定真的能够把当初的理想给实现了。
于是，这个项目就开始了。很简单，对吧？
# 技术栈
说了这么多，肯定是得讲一下技术方面的事情。先解释一下技术栈的选取。
# 前端
前端，采用 React + 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，因为其在处理如作品推送的逻辑时会变得非常难以处理，导致整个表的记录条数以指数级别增长。
Redis，用来做缓存来优化数据库查询性能以及验证码的限时校验。
# 相关文档
该项目的相关文档我已经全部在我的个人博客里进行发布。
现阶段的文档总共分为七个部分（未完待续）：
如果有需要了解该项目的前世今生，或者是想要参与其中的小伙伴，可以点击进行查阅哦～！
# 仓库地址
该项目由我本人从 0 到 1 完全一行一行代码手写出来。100% 开源、免费，欢迎有需要借鉴学习的小伙伴 fork、查阅。如果能稍微给个 star 那就再好不过啦～
顺便吐槽一下，这个 nest 项目在我实践的过程中几乎找不到其所谓的最佳实践目录结构的范本。因此我的组织结构肯定不是最完美的，但是我个人认为是结构比较清晰的。有更好的想法，欢迎提 Issue 交流哦～
后端仓库：Picals-Backend-Nest
# 后记
其实这篇文章，现阶段发出来对我来说其实也是一个心态上的挑战。
这个项目是我个人纯粹的兴趣驱动项目。 从最开始到如今的成果，一路上其实踩了非常多的坑，尤其是对从没有接触过系统后端开发的我来说。并且由于整个项目纯粹的由我一个人编写完成，中途没有人来对我进行指导，仅凭我一个人的技术调研自然免不了有 闭门造车 的嫌疑。
自然，我撰写这篇文章的目的也是希望能够吸引一些对技术感兴趣，或者是单纯喜欢插画的小伙伴一起来完善、增强该项目的功能。毕竟我也只是一个学生，大家的意见才能促使我进步呀！！我本人，也在非常迫切的寻找所谓的 最佳实践 中！！
该项目目前只是最基本的第一版大致开发完毕，其中仍有比较多的错误以及开发不到位的、我自己没排查到的地方。十分十分欢迎大家的斧正！！
如果在使用过程中有遇到 bug，欢迎到我对应的上述的 前端仓库（不是后端仓库） 中新增一个 Issue，我看到了都会即时回复的！！
另外，如果同样也是有想参与到这个项目当中、共同搭建维护一个插画社区，或者只是单纯的想要学习的同学，当然也十分的欢迎！详细的参与方式，可以参见我的小博客的概览文章哦！
嗯，希望这个小项目能够带给有需要的人一些参考、借鉴的价值！感谢您能够读到这里，ありがとうございました！！
