当前位置：首页 > news >正文

后端使用 AI 开发前端速成：第五期：Cursor 深度工作流与 Prompt 工程

news 2026/6/4 5:41:25

📌发布状态：未发布

第五期：Cursor 深度工作流与 Prompt 工程

本期目标：把 Cursor 从"代码生成器"用成"项目级开发助手"
核心理念：Prompt 的质量直接决定输出代码的质量。花 10 分钟写一个好的 Prompt，能省下一小时的调试时间。

第一章：Cursor 的核心能力

1.1 Cursor vs 传统 IDE + 插件

能力	传统 IDE + Copilot	Cursor
代码补全	单行/块级	可一次性生成整个函数
代码修改	手动修改	Ctrl+K 说"改成 XXX"
文件理解	当前文件	整个项目上下文
终端操作	手动执行	Agent 自动执行
多文件操作	逐个处理	一次改多个文件

1.2 三大核心快捷键

快捷键	功能	使用场景
`Ctrl+K`	选中代码后说"改成 XXX"	局部修改、重构
`Ctrl+L`	打开 AI 对话面板	问答、代码生成
`@`	引用项目中的文件/代码	跨文件理解、上下文增强

1.3 Chat 模式 vs Agent 模式

模式	用途	特点	适用场景
Chat	问答、代码生成	AI 生成代码，你手动 Apply	简单需求、单文件修改
Agent	复杂任务、多文件操作	AI 自动创建文件、执行终端命令	涉及 3+ 文件、需要安装依赖

选择原则：

简单需求（单文件、1-2 个函数）→ Chat 模式
复杂需求（多文件、改配置、装依赖）→ Agent 模式

第二章：Agent 模式深度使用

2.1 Agent 模式的工作流程

你说需求 → AI 分析 → AI 创建/修改文件 → AI 执行命令 → 你审查结果

2.2 Agent 模式实战：从零搭建项目

场景：用 Agent 模式创建一个 Vite + React + TS 管理后台项目

Prompt：

请帮我创建一个 Vite + React 18 + TypeScript 的管理后台项目骨架。 要求： 1. 使用 npm create vite@latest 创建项目 2. 安装依赖：react-router-dom、antd、axios、zustand 3. 创建以下目录结构： - src/views/（页面目录） - src/components/（组件目录） - src/stores/（状态管理） - src/utils/（工具函数） - src/types/（类型定义） 4. 创建基础文件： - src/App.tsx（路由配置） - src/main.tsx（入口） - src/stores/userStore.ts（Zustand 用户状态） - src/utils/request.ts（Axios 封装） - src/views/Login.tsx（登录页占位） - src/views/Layout.tsx（布局组件占位） 5. 配置路径别名 @/ 指向 src/ 6. 启动开发服务器，确保能正常运行 请使用 Agent 模式自动完成所有操作。

2.3 Agent 模式的注意事项

权限控制：Agent 会执行终端命令，注意检查它要执行的命令是否安全
分步确认：复杂任务可以让 Agent 分步执行，每步确认后再继续
回滚准备：Agent 修改前，确保代码已提交到 git，方便回滚

第三章：@ 符号高级用法

3.1 @ 符号的三种引用方式

用法	作用	示例
`@文件名`	引用整个文件	`@request.ts`
`@代码块`	引用选中的代码	选中代码后按 @
`@Folder`	引用整个文件夹	`@src/utils`

3.2 实战：跨文件重构

场景：你想把项目中所有的axios.get调用改成封装后的request.get

操作步骤：

选中request.ts中的封装代码
按Ctrl+K
输入：

请帮我把 @UserList.vue 中的所有 axios.get 和 axios.post 调用 替换为使用 @request.ts 中的 request 实例。 保持原有功能和错误处理逻辑不变。

3.3 上下文增强技巧

请根据 @src/types/user.ts 中的类型定义， 修改 @src/views/UserList.vue 中的代码， 确保所有 user 相关变量都使用正确的类型。

第四章：项目级 Prompt 设计

4.1 为什么需要项目级 Prompt

问题：每次新建文件都要写一遍技术栈说明？

解决：在项目根目录创建.cursorrules文件，定义项目规范。

4.2 .cursorrules 文件模板

# 项目规范 ## 技术栈 - React 18 + TypeScript（严格模式） - Ant Design 5 - Zustand（状态管理） - Axios（HTTP 请求，使用 src/utils/request.ts 封装） - React Router 6 ## 代码规范 - 使用函数组件 + Hooks - 禁止使用 any - 组件名使用 PascalCase - 文件名与组件名一致 - 类型定义放在 src/types/ 目录 ## API 规范 - 统一使用 request.ts 封装 - 接口返回格式：{ code, data, message } - 错误处理：使用 try/catch + message.error ## 样式规范 - 使用 Ant Design 组件，避免手写复杂 CSS - 使用 style={{ marginTop: 20 }} 代替内联样式类

