借助 Cursor 做了第一个全栈项目，帮你将内容转为美观的图片

2025-03-13

2 分钟

AI经验全栈开发

大家好！我是 luckySnail，今天想分享我和 Cursor 一起开发的我的第一个全栈应用，我叫它「SVG 秀」，听名字就知道跟 SVG 沾边，那它是干什么的呢？简单来说，它是使用当下最强的大模型快速将你的内容转为 SVG 图片的工具，并且支持在线编辑，保存，下载。体验地址：https://www.svgshow.cn/，我为每个人提供了 5 次免费体验机会，如果你也想要快速把内容转为生动的图片需求，那我建议你试一下，下面给大家看一下生成的图

我仅仅是将内容上传上去，然后它就给我生成了这样的内容，真的很惊艳！下面看看我是如何结伴 Cursor 完成这个项目的吧！

前端开发

先看看技术栈：

next.js 15.2
Tailwindcss 4
zod
zustand
highlight.js
shadcn/ui
ahooks

基本上都是主流的技术，刚好尝试了一下 next.js 最新版本，开发体验巨大提升，主要体现在：

更详细的报错信息
更快的启动速度和页面跳转速度

开发过 next.js 都知道我在说什么！

前端其实没有特别复杂的部分都是基础的页面开发，值得一提的有两点：

在 svg 生成完成转为 UI 渲染过程中，直接切换有点生硬，这里借住 AI 实现了流畅的过渡动画
由于 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 ，了解最新技术动态！
对面向对象编程和面向过程编程理解更加深入

此文自动发布于：github issues