💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

🚀前言

如果前端是餐厅的优雅门面，那么后端就是决定成败的神秘厨房。

在本章，我们将推开那扇通往“数字后厨”的门。这里没有用户可见的华丽界面，却藏着整个应用的生命力之源-数据的存储方式、业务的运转逻辑、安全的保障机制、效率的提升路径。这些看不见的“幕后英雄”，正是将简单的网页升级为专业级应用的关键所在。

但你不会孤军奋战。

在AI的陪伴下，你将体验一种全新的后端开发方式：无须死记硬背复杂的数据库语法，无须为服务器配置头疼，无须为API接口设计纠结。从TRAE SOLO的自主架构设计，到Cursor的精准代码生成，再到MCP的高级集成-你拥有的不是单一工具，而是一支无所不能的“AI后端工程师团队”。

在结束时，你将掌握构建各类任何复杂应用的核心能力。更重要的是，你会发现，即便是技术密集型的后端开发，也能充满创造的乐趣。

🚀一、AI结对程序员：使用Cursor实现精细化后端开发

前文介绍的SOLO这类AI工具，如同一位架构师，能够勾勒出应用的宏观蓝图。但要将蓝图转化为坚固、实用的“建筑”，还需要一位技艺精湛的工匠，这便是本节的主角：Cursor。

在本节中，你将结识这位全新的AI结对程序员。我们将探讨在构建复杂后端系统时，Cursor为何是不可或缺的伙伴。你将学会驾驭它，从基础安装设置，到精通其三大工作模式，最终通过一系列详尽的实战项目，亲手搭建、实现并管理一个功能完备的现代化后端应用。

🔎1.后端开发为何需要Cursor

前文已简要介绍过Cursor工具及其与SOLO的互补关系，这里再做一次系统性的回顾。

🦋1. 从宏观构建到细节实现

我们可将软件开发类比为建造房屋：首先需要一位建筑师（SOLO），沟通并理解你的愿景（如开放式厨房、朝南的卧室等），迅速绘制出房屋的整体结构、房间布局和外观效果图。这是宏观创造阶段，关注的是“做什么”（What），即应用的整体架构和核心概念。

但蓝图本身无法居住，要让房子拔地而起，需要一个施工团队精确铺设线路、安装管道和地板。他们关注的是“怎么做”（How），即每一个细节的完美执行。在我们的类比中，这个施工团队的队长就是Cursor。

SOLO这类高阶AI工具的核心价值，是将抽象想法快速转化为结构化的代码框架和应用雏形；而Cursor作为AI原生的IDE，设计哲学截然不同，旨在处理代码实现过程中的所有细节，完成精细化的工作。

为了让你在实际操作中做出准确的选择，我们可以通过两者的使用场景进行区分：

• 使用SOLO的场景：当你只有一个模糊的想法，甚至尚未明确具体功能时，可使用SOLO。SOLO擅长“从0到1”的创造——若你提出“我想要一个图片分享社区”，它能生成项目的前后端框架、数据库结构和基本页面，回答“我们应该构建什么样的产品”。
• 使用Cursor的场景：当你已有代码基础（无论是SOLO生成的还是自己编写的），需要开展具体的实现工作时，建议使用Cursor。Cursor擅长“从1到N”的精炼——你需要为产品“安装引擎、连接线路、调试功能”，它回答“我们应如何实现这个产品，并使其完美运行”。

这种精细化的能力源于Cursor的核心架构。与GitHub Copilot等插件式AI助手不同，Cursor本身就是代码编辑器。这种原生集成赋予了它独特的优势——深度理解代码库上下文。你用Cursor打开项目时，它会“阅读”并“理解”整个项目，为所有代码建立一个复杂的语义索引，如同在内部构建了一张详细的项目地图。

正是这张“地图”，让Cursor的操作能达到手术刀般的精准。当它提供建议或修改代码时，其决策基于对项目中所有文件、函数、变量间关联的深刻理解，而非仅局限于当前文件内容。

🦋2. Cursor的3个关键应用场景

理解 Cursor的角色后，我们看看它在后端开发中的核心应用场景。

• 场景1：核心业务逻辑实现
  这是后端开发的核心，需要编写用户认证、数据库交互（CRUD）、支付流程等具体业务逻辑，对稳定性和准确性要求极高。Cursor能根据自然语言描述，生成健壮、高效且符合最佳实践的代码，帮助你完成这些复杂的任务。相比之下，SOLO在这方面的实现目前在可靠性和稳定性上尚有差距。

• 场景2：大规模、跨文件的代码重构
  随着项目的发展，可能需要对项目进行结构性调整（如将数据库中的user模型改名为profile）。这个看似简单的改动可能会引发连锁反应，需要修改数十个文件中的相关变量名、函数名和API。对人类而言，这是一项枯燥且极易出错的工作，但对于拥有完整项目地图的Cursor来说却轻而易举。它能自动定位并安全地修改所有相关文件，确保重构后系统依然稳固。

