Cursor从零搭建个人博客：AI编程全流程实战教程

前言

很多人听说过Cursor这款AI编程工具，但真正用它从零完成一个完整项目的教程并不多。这篇文章将基于B站UP主的实战演示，带你走完从UI设计到前后端代码生成、数据库配置、问题调试的全流程——用Cursor打造一个个人博客网站。

整个过程几乎不需要手写代码，AI完成了绝大部分工作，但你需要理解每一步在做什么。这正是AI编程时代的核心能力：不是写代码，而是驾驭AI写代码。

用Google Teach生成UI原型图

在动手写代码之前，先明确产品长什么样。这里使用Google的Teach工具来生成UI设计和可交互原型图。

Google Teach是Google推出的一款AI驱动的UI/UX设计工具，它能够根据自然语言描述自动生成高保真的界面设计稿和可交互原型。这类工具的出现代表了设计领域的一个重要趋势：从传统的Figma、Sketch等需要手动拖拽组件的设计方式，转向用语言描述需求即可获得设计方案的AI原生工作流。类似的工具还有v0.dev（由Vercel推出）、Galileo AI等，它们的核心价值在于大幅降低了从想法到可视化原型的时间成本，让非设计背景的开发者也能快速产出专业级别的UI方案。

操作流程

1. 打开Google Teach网站（需要科学上网，节点选择国外）
2. 选择Web模式（也支持App模式）
3. 粘贴事先准备好的提示词，描述博客网站的需求
4. 等待AI生成设计方案

工具自动生成了包括首页、个人中心、博客列表、技术栈展示等多个页面的设计稿。配色方案采用了毛玻璃效果（Glassmorphism，一种近年流行的UI设计风格，通过半透明模糊背景营造出类似磨砂玻璃的质感），还包含了雷达图等数据可视化组件，整体视觉效果相当出色。

生成静态设计后，点击按钮还能生成可点击的交互原型，支持页面跳转、动态交互和粒子背景效果。确认效果满意后，通过分享按钮复制原型链接，这个链接将作为Cursor的参考输入。

在Cursor中生成前后端代码

这是整个流程的核心环节。将原型图链接粘贴到Cursor中，配合详细的技术需求提示词，让AI一次性生成完整的前后端项目。

Cursor是一款基于VS Code深度改造的AI原生代码编辑器，由Anysphere公司开发。它与普通IDE集成AI插件（如GitHub Copilot）的最大区别在于：Cursor将AI能力深度嵌入了编辑器的核心交互流程中，支持多文件上下文理解、项目级代码生成、自然语言对话式编程等能力。其底层调用了Claude、GPT-4等大语言模型，并通过自研的上下文索引技术，让AI能够理解整个项目的代码结构和依赖关系，而不仅仅是当前打开的单个文件。这使得它在处理跨文件重构、全栈项目生成等复杂任务时表现尤为突出。

提示词的关键要素

一份高质量的提示词应该包含完整的技术规范：

• 技术栈要求：前端框架、后端框架的具体选择
• 开发规范：代码风格、目录结构、命名规则
• 登录认证：用户鉴权方案
• 系统角色：权限管理设计
• 功能模块：博客管理、标签管理、项目管理等

在AI编程场景中，提示词（Prompt）的质量直接决定了生成代码的质量。一份优秀的提示词本质上是一份精简的技术需求文档，它需要在"足够具体"和"不过度约束"之间找到平衡。过于模糊的描述会导致AI自由发挥产生不可控的结果，而过于细节的约束又会限制AI的架构设计能力。业界逐渐形成了一些最佳实践：先描述项目全貌和技术选型，再逐层细化功能模块，最后补充非功能性需求（如安全、性能、代码规范）。这种结构化的提示词编写方式，正在成为AI时代开发者的核心技能之一。

将提示词粘贴到Cursor后回车，AI开始按计划逐步生成文件。整个过程可以实时观察：先是生成整体架构文档，然后是后端代码、前端代码、配置文件，最后还自动生成了API设计文档。

从生成结果来看，后端使用了MySQL数据库和Redis缓存，包含了统一的响应格式封装、权限管理模块和完整的包结构设计。其中Redis（Remote Dictionary Server）在本项目中承担了两个关键角色：一是缓存热点数据（如博客列表、标签数据），减少对MySQL的直接查询压力，将响应时间从毫秒级降低到微秒级；二是存储用户登录会话或JWT Token的黑名单，支撑用户认证和权限管理功能。对于个人博客这类读多写少的应用场景，Redis缓存能够显著提升页面加载速度和系统整体性能。前端项目同样结构清晰，与后端API完美对接。

数据库配置与项目启动

代码生成完毕后，需要进行环境配置才能让项目跑起来。这一步虽然不涉及编码，但对新手来说往往是最容易卡住的地方。

数据库初始化

