115499204

# 这个项目是?

Picals 是一个受 Pixiv 启发、由我本人自发创建与设计的一个插画收藏平台项目。它旨在为大家提供一个相较于 Pixiv 更方便、在国内浏览更快捷的找图、存图的方式,并且和论坛的功能相结合,营造和谐、舒适的国内插画讨论环境。

# 这个项目の起源

一切的起源只是单纯的喜欢。我是一个爱好动漫和插画的人,平时一有空的时候便会打开一些比较著名的插画平台进行浏览,看看今天有没有我中意的画作。一旦遇到符合审美戳我 xp 的作品,我都会一脸欣喜的将该作品保存至我的电脑内部以满足我的收藏欲绝对不止我一个人有这么干过吧,并时不时打开浏览其细节。

但是这样子 仅仅只是将插画图片保存到电脑磁盘内部 ,我现在想要仿照 Pixiv 等插画网站,打造一个属于我自己的插画收藏空间,从而能够随时随地浏览到我自己的一些收藏。并且能够提供给他人进行访问,能够大概的知道我的品味如何。

除此之外,Pixiv 在我使用的过程中,我个人也发现了很多对用户不太友好的方面,比如:

  1. 没有收藏夹分类功能,Pixiv 的作品一旦收藏过多,则会出现 我突然想要看某个作品,往往得去喜欢列表翻上半天 的问题。
  2. 不对普通用户提供历史记录功能。我相信大部分的国内用户是不会开 Pixiv 会员花这个冤枉钱的,对吗?
  3. 不对普通用户提供热门排序功能。如果想要找某个标签最热门的插画,你必须要开启 Pixiv 会员。
  4. 不能切换浏览中插画列表。当用户在主页,点击最近用户新作,想要按列表的形式顺序查看所有的用户新作,可是 Pixiv 网页端默认按 作者发布的作品列表 进行列表维护。这就造成了用户较大的不便。

除了这个个人的一些牢骚之外,我也实在感觉国内的插画平台几乎都是死气沉沉的没有一丝生气,并且对于没有渠道去获取插画的用户显得十分的不友好。大部分用户获取插画的渠道居然还是 b 站,这是令我较为震惊的。我希望能够提供这么一个平台,虽然不知道后续的发展具体会如何,至少希望能够让大家的找图、存图的过程更加的顺利一点。

最后,也是我个人的一点私心 —— 我的这个项目打算 从零开始 100% 手写出来 ,无论是在开发的角度还是产品的角度对这个项目进行全方位的审视与功能的完善、迭代与更新。 我相信这是一个比较重大的挑战,不过我也喜欢这些挑战,我喜欢写点乱七八糟的东西来提升自己 www。

# 技术栈

这个项目主要的技术栈为 React + Nest.js ,都是目前相对比较流行的技术栈,具体的技术栈可以进入上方的仓库进行查看。

之所以选择 React 而不是 Vue,是因为我发现目前大多数入坑前端的同学都是侧重于 Vue 技术栈的学习,然而就国内的大环境而言 React 基本是前端人人必备的一项技能。 毕竟技多不压身嘛,会的多一点也是件好事。

并且后端采用了 Node.js 中的一款当下最流行也是相对最完善的企业级框架,我认为对这门框架的掌握不仅对 TS 这门语言本身会有新的认识,并且它本身的注入、装饰器、MVC 架构搭配一些 ORM 工具等等的东西,能够对后端的编写逻辑有新的认识,也可以为自己将来拓展新的技术栈打下一个比较好的基础。

最重要也是最有用的一点,实现了开发语言的大一统:全部使用 TS 进行开发。 这对于类型的约束和代码的可读性都会有很大的提升。

# 文档

该项目目前的设计文档包括但不限于:

# 这个项目的进度

目前该项目处于 V0 版本收尾阶段

对应的 Github V0 版本未完成功能 Issue 清单列表:点这里

对应的代码风格优化指南:点这里

# 前端

前端部分,目前已经基本将 V0 版本的 UI 部分全部绘制完毕。现阶段着重在:

  1. 修复已知的 bug(需要和后端对接联调);
  2. 完成功能分析文档中尚未完成的部分;
  3. 优化代码结构;
  4. 优化前端渲染性能(React);
  5. 优化打包;
  6. SEO;
  7. VITE-SSG。

如果想了解目前的开发进度,可以访问仓库的 commit 部分进行查阅已完成的内容。感兴趣的同学也可以看一下目前的部署效果: https://www.picals.moe

# 后端

后端部分,目前几乎已经将第一版接口文档中的全部接口都编写完毕。现阶段着重在:

  1. 修复已知的 bug(需要和前端对接联调);
  2. 完成功能分析文档中尚未完成的部分;
  3. 优化代码风格和结构,尽可能遵循 nest 项目最佳实践,有助于项目后期的维护;
  4. 优化 service 中的查询语句,提高查询性能;
  5. 使用 Redis 对查询做缓存优化;
  6. 优化 entity 中级联操作,尽可能用软删除,参考 b 站收藏的视频失效的处理方式

并且,目前虽然是已经将功能实现,但是我个人觉得还有很大的优化空间。目前的部分肯定不是 nest 的最佳实践,我还需要在实践的过程中尝试一些新的方法,或者去调研一些东西。

# 部署

部署部分,可以直接参考上方的部署方案文档。目前前端是部署在 vercel 上的,后端是部署在腾讯云的服务器上,用 Docker 来跑的。

# 项目的仓库地址

前端项目:https://github.com/nonhana/Picals-Frontend-React

后端项目:https://github.com/nonhana/Picals-Backend-Nest

# 联系 / 加入我们

您在使用中,对这个项目产生了任何想要完善的点子,都可以参考 Issue 提交指南来新建一个 Issue。

之所以将这个文档放到我的小博客里,也是想着能够吸引一些对于前后端开发比较感兴趣的、想要找一些项目来练手的同学来一起进行开发。 我个人还是比较希望这个项目能够成为一个对于大家有价值的开源项目的 ,大家能够在一个项目当中 讨论、体会一下完整的前后端分离的开发流程及其架构的设计

另外说一下,这个项目是 纯粹的兴趣驱动的作品 ,而且原本是打算 我一个人从零开始 100% 开发完成的 ,但是转念一想或许可以帮助到一些想要参加比较实际的项目开发的同学,因此我在这个文档的末尾加上这么一段。

并且我相信大家集思广益的经验是最宝贵的,我也想在这个项目的开发中实现对整个项目前后端分离开发 + 项目部署的 最佳实践

而且我自己也想和更多的人进行交流,可惜我本人是个社恐,并且在学校里面遇不到志同道合的人,只能把这个想法写到这里....... 希望能被有缘人看到吧呜呜呜呜

如果您是无意间浏览到这个项目的,并且有兴趣参与这个项目,或者在目前的演示中发现 BUG、提出新的需求,或者想要单纯的了解我们、讨论交流,您都可以加入我们的哦!

对于我而言,大家一起做东西,在交流中一起进步、一起了解更多的前沿技术或者是解决一些困难的 bug,都是十分有意义的事情!

下面给一下我的联系方式: