chore(ci): blog sync

Author: coderPerseus

data/blog/post-48.mdx

@@ -0,0 +1,107 @@
+---
+title: 借助 Cursor 做了第一个全栈项目，帮你将内容转为美观的图片
+date: 2025-03-13T00:31:12Z
+slug: post-48
+author: chaseFunny：https://github.com/chaseFunny
+tags: []
+---
+
+
+大家好！我是 luckySnail，今天想分享我和 Cursor 一起开发的我的第一个全栈应用，我叫它 「SVG 秀」，听名字就知道跟 SVG 沾边，那它是干什么的呢？简单来说，它是使用当下最强的大模型快速将你的内容转为 SVG 图片的工具，并且支持在线编辑，保存，下载。体验地址：https://www.svgshow.cn/，我为每个人提供了 5 次免费体验机会，如果你也想要快速把内容转为生动的图片需求，那我建议你试一下，下面给大家看一下生成的图
+
+![svg-1741793264158](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/svg-1741793264158.png)
+
+我仅仅是将内容上传上去，然后它就给我生成了这样的内容，真的很惊艳！下面看看我是如何结伴 Cursor 完成这个项目的吧！
+
+## 前端开发
+
+先看看技术栈：
+
+- next.js 15.2
+- Tailwindcss 4
+- zod
+- zustand
+- highlight.js
+- shadcn/ui
+- ahooks
+
+基本上都是主流的技术，刚好尝试了一下 next.js 最新版本，开发体验巨大提升，主要体现在：
+
+1. 更详细的报错信息
+2. 更快的启动速度和页面跳转速度
+
+开发过 next.js 都知道我在说什么！
+
+前端其实没有特别复杂的部分都是基础的页面开发，值得一提的有两点：
+
+1. 在 svg 生成完成转为 UI 渲染过程中，直接切换有点生硬，这里借住 AI 实现了流畅的过渡动画
+2. 由于 SVG 在线编辑器开发比较耗时，这里使用了开源的工具，借住 AI 快速进行汉化，然后通过 iframe 间通信的方式，实现 SVG 在线编辑能力，而且我发现社区目前没有比较好的现成的 SVG 编辑器
+
+虽然开发过程中，绝大多数的代码都是由 AI 生成，但是代码质量应该还是可以的，通过 rules 和微调保证了代码的质量，最后，我将代码开源啦！如果你觉得不错，辛苦帮忙点个 star 吧！这对我是非常大的鼓励！
+
+开源地址：https://github.com/chaseFunny/svg-frontend
+
+## 后端开发
+
+作为一个前端开发者，后端肯定是要使用 node 来开发的，最近学完了 nest.js ，于是就刚好练手一下！我先在 github 上找到一个 star 比较多的 nest.js 模版：https://github.com/Saluki/nestjs-template
+
+让我先介绍一下这个项目基本情况：
+
+- 基于Nest.js 10 的 Fastify（ HTTP 服务器），内置健康检查 API
+- 完全的 TypeScript 支持，严格的代码规范校验 
+- 集成 Prisma ORM 的 REST API
+- JWT（jsonwebtoken） 认证
+- Swagger 文档集成
+- Joi 参数校验、jest 测试
+- Wiston 日志记录、Nodemon 的开发热重载
+- 标准的开发目录结构
+- Docker 集成
+
+得到一个基建非常好的项目后，我的完整开发过程如下：
+
+- 选择使用 PostgreSQL 作为数据库，
+- 借住 AI 帮忙进行数据库设计
+- 完成数据库设计后，编写 schema.prisma 进行数据库初始化
+- 用户模块开发，用户的增删改查
+- 注册登录逻辑开发，这里包含注册需要的邮箱服务，我使用了 nodemailer
+- 全局 JWT 认证守卫开发
+- SVG 模块开发，我这里应该不是最佳实现，属于跟着 AI 摸石头过河了！
+  - 主要的接口有：svg 创建，生成，获取，或者指定 id 信息
+  - svg 生成：这里我使用了 vercel 开源的 ai-sdk ：https://github.com/vercel/ai 来快速进行数据的获取和处理，其实我自己写了一套获取数据，解析数据的代码，但是最后发现不支持并发，才去开源社区找到了 ai-sdk，下次分享一定是分享 ai-sdk 的源码阅读，看看人家是如何在 node 中处理大量请求的
+  - svg 更新：因为我提供了在线更新 SVG 的能力，所以我是新增了一个表来存 svg 信息和更新记录
+
+到这里就结束了，如果你对开发细节和数据库设计感兴趣，可以查看源码：https://github.com/chaseFunny/svg-backend
+
+## 上线
+
+开发完成了！就要上线了，真的是瞎折腾还费钱，下面记录一下我使用的在线部署服务：
+
+前端 next.js 和 后端 nest.js 其实都是 node 服务，这里最佳方式应该是通过容器化部署，然后再搞一个 CI/CD，但是小作坊还不知道这个项目是什么情况就一切从简吧！我使用的是服务器部署（结合宝塔）
+
+数据库使用的是阿里云免费体验的 RDS 服务，数据库上线参考：https://www.yuque.com/asgas/bzyz7m/hl57otmtcfgr223q
+
+nest.js 服务上线也很简单，把源码弄到服务器，然后通过pm2 部署，这里需要写一个 ecosystem.config.js，详情参考上面的文档
+
+最后就是前端的上线了，next.js 不用说肯定是要部署在 vercel 上呀！但是，我是在国内使用呀！还是老老实实部署在服务器上吧！部署方式也是把源码上传到服务器，然后进行 build 和启动，这里可以写一个脚本，然后通过宝塔面板的 node 部署来进行部署
+
+部署完成后，如果你有自己的域名，你可以去域名配置解析，然后让用户通过域名访问
+
+到这里还差一步就是ssl证书，这里我使用的是 腾讯云的免费三个月证书
+
+完结撒花🎉
+
+## 总结
+
+虽然这个项目业务逻辑不复杂，但是真正开发到上线还是需要一段时间，下面分享一下我的项目开发收获吧！
+
+- 对请求头，响应头理解更深，熟悉了 Restful 风格  API
+- 熟悉了全栈项目开发流程，深刻感受到 后端 > 前端 😭，但是依然热爱前端🩷
+- 数据结构真的很重要，好的数据库设计能够减少很多开发量
+- AI 真的很强大，但是前提是在开发者本身就不差的情况，感觉 AI 在强者手中能够发挥更大的价值
+- 不要造轮子（有这时间可以读别人的源码，个人觉得更有价值），多看看 github ，了解最新技术动态！
+- 对面向对象编程和面向过程编程理解更加深入
+
+
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/48" target="_blank">github issues</a>