• 场景3：深度协作式调试
  当应用出现问题时，你可能只看到了错误信息，却不清楚问题的根源。Cursor如同经验丰富的专家，你只需提供错误信息、日志文件，它便会结合对整个代码库的理解，帮助你追根溯源，快速定位问题本质，并给出修复方案。

🦋3. SOLO vs. Cursor：选择正确的工具组合

因此，问题并非“SOLO和Cursor哪个更好”，而是“在开发流程的哪个阶段，应该使用哪个工具”。SOLO和Cursor的使用遵循一个清晰的时间序列，具体可参考以下决策指南。

• 构思与原型阶段：这时你处于“我有一个想法！”的兴奋状态，你的主要任务是将脑海中的模糊概念转化为一个可见、可操作的项目雏形。在这个阶段，SOLO是最佳选择，因为它是目前最快的“想法变现”工具。你无须深入了解复杂的技术细节，只需用自然语言描述应用的功能和特性，它就能快速生成一个包含核心架构的应用原型，完成从0到1的关键飞跃。

• 实现与精炼阶段：原型构建完成后，你将进入“我有一份项目代码，要把它变成一个真正产品”的阶段，此时任务变得更加具体细致：完善项目配置、实现具体的业务功能、修复代码错误、进行维护和迭代优化。在这个阶段，你应该切换到Cursor，它就像一个专业的“代码工作间”。你只需将SOLO生成的项目代码下载到本地，用Cursor打开，你的角色便从“构想家”转变为“项目经理”，而Cursor则成为身边全能的工程师团队，帮你处理从1到N过程中所有精细复杂的工作。

🔎2.十分钟入门：Cursor基础操作与界面导航

现在，让我们正式开始使用你的AI结对程序员。整个过程非常简单，十分钟内即可完成从安装到熟悉界面的所有步骤。

🦋1. 下载安装与初始设置

首先，将Cursor安装到你的计算机上。

1. 打开浏览器访问Cursor官方网站，网站会自动识别你的操作系统（Windows、macOS或Linux），并在首页提供下载按钮。
2. 下载完成后运行安装文件，不同操作系统的安装方式如下：
   • Windows用户：双击.exe文件，按照安装向导的提示操作。
   • macOS用户：打开.dmg文件，将Cursor图标拖拽到“应用程序”（Applications）文件夹。
   • Linux用户：为下载的.AppImage文件授予执行权限后直接运行。
3. 安装完成后启动Cursor，它会引导你完成初始设置（如选择键盘快捷键方案、主题颜色）。设置过程中会提示注册或登录，这一步至关重要，它直接决定了功能使用范围和体验质量。
   • 关键一步：强烈建议使用GitHub账号登录，这不仅简化了注册流程，还能让Cursor更好地理解你的开发习惯。
   • 解锁专业工具：登录后将自动激活Cursor的Hobby免费计划（包含有限次数的AI功能），并附赠为期两周的专业版（Pro）试用。
   • 学生福利：全球在校大学生可通过身份验证，免费享受一整年的专业版服务。

完成上述步骤后，你的AI结对程序员就已经正式配置就绪。

🦋2. 界面导航

打开Cursor后，会看到一个专业且清晰的界面（见图4-1），可以将其看作一个功能明确的控制台。

• 活动栏（Activity Bar）：位于屏幕最左侧，是一列图标主工具箱，点击不同图标可以在侧边栏切换文件浏览器、全局搜索和源代码管理功能视图。
• 侧边栏（Side Bar）：位于活动栏右侧，内容由活动栏选中的图标决定，默认情况下显示文件浏览器，可以在此管理项目的所有文件和文件夹。
• 编辑区（Editor Area）：占据屏幕中央最大面积的区域，用于查看、编写和修改代码，支持多文件同时打开（以标签页的形式排列在顶部）。
• AI聊天面板（AI Chat Panel）：通常位于屏幕右侧，是与Cursor AI进行深度对话的区域，可以通过快捷键Ctrl/Cmd+Shift+L调出或隐藏。

图4-1 Cursor界面布局

🦋3. 三大工作模式速览

在后文中，我们将深入学习Cursor的三大工作模式，这里先做简单介绍。

• 智能代码补全：在编辑区编写代码时，AI会实时预测你想要写的内容并以灰色文字显示，按下Tab键即可接受建议，补全代码。
• Composer代码生成：一个强大的代码生成器，选中一段代码或在空白处按下Ctrl/Cmd+K组合键，然后用自然语言描述需求，AI就会直接生成或修改代码。
• AI聊天助手：一个功能完整的聊天机器人，能够理解整个项目。可以向它提问、寻求解释、粘贴错误信息，进行关于代码的深度对话。

🦋4. 实战：体验智能代码补全

我们通过一个简单的实战，来体验Cursor的智能代码补全功能。这个实战将让你亲身感受AI如何理解你的编程意图，并提供精准的代码建议。

1. 在电脑上新建一个空文件夹，命名为 my-first-cursor-project。

