「¡HolaH! SaaS Starter」MOC

分类:备忘录
3分钟阅读

契机

该项目创建的契机:吾辈最初打算找个项目体验上手 React 生态下的明星框架 NextJS,网络上搜索开源项目过程中,注意到该开源笔记 “Next.js 应用开发实践”

“仔细一想,不如先把我用 Next.js 开发全栈应用的这些宝贵经验总结起来,写成一本小书,分享给更多人”。

通读一遍,吾辈评价很高,所以循着笔记的章节内容,自己跟着上手实操,当然过程中不断拓展,最终才有了项目 "HolaH SaaS Starter" 的雏形。

既然是主题为“全栈应用的开发”笔记,内容便离不开:

  • 前端 UI 的呈现;
  • 后端接口的处理;
  • 数据库对数据的存储变更。

所以吾辈循着笔记实践,最终完成的该项目也有助于对以上几个方面的练习实操,见微知著。

(另,该开源笔记也有不可忽略问题如:成书较久远,时效性欠佳,对一些库的 api 调用属于历史废弃写法,当下已经发生变更。所以在阅读时,需自行匹配库最新版本进行修改,比如有对: @tanstack/react-querynext-connect 的 api 封装或调用;但是整体质量是有的,仍然推荐阅读)

正文

直观截图

对于该项目,吾辈并不打算部署在线上访问,所以这里简单截图呈现项目的部分页面:

首页截图

项目的首页即整体说明页

对项目涉及点进行了简单的罗列说明

多主题内置

内置主题

离不开的增删改查

登录用户的发帖页面

既然定位是全栈应用的构建模板,除去吾辈熟悉的前端开发工作,也需要涉及到:

  • 数据库的(初始化/变更)操作;
  • 后端接口的声明/鉴权;

吾辈使用 Prisma 作为数据库 ORM。

如下的 .prisma 格式文件的声明:

schema.prisma

上面的 schema 文件声明,对应“表”之间的关系如下图:(由 Prisma 官方在线工具生成)

数据表之间的关系图

Important: You need to re-run the prisma generate command after every change that's made to your Prisma schema to update the generated Prisma Client code.

[Generating Prisma Client]https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client

THX | 以及离不开这些开源书籍/项目的帮助

上述开源书籍/项目对吾辈开发中遇到问题,和技术选型都提供了莫大帮助,写在这里表示感谢以及备忘。

「¡HolaH! SaaS Starter」MOC

https://blog.ninoh.cc/loc-blog/12_moc-on-saas-starter[Copy]
本文作者
ninohx96
创建/发布于
Published On
更新/发布于
Updated On
许可协议
CC BY-NC-SA 4.0

转载或引用本文时请遵守“署名-非商业性使用-相同方式共享 4.0 国际”许可协议,注明出处、不得用于商业用途!分发衍生作品时必须采用相同的许可协议。