4.3 使用方式

创建.cursorrules文件后，Cursor 会自动读取并应用到所有 AI 对话中。你不再需要每次声明技术栈。

第五章：六大场景 Prompt 模板实战

5.1 场景一：从零创建页面

请帮我创建一个新的 [模块名] 管理页面。 页面路径：src/views/[Module]List.tsx 功能需求： 1. 搜索区域：[字段列表] 2. 数据表格：[字段列表] 3. 分页功能 4. 操作列：[编辑/删除/详情] 接口信息： - GET [接口地址] - 参数：{ page, pageSize, ... } - 返回：{ code, data: { list, total }, message } 参考已有的 @src/views/UserList.tsx 的代码风格和结构。

5.2 场景二：添加新功能到现有页面

请在 @src/views/UserList.tsx 基础上，增加以下功能： 新增功能： 1. 批量删除：表格增加选择列，底部显示"批量删除"按钮 2. 导出功能：搜索区域增加"导出 Excel"按钮 3. 列设置：用户可以显示/隐藏表格列 注意： - 保持原有功能不变 - 遵循项目现有代码风格 - 使用 Ant Design 组件

5.3 场景三：接口变更适配

后端接口发生了变更，请帮我修改前端代码。 变更内容： 1. 原来的 GET /api/users 参数 { page, pageSize } 现在改为 { pageNum, pageSize } 2. 原来的返回 { data: { list, total } } 现在改为 { data: { records, total } } 3. 状态字段从 status（'active'/'inactive'） 改为 state（1/0） 需要修改的文件： - @src/views/UserList.tsx - @src/types/user.ts 请帮我找出所有需要修改的地方并修改。

5.4 场景四：性能优化

请帮我优化 @src/views/UserList.tsx 的性能。 当前问题： 1. 表格数据量大时（>1000 条）页面卡顿 2. 搜索时每次输入都触发请求，造成过多接口调用 3. 列表页切换时，旧请求没有取消 优化要求： 1. 添加防抖/节流处理搜索输入 2. 使用 AbortController 取消未完成的请求 3. 大表格使用虚拟滚动（如果 Antd 支持）

5.5 场景五：代码审查

请帮我审查 @src/views/UserList.tsx 的代码，找出以下问题： 审查维度： 1. 安全问题：是否有 XSS 风险、是否有 SQL 注入（前端拼接 SQL） 2. 性能问题：不必要的重渲染、大数据处理 3. 边界情况：空数据、超长文本、网络异常 4. 代码规范：TypeScript 类型是否准确、是否有 any 5. 可维护性：代码是否过于复杂、是否需要拆分组件 请按严重程度列出问题，并给出修改建议。

5.6 场景六：框架迁移

请将 @src/views/UserList.vue（Vue 3）转换为 React 组件。 要求： - 使用 React 18 Hooks - 使用 Ant Design 5 组件 - 保持原有功能不变 - 保持原有接口调用逻辑 - 使用 Zustand 替代 Pinia - 严格 TypeScript 输出：完整的 React 组件代码和必要的 store 文件。

第六章：AI 生成代码的审查方法论

6.1 五步审查法

技术栈检查 → 功能完整性检查 → 安全审查 → 性能审查 → 可维护性审查

6.2 审查清单

维度	检查项	工具/方法
技术栈	版本是否正确、组件名是否正确	查看 import
功能	三态处理、分页逻辑、表单校验	运行测试
安全	XSS、CSRF、敏感数据泄露	搜索 v-html、dangerouslySetInnerHTML
性能	重复渲染、大数据、内存泄漏	React DevTools Profiler
类型	是否有 any、类型是否准确	TypeScript 编译
规范	命名、注释、代码结构	ESLint

6.3 危险信号

看到以下代码，必须立即审查：

// 🚨 危险信号 1：XSS 风险 dangerouslySetInnerHTML={{ __html: content }} // 🚨 危险信号 2：SQL 注入（前端不应该拼接 SQL） const sql = `SELECT * FROM users WHERE id = ${userId}` // 🚨 危险信号 3：硬编码密钥 const API_KEY = 'sk-1234567890abcdef' // 🚨 危险信号 4：eval eval(userInput) // 🚨 危险信号 5：无限递归/循环 useEffect(() => { setState(...) }, [state])