2. 在Cursor中点击 File -> Open Folder，选择刚创建的文件夹。

3. 在侧边栏的文件夹上右键单击，在弹出的菜单中选择 New File，输入文件名 hello.js 并按回车键。

4. 在编辑区逐字输入下面的代码（请勿一次性粘贴）：

   function greet(
   

5. 输入后稍作停顿，Cursor会以灰色“幽灵文本”的形式建议函数的其余部分，直接按下 Tab 键，建议代码即可变为真实代码，如下所示：

   function greet (name){
       console.log ("Hello, " + name + "!");
   }
   

你已完成了与AI的第一次无缝协作。你只是开了个头，AI就理解了你的意图并完成了后续的工作。

🔎3.Cursor的三大工作模式

我们现在将深入理解Cursor的强大工作机制。与Cursor AI的协作主要通过3种截然不同的模式进行，构成了一套从“微操”到“宏观”的完整交互体系。

🦋1. 智能代码补全

这种模式提供沉浸式、低干扰的协作体验，是日常编码中最常用的模式。其工作原理是在你编写代码时，Cursor的AI模型会实时分析输入的内容、当前文件的上下文以及最近的修改历史，预测后续最可能编写的代码，并以幽灵文本的形式展示。它能够预测和生成逻辑完整的多行代码块。

Cursor的智能代码补全兼具编辑能力，不仅能添加新代码，还能修改和重写已有代码（如修改函数的参数后，自动建议修改所有对该函数的调用处）。

在交互方式上，你可以按下 Tab 键接受建议，按下 Esc 键或继续输入以拒绝建议，或者按下 Ctrl/Cmd+→ 组合键逐词接受建议。

🦋2. Composer 代码生成

这种模式是一种指令式、目标驱动的协作方式，是处理明确编码任务的高效工具。其工作原理是按下 Ctrl/Cmd+K 组合键后会激活行内输入框，你可以在此用自然语言描述代码生成或修改需求，Cursor会将指令发送给语言模型，并将返回的代码直接插入或替换到编辑器中。

这实现了从“辅助”到“执行”的转变，让你脱离烦琐的语法，专注于业务逻辑。对于更复杂的任务，可使用 Ctrl/Cmd+I 组合键调出功能更全面的 Composer面板。

在交互方式上，将光标置于目标位置或选中需修改的代码，按下 Ctrl/Cmd+K 组合键，在弹出的输入框中输入指令（如“创建名为fetchData的异步函数，接受url参数，并使用fetch API获取数据”），然后按下回车键等待AI生成代码。审查生成的代码，若满意则点击 Accept 按钮，不满意可修改指令重试或手动调整。

🦋3. AI聊天助手

这种模式是一种对话式、探索性的协作方式。当你遇到问题、需要解释或进行宏观规划时，这里是你的“指挥中心”。其工作原理是按下 Ctrl/Cmd+Shift+L 组合键时会打开右侧的AI聊天面板，它能深入理解整个项目。可以通过 @ 符号精确引用项目中的文件（@file）、函数（@functionName）或整个代码库（@codebase），为问题提供充足的上下文。

AI聊天助手是解决复杂问题、学习新知识的最佳场所。例如，在调试时粘贴报错信息并提问“代码为什么会报这个错？请帮我分析 @app/api/route.ts 这个文件”；在学习时选中一段代码并询问“这段代码是做什么的？请用初学者能理解的语言解释”；在重构规划时询问“我想重构用户认证系统，请使用 @codebase 分析改动可能会涉及的文件和核心逻辑”。

在交互方式上，按下 Ctrl/Cmd+Shift+L 组合键打开聊天面板，输入问题或请求；使用 @ 符号引用代码上下文以获得更精准的回答。AI会以对话形式给出解释或编码建议，可以直接点击 Apply 按钮将代码应用到文件中。

这3种模式共同构成了完整的协作体系。优秀的Cursor用户会根据任务在这3种模式之间灵活切换。表4-3总结了这3种模式的特点。

表4-3 3种AI交互模式的特点

🦋4. 十分钟实战：用3种模式分别完成一个简单函数

现在，我们通过一个创建阶乘函数的练习来体验这3种模式的差异。在项目中创建一个新文件 math.js。

☀️模式1：智能代码补全

在 math.js 中，输入函数的第一行：

function factorial(n){

按下回车键，在函数体内输入 if。Cursor会预测阶乘函数的核心逻辑，并以灰色文本建议如下代码：

if (n === 0 || n === 1) {
    return 1;
}
return n * factorial(n - 1);

看到上述建议代码后，直接按下 Tab 键完成函数的输入。

☀️模式2：Composer 代码生成

在 factorial 函数的下方空出几行，然后按下 Ctrl/Cmd+K 组合键，在弹出的输入框中输入指令：

【提示词模板】

创建一个名为 factorial_composer 的函数，用于计算一个数 n 的阶乘。

按下回车键，AI将精确生成阶乘函数。

☀️模式3：AI聊天助手

按下 Ctrl/Cmd+Shift+L 组合键打开聊天面板，然后输入：

【提示词模板】

写一个JavaScript函数 factorial_chat，用于计算阶乘，并为关键代码添加中文注释。

AI不仅会生成代码，还会按要求添加注释并提供解释。然后点击 Apply 或 Insert 按钮，将带有注释的函数插入光标所在的位置。

通过此练习，你应能清晰感受到这3种模式的差异：智能代码补全是顺畅的协作，Composer代码生成是精准的执行，而AI聊天助手是深入的指导。

🔎4.十五分钟实战：搭建 Next.js API 骨架

现在，我们将从零开始构建一个基于Next.js框架的后端API服务，核心任务是搭建项目“骨架”，过程中主要借助AI聊天助手，将其作为项目经理和技术顾问，辅助完成开发。

🦋1. 项目初始化

我们以空文件夹为起点，目标是让AI指导完成Next.js项目的初始化。

1. 创建并打开项目目录。在电脑上创建一个空文件夹并将其命名为 nextjs-supabase-api，启动Cursor，通过 File > Open Folder 菜单打开该文件夹。

2. 向AI提问。按下 Ctrl/Cmd+Shift+L 组合键打开AI聊天面板，输入下述指令：

   【提示词模板】

   我想创建一个全新的Next.js项目，请告诉我初始化项目的标准终端命令。需要使用TypeScript，并接受所有默认推荐配置。
   

3. 执行AI的指令。AI会给出回答，告知相应的命令是 create-next-app，它提供的完整命令应类似于下面这样：

   npx create-next-app@latest . --yes
   

   其中，npx create-next-app@latest 是官方推荐的Next.js项目创建工具；. 表示在当前文件夹下创建；--yes 参数则自动确认所有选项。

按下 Ctrl/Cmd+`` 组合键，打开Cursor内置的终端，粘贴命令并按回车键。终端将自动下载模板、安装依赖包。完成后，侧边栏文件浏览器中会新增 app、public、package.json 等文件和文件夹，项目骨架搭建完毕。

🦋2. 使用AI聊天助手理解项目配置

项目文件已经生成，但核心配置的含义需要明确（如 package.json 相当于项目的“身份证”和“依赖清单”）。接下来可以使用AI聊天助手进行深入了解。

1. 在Cursor侧边栏中找到并单击 package.json 文件，将其打开。

2. 在AI聊天面板中输入：

   【提示词模板】

   这是我的package.json文件，请解释scripts字段中dev、build、start和lint各自的作用，以及dependencies和devDependencies的区别。
   

3. AI会清晰说明 dev（开发环境启动）、build（项目构建打包）、start（生产环境启动）、lint（代码语法检查）的用途，同时区分 dependencies（生产环境必需的库）和 devDependencies（仅在开发过程中使用的工具库）。

通过这次对话，你不仅掌握了项目创建方法，还理解了核心的配置逻辑。

🦋3. 构建Next.js API路由结构

Next.js 采用基于文件系统的路由方式，即特定文件夹下的文件会自动成为一个可访问的API。

1. 下达创建指令。在AI聊天面板中输入一个具体的开发任务，如下所示：

   【提示词模板】

   请创建一个基础的Next.js API路由，访问路径为 /api/hello。该接口需要返回一个JSON对象，内容是 {"message":"Hello from our API!"}。请告知需要创建的文件路径以及完整的代码。
   

2. 创建并填充文件。AI会提示需要创建文件路径 app/api/hello/route.ts，并提供如下代码：

   import { NextResponse } from "next/server";
   
   export async function GET(request: Request) {
       return NextResponse.json({ message: "Hello from our API!" });
   }
   

   按照AI的指示在 app 文件夹下依次创建 api 和 hello 文件夹，然后在 hello 文件夹中新建 route.ts 文件并将AI提供的代码粘贴进去（也可以直接点击AI回复中的按钮应用代码）。

3. 验证成果。回到终端，输入 npm run dev 命令启动开发服务器，在浏览器中访问 http://localhost:3000/api/hello，如果页面显示 {"message":"Hello from our API!"}，则首个后端API创建并运行成功——整个过程几乎无须手写复杂代码。

🦋4. 使用 @file 和 @codebase 进行上下文管理

随着项目规模的扩大，代码库日趋庞大且复杂，开发者需要通过 @file 和 @codebase 指令精准引导AI的注意力，确保生成的代码与项目的整体结构和风格保持一致。

在小型项目中，AI可以轻松理解整个代码库的结构，但当项目包含数十个文件、数千行代码时，需要对AI进行明确的指引。这就像在大型图书馆中寻找特定信息，得告诉管理员是查阅某本特定的图书，还是了解整个图书馆的分类体系，而 @file 和 @codebase 正是实现这种精准指引的核心指令。

• @file 指令能将AI的关注点限定在当前打开的文件或选中的代码片段内，适用于单个文件内的操作，比如解释函数或类的作用、修复语法错误、生成相关的补全代码。
• @codebase 指令则会将AI的注意力扩展到整个项目（包括所有文件和子目录），适用于跨文件分析结构、依赖关系或全局架构设计，AI借助它能更全面地理解项目的整体情况，从而生成更符合项目需求的代码。

下面通过两个实战案例，具体演示 @file 和 @codebase 的用法。

☀️案例1：使用 @file 聚焦单个文件

假设你想让AI检查刚才创建的API文件是否符合最佳实践。在聊天框中提问：

【提示词模板】

请审查 @app/api/hello/route.ts 文件中的代码，看看是否有可改进之处。

通过 @ 符号明确告诉AI关注特定的文件，可使其回答更具有针对性。

☀️案例2：使用 @codebase 进行全局审查

如果需要确认项目配置的兼容性，可以进行如下提问：

【提示词模板】

基于 @codebase 分析整个项目的配置，确认TypeScript和ESLint设置是否会正确支持刚才创建的API路由。

这次，AI会检查 tsconfig.json、next.config.js 等配置文件，提供一个全面的“项目健康报告”。

本次实战的核心是让你体验一种全新的对话式开发模式：你使用自然语言提出战略目标，AI伙伴负责处理所有战术执行细节。

🔎5.十分钟实战：用Composer实现具体业务逻辑

我们已搭建好API的“骨架”，现在将为其注入核心功能——连接真实的数据库，并实现业务逻辑。

在该阶段，我们切换到 Composer代码生成模式。如果说AI聊天助手是“项目经理”，那么Composer就是“主力程序员”。我们负责架构决策，然后在Composer代码生成模式的聊天框中下达精准指令，由它完成具体编码。

我们的目标是将Next.js应用连接到Supabase，实现一套完整的文章（Post）增删改查（CRUD）API。

🦋1. 使用Composer生成数据库连接配置

首先需要建立应用与Supabase数据库的连接，步骤如下：

1. 准备Supabase项目。前往官网注册并创建一个新项目。项目创建完成后，在SQL Editor中运行以下SQL语句创建 posts 表：

   CREATE TABLE posts (
       id bigint PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
       title text NOT NULL,
       content text,
       created_at timestamptz DEFAULT now()
   );
   

   该表包含4个字段：id（作为主键并自动生成）、title（存储文章标题且不能为空）、content（存储文章内容）、created_at（记录创建时间并默认为当前时间）。执行效果如图4-2所示。

   图4-2 创建posts表的SQL执行结果
   

2. 获取数据库连接凭证。在Project Settings的Data API部分找到并复制 Project URL（见图4-3）；在Project Settings的API Keys部分找到并复制 anon public Key（见图4-4），这两项是连接数据库必需的凭证，需要妥善保存。

   图4-3 获取Project URL
   

   图4-4 获取anon public Key
   

3. 配置环境变量。回到Cursor，在项目根目录下新建 .env.local 新文件（专门用于存放敏感信息），添加以下内容，并将占位符替换成从Supabase获取的实际URL和Key：

   NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
   NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
   

4. 使用Composer生成客户端代码。在项目根目录下创建 lib 文件夹，在其中新建 supabaseClient.ts 文件（用于创建和导出Supabase客户端）。

   将鼠标光标放在这个空白文件中，按下 Ctrl/Cmd+K 调出Composer，在输入框中输入指令：

   【提示词模板】

   使用 @supabase/supabase-js 库创建Supabase客户端，从环境变量 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY 中读取URL和anon key，最后导出这个客户端实例。
   

   按下回车键后，Composer会自动生成标准的客户端初始化代码，示例如下（实际生成可能略有差异）：

   import { createClient } from "@supabase/supabase-js";
   
   const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
   const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
   
   export const supabase = createClient(supabaseUrl, supabaseAnonKey);
   

   点击 Accept 按钮，这段代码就会自动添加到文件中，数据库连接配置完成。
   

🦋2. 实现用户认证中间件和API端点

为了保护API，需要一个认证中间件以确保只有登录用户才能操作；同时新增一个 /api/posts API端点来处理文章相关的请求。

1. 创建认证中间件。
   在项目根目录下新建 middleware.ts 文件，然后将鼠标光标放在这个空白文件中，按下 Ctrl/Cmd+K 组合键调出Composer，输入指令：

   【提示词模板】

   创建Next.js中间件，使用Supabase保护所有 /api/posts 路径下的请求，未认证用户则返回401未授权错误。
   

   按下回车键后，Composer会生成基于 @supabase/ssr 库的现代中间件代码。
   

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { supabase } from './lib/supabaseClient';

export async function middleware(request: NextRequest) {
  // 只保护 /api/posts 路径
  if (request.nextUrl.pathname.startsWith('/api/posts')) {
    const authHeader = request.headers.get('authorization');
    let token = null;

    // 提取token, 支持 Bearer Token
    if (authHeader && authHeader.startsWith('Bearer ')) {
      token = authHeader.replace('Bearer ', '');
    } else if (request.cookies.get('sb-access-token')) {
      token = request.cookies.get('sb-access-token')?.value;
    }

    if (!token) {
      return new NextResponse(
        JSON.stringify({ error: '未认证，缺少token' }),
        { status: 401, headers: { 'Content-Type': 'application/json' } }
      );
    }

    // 验证token
    const { data, error } = await supabase.auth.getUser(token);
    if (error || !data?.user) {
      return new NextResponse(
        JSON.stringify({ error: '未授权，token无效或已过期' }),
        { status: 401, headers: { 'Content-Type': 'application/json' } }
      );
    }
    // 通过认证，继续处理请求
    return NextResponse.next();
  }
  // 非 /api/posts 的请求，不做处理
  return NextResponse.next();
}

2. 创建API端点文件。在 app/api/ 目录下新建 posts 文件夹，然后在该文件夹中创建 route.ts 文件，用于处理所有与文章相关的HTTP请求。

🦋3. 构建CRUD操作的完整业务逻辑

现在进入核心环节。在 app/api/posts/route.ts 文件中，为 GET（读取）、POST（创建）、PATCH（修补）、DELETE（删除）这4种操作编写处理函数。

☀️实现 GET 操作（读取所有文章）

首先在 route.ts 文件中输入以下框架代码，然后将鼠标光标放在函数体内，按下 Ctrl/Cmd+K 组合键，输入指令：

【提示词模板】

使用Supabase客户端，从posts表中查询所有记录，并按创建时间降序排序，将查询结果以JSON格式返回。

import { NextResponse } from "next/server";
import { supabase } from "@/lib/supabaseClient";

export async function GET(request: Request) {
    // 将光标放在这里
}

Composer会生成如下所示的代码示例以供参考：

const { data, error } = await supabase
  .from('posts')
  .select('*')
  .order('created_at', { ascending: false });

if (error) {
  return NextResponse.json({ error: error.message }, { status: 500 });
}

return NextResponse.json(data);

这段代码会从数据库中获取所有文章记录，按创建时间倒序排列，并处理可能出现的错误情况。

☀️实现 POST 操作（创建新文章）

在 GET 函数下方添加 POST 函数的框架代码，然后将鼠标光标放在函数体内，按下 Ctrl/Cmd+K 组合键，输入指令：

【提示词模板】

从请求体中解析出title和content，使用Supabase客户端将这两个字段插入posts表，返回新创建的记录。

export async function POST(request: Request) {
    // 将光标放在这里
}

Composer会自动处理JSON解析和数据库插入操作，生成完整的创建逻辑。

  try {
    const { title, content } = await request.json();

    if (!title || !content) {
      return NextResponse.json(
        { error: "title和content是必填项" },
        { status: 400 }
      );
    }

    const { data, error } = await supabase
      .from("posts")
      .insert([{ title, content }])
      .select()
      .single();

    if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 });
    }

    return NextResponse.json(data, { status: 201 });
  } catch (err: any) {
    return NextResponse.json(
      { error: "请求体格式无效，必须为JSON" },
      { status: 400 }
    );
  }