1. 启动本地MySQL服务（教程中未使用Docker，直接本地启动）
2. 打开Navicat连接本地数据库
3. 查看配置文件中的数据库名称，复制后在Navicat中创建对应数据库
4. 字符集选择UTF-8 MB4（这是MySQL中真正的UTF-8编码，支持存储emoji表情等4字节Unicode字符，而MySQL早期的utf8编码实际上只支持3字节，无法存储部分特殊字符）
5. 找到项目中sql目录下的SQL文件，右键运行导入

导入成功后，刷新即可看到AI已经生成好的所有数据表，包括关联关系都已经设计完毕。

启动后端服务

用IDEA打开后端项目，等待索引建立完成后，找到application启动文件，点击运行。

这里遇到了一个常见问题：8080端口被占用（被VMware虚拟机的服务占用）。端口冲突是本地开发中最常见的问题之一——每个网络服务都需要绑定一个端口号来监听请求，而同一端口在同一时刻只能被一个进程占用。8080端口作为Java Web应用的默认端口，经常与其他本地服务产生冲突。解决方法是在系统服务中找到VMnet相关服务并停止。同时还需要检查配置文件中的数据库账号密码是否与本地环境一致。修正后重新运行，后端成功启动。

启动前端服务

用IDEA新窗口打开前端项目，等待package.json扫描和索引更新完成后，直接点击运行按钮（或通过命令npm run dev启动）。前端服务默认运行在5173端口（这是Vite开发服务器的默认端口，Vite是新一代前端构建工具，以其极快的冷启动速度和热模块替换能力著称）。

前端和后端分别运行在不同端口上，这正是典型的前后端分离架构。在这种架构下，前端（通常是Vue、React等SPA单页应用）和后端（Spring Boot等API服务）作为独立项目分别开发、独立部署，通过RESTful API进行数据通信。这种架构的优势包括：前后端团队可以并行开发互不阻塞；前端可以灵活切换UI框架而不影响后端逻辑；后端API可以同时服务于Web、移动端、小程序等多个客户端。

用Cursor调试登录问题

项目跑起来后，访问前台页面效果非常美观，还原度很高。但在尝试登录后台管理系统时遇到了问题——默认密码无法登录。

查看数据库发现密码字段使用了BCrypt加密，无法直接读取明文密码。BCrypt是一种专门为密码存储设计的哈希算法，由Niels Provos和David Mazières于1999年基于Blowfish加密算法设计。与MD5、SHA-256等通用哈希算法不同，BCrypt内置了"盐值"（Salt）机制和可调节的计算成本因子（Cost Factor）。盐值确保即使两个用户使用相同密码，存储的哈希值也完全不同，有效防御彩虹表攻击；成本因子则可以随硬件性能提升而增大，使暴力破解始终保持高昂的计算代价。这也是为什么在数据库中看到的密码字段是一长串不可逆的字符串——系统验证密码时是将用户输入重新哈希后与存储值比对，而非解密还原明文。

这时候Cursor展示了另一个强大能力：直接把问题描述交给AI来排查和修复。

AI调试过程

在Cursor中描述问题："密码无法登录，业务异常"，AI立即开始排查：

1. 定位到认证模块使用的是BCrypt加密
2. 找到问题根源——密码字段对应关系
3. 自动修复代码

这个调试过程体现了Cursor的项目级上下文理解能力——它不仅能看到当前文件，还能追踪整个认证链路中涉及的Controller、Service、Repository等多个文件，从而准确定位问题所在。

修复后重启后端服务，刷新页面重新登录，成功进入后台管理系统。

最终效果验证

登录后台后，逐一验证各功能模块：

• 博客管理：新增文章功能正常
• 标签管理：标签CRUD正常（CRUD即Create创建、Read读取、Update更新、Delete删除，是数据操作的四个基本动作）
• 项目管理：可以新增项目并正常保存
• 网站设置：支持配置联系方式、邮箱等信息
• 前台展示：访问5173端口可以看到前台页面，新增的博客文章能正常展示
• 留言功能：支持访客留言

整个前后端分离的个人博客项目就此完成。如果需要额外功能，可以继续通过Cursor添加和迭代。

总结与思考

这个实战案例展示了一个完整的AI辅助开发工作流：

1. 设计阶段：用Google Teach生成UI原型
2. 开发阶段：用Cursor一键生成前后端代码
3. 部署阶段：手动配置数据库和运行环境
4. 调试阶段：遇到Bug继续交给Cursor解决

整个过程中，开发者的角色从"写代码的人"变成了"指挥AI写代码的人"。但这并不意味着可以完全不懂技术——你需要理解数据库配置、端口冲突、加密机制等基础知识，才能在AI生成的代码基础上顺利推进项目。

这种工作模式的本质变化在于：传统开发中，开发者需要记忆大量API语法和框架细节；而在AI辅助开发中，更重要的是系统性思维——理解软件架构的整体设计、各组件之间的协作关系、以及出现问题时的排查思路。语法细节可以交给AI，但架构决策和问题诊断的能力仍然需要开发者自身具备。

对于想要入门AI编程的开发者来说，这种"先跑通一个完整项目"的学习方式，比啃文档高效得多。它让你在实践中建立对全栈开发流程的整体认知，而这种认知正是驾驭AI编程工具的基础。

核心要点