☀️实现 PATCH（修补）和 DELETE（删除）操作

可以使用如上相同的方式生成相应的代码。需要注意的是，对于这两个操作，需要从URL中获取文章的ID来指定要操作的具体记录。

• 对于 PATCH 操作，可以使的指令示例如下：

  【提示词模板】

  从URL搜索参数中获取id，从请求体中获取title和content，使用Supabase更新posts表中对应id的记录。
  

• 对于 DELETE 操作，可以使用的指令示例如下：

  【提示词模板】

  从URL搜索参数中获取id，使用Supabase从posts表中删除对应id的记录，成功后返回204状态码。
  

通过这些清晰的指令，Composer能够准确理解你的意图并生成相应的代码逻辑。

🦋4. 错误处理与数据验证的自动生成

一个健壮的API需要能优雅地处理异常情况，我们可以通过Composer以迭代增强的方式完善代码——先生成核心逻辑，再通过一系列精细指令补充错误处理、数据验证等关键能力，提升接口的健壮性与安全性。具体操作如下：

• 增强错误处理：选中刚才生成的任意一段数据库操作代码，按下 Ctrl/Cmd+K 组合键，输入增强指令：

  【提示词模板】

  为这段代码添加详细的错误处理。如果Supabase返回特定类型的错误（如唯一性冲突），返回409状态码，返回其他数据库错误则返回500。
  

Composer会自动生成包含多种错误场景处理的完善代码。

• 添加数据验证：在 POST 函数的开头按下 Ctrl/Cmd+K 组合键，输入指令：

  【提示词模板】

  在执行数据库插入之前添加数据验证逻辑，确保title字段存在且不为空，验证失败则返回400 Bad Request错误，并附带清晰的错误提示。
  

🦋5. Composer Agent：一个综合性的编程解决方案

上述所有步骤其实都可通过更高效的 Composer Agent 完成，可按下 Ctrl/Cmd+I 组合键调出该功能，其核心特性如下：

• 无须精确定位的智能代码改写：即使没有用 @ 符号指定，Composer Agent也能自动检索项目中最合适的代码改写位置。
• 从0到1的解决方案：通过描述一个完整的项目需求，Composer Agent即可生成包括路由结构、数据库集成、中间件、错误处理、类型定义和环境变量配置的完整方案。
• 智能问题诊断与修复：通过描述遇到的问题（如“API返回500错误”），Composer Agent会协助检查修复。
• 跨文件的复杂重构：可以支持“将所有数据库查询逻辑提取到独立的service层”或“为项目添加Docker支持”等复杂任务。

尽管 Composer Agent功能强大，但分步学习对初学者至关重要，原因如下：

• 建立编程思维：边做边学，有助于理解软件开发的逻辑和最佳实践。
• 提升需求表达能力：了解细节后，能更精准地向AI描述复杂需求。
• 提升故障排查技能：理解每个组件的作用，在出现问题时能快速定位根源。
• 提升架构设计能力：通过逐步构建，培养对系统架构的整体理解。

在实际开发中，可以根据不同的场景灵活选择工具：

• 快速原型阶段：使用Composer代码生成模式快速搭建项目框架。
• 学习探索阶段：使用IDE编辑器生成和修改代码，有助于深入理解每个部分的实现细节。
• 问题解决阶段：使用AI聊天助手深入讨论方案，获得更详细的技术指导。
• 复杂重构阶段：回到Composer代码生成模式，让它执行跨文件重构，确保整体架构的一致性和合理性。

Composer Agent不仅是代码生成工具，更像一位全栈技术顾问——能理解项目上下文，遵循行业最佳实践，并提供完整的解决方案。

🔎6.十分钟实战：用终端集成管理数据库与服务

完整的应用生命周期不仅包括开发，还涵盖数据库管理、测试和部署。在Cursor中，终端是可以与AI对话的智能控制台，能高效完成这些运维类的工作。

🦋1. Cursor 内置终端的使用技巧

打开终端的方式非常简单，只需按下 Ctrl/Cmd+`` 组合键即可快速打开或关闭终端。

Cursor终端具有 AI赋能 的特性：在终端提示符下按下 Ctrl/Cmd+K 组合键，然后用自然语言描述需求，AI会自动生成相应的终端命令。

让我们通过一个练习来体验这个功能。

首先打开终端，然后按下 Ctrl/Cmd+K 组合键，输入：

【提示词模板】

列出当前目录下所有以 .ts 为后缀的文件，按修改时间倒序排列。

按下回车键后，AI会生成对应的终端命令，再次按回车键即可执行。

这个功能的核心价值是，你无须再记忆Git、Docker、NPM等工具的复杂命令，只需用自然语言描述需求即可完成操作。

🦋2. 使用AI聊天助手生成数据库迁移脚本

随着业务的发展，数据结构也需要演进（如给 posts 表新增 is_published 字段），这类变更需要通过“数据库迁移”（Database Migration）来实现，具体步骤如下：

1. 提出需求。打开AI聊天面板，输入你的数据库变更需求，举例如下：

   【提示词模板】

   我在使用PostgreSQL数据库，需要为posts表生成SQL迁移脚本，要求实现以下改动：
   1. 新增 is_published 新列（布尔类型）；
   2. 该列的默认值应为 false；
   3. 该列不允许为空（NOT NULL）。
   

2. 获取专业脚本。AI会为生成一份专业、严谨的SQL脚本，示例如下：

   -- migration_script_001_add_is_published_to_posts.sql
   ALTER TABLE public.posts
   ADD COLUMN is_published BOOLEAN NOT NULL DEFAULT false;
   
   COMMENT ON COLUMN public.posts.is_published IS 'Indicates if the post is published to the public.';
   

3. 应用迁移。将该SQL脚本保存为文件，通过Supabase仪表盘或其他数据库管理工具执行即可。

🦋3. 自动化测试与部署命令的生成

自动化测试和部署通常依赖复杂的命令，但AI可以直接生成。

• 测试场景：假设项目使用Jest作为测试框架，在终端下按下 Ctrl/Cmd+K 组合键，然后输入“运行项目中所有的jest测试，并生成一份代码覆盖率报告”。AI会生成对应的命令 npx jest --coverage。
• 部署场景：Next.js应用通常部署在Vercel平台，当需要部署时，只需按下 Ctrl/Cmd+K 组合键，输入“把Next.js应用部署到Vercel生产环境，请提供 Vercel CLI的部署命令”，AI会自动生成命令 vercel --prod。

AI就像随身携带的“运维手册”，让复杂的命令操作变得简单直观。

🦋4. 实时调试与日志分析

当线上应用出现问题时，日志是定位问题根源的关键。可采用如下步骤进行日志分析，定位问题。

1. 启动开发服务器并观察日志。在终端中运行 npm run dev 命令，启动本地开发服务器。当你访问API时，终端会实时打印日志。

2. AI辅助日志分析。假设API报错，可将终端中的错误堆栈复制到AI聊天面板中，然后提问：

   【提示词模板】

   我的Next.js API在运行时出现以下错误。请帮我分析根本原因，问题可能出在哪个文件？
   （在此处粘贴你复制的错误日志）
   

3. 获取解决方案。Cursor结合对日志和代码库的理解，给出分析结果（如指出配置文件错误）以及解决方案。

本次实战将整个开发流程形成闭环，你不仅学会了如何用AI编写代码，还掌握了用AI管理和维护应用的方法。

🔎7.进阶：Cursor 特有优势的深度应用

Cursor之所以能颠覆传统的开发模式，核心源于其作为AI原生IDE的代码库全局理解力。以下是Cursor三大“杀手锏”级优势的深度解析。

🦋1. 优势1：精准的代码库上下文理解

Cursor会为整个项目建立“语义索引”，能理解代码的“意义”和“关系”（而非孤立的文本）。即便函数、组件分布在不同的文件，它也能清晰掌握其调用和依赖关系。

传统的AI插件的上下文通常局限于当前打开的文件，而Cursor如同一台MRI扫描仪，在对话前就已掌握项目的完整“结构图”。使用 @codebase 提问时，Cursor会基于全局信息进行诊断，精准度远超其他工具。

🦋2. 优势2：大规模、跨文件的代码重构

重构是不改变软件外部行为、仅优化内部结构的关键操作，但是简单的改动可能会引发连锁反应，传统的方式棘手且容易出错。

Cursor则凭借对全局上下文的理解，通过AI智能规划能力实现安全、可靠的大规模跨文件的重构。它并非简单的“查找替换”，而是：

• 理解意图——分析你的指令，理解你想达成的结构性改变；
• 分析影响——通过代码库索引，定位所有受影响的代码点；
• 智能修改——根据每个代码点的具体场景灵活调整，能区分同名但无关的变量；
• 生成计划——在执行前通常会展示详细的修改计划，列出待修改的文件和具体的代码差异，等待确认后再执行。

🦋3. 优势3：人机协作的深度调试

传统调试非常耗时，开发者需要像侦探一样，通过设置断点、打印日志等方式，逐步缩小问题范围。Cursor将调试变成了一场人机协作的高效对话：

• 人类提供“症状”——向AI聊天面板提交错误信息、终端日志等线索；
• AI进行“初步诊断”——AI在接收到“症状”后，结合代码库的结构知识进行初步诊断，提出假设；
• AI建议“进一步检查”——它可能会建议你添加日志打印等操作，以获取更多信息；
• 循环定位——按照AI的建议操作后反馈新线索，通过几轮高效的对话即可迅速定位问题。

这种模式将人类的观察力与AI强大的分析能力结合，将原本需要数小时的调试工作缩短到几分钟。

🦋4. 十分钟进阶实战：重构复杂的多文件后端项目

下面我们通过一个进阶实战来见证这三大优势的配合协同效果。假设我们的 nextjs-supabase-api 项目需要将业务重心从“文章”（Post）转向“产品”（Product），这意味着需要批量修改数据库表名、API路由、代码命名等，具体操作如下：

1. 打开Composer Agent模式。在Cursor中按下 Ctrl/Cmd+I 组合键，启动Composer Agent模式。

2. 下达高阶指令。在聊天框中输入以下包含了完整意图和全局上下文的指令：

   【提示词模板】

   使用 @codebase 对整个项目进行大规模重构，将核心业务概念从Post（文章）完全变更为Product（产品）。
   
   请执行以下所有操作：
   1. 数据库迁移：生成SQL脚本，将 posts 表重命名为 products。
   2. API路由重命名：将 app/api/posts 文件夹重命名为 app/api/products。
   3. 代码逻辑更新：在新的 app/api/products/route.ts 文件中，将Supabase操作的目标表从 posts 修改为 products。
   4. 变量与命名规范：在项目所有受影响的文件中，将所有包含 post 或 posts 的变量名、函数参数和类型定义，智能地重命名为 product 或 products。例如，const { data: posts, error } 重命名为 const { data: products, error }。
   
   在执行任何修改之前，请先提供一个详细的行动计划，列出将要修改的所有文件，并展示每个文件的具体代码差异（diff）。
   

3. 审查并执行。按下回车键，Cursor的 Composer Agent 开始分析代码库并生成一个完整的行动计划，确认无误后回复“执行”，Cursor将自动完成所有修改，全程只需几分钟。

🔎8.小结

Cursor不仅是代码生成工具，更是能理解、重塑复杂软件系统的强大伙伴。它从根本上改变了软件开发的成本结构——过去需要一个团队数天才能完成的架构调整，现在只需要一个人和一句精心设计的指令即可实现。这极大降低了试错和迭代成本，让创意的落地变得前所未有的流畅、高效。