结合全栈项目（含前后端、数据库、登录注册+系统核心界面）的开发流程的分阶段、高精准的AI提示词模板
结合全栈项目（含前后端、数据库、登录注册+系统核心界面）的开发流程，我设计了 分阶段、高精准的AI提示词模板，覆盖需求拆解、架构设计、代码实现、联调优化全流程，每个模板都明确“技术栈+输出要求+细节约束”，确保AI生成结果可直接落地。
一、项目初始化：整体架构设计模板（先定框架再开发）
模板1：全栈项目整体架构设计（含技术栈+目录结构）
核心目标：明确前后端分离/一体化架构、技术栈选型、模块拆分、数据流转逻辑
提示词模板：
我要开发一个【项目名称：如小说推荐与可视化分析系统】，核心功能：1.用户模块（登录/注册/权限管理）2.核心业务模块（如小说数据查询/可视化展示）3.系统设置模块（个人信息修改/参数配置）。请基于【架构模式：前后端分离/SSM/SpringBoot+Vue】设计整体架构，技术栈要求：
- 后端：【语言+框架：如Java+SpringBoot/Python+FastAPI/Node.js+Express】
- 前端：【框架+UI库：如Vue3+Element Plus/React+Ant Design】
- 数据库：【数据库类型：MySQL/MongoDB/Redis】
- 其他依赖：【如Redis缓存/MinIO存储/Elasticsearch检索】
输出要求：
1. 架构图说明（前后端交互流程+数据流转路径）
2. 模块拆分（按功能划分，含每个模块的核心职责）
3. 前后端目录结构（逐文件夹列出，标注关键文件作用）
4. 技术栈依赖清单（含版本号，如Vue3.3+SpringBoot3.1+MySQL8.0）
5. 核心接口设计规范（请求方式/路径命名/参数格式/返回格式）
模板2：数据库设计（含表结构+索引+关联关系）
核心目标：生成可直接执行的建表SQL，确保数据模型适配业务需求
提示词模板：
基于【项目名称】的业务需求，设计数据库表结构，要求：
1. 核心业务表：用户表（user）、【其他表：如小说表/novel、收藏表/collect】等，需覆盖所有核心功能
2. 表结构要求：字段名称（英文）+ 数据类型 + 长度 + 约束（非空/主键/外键/唯一）+ 备注（中文说明）
3. 关联关系：明确表之间的一对一/一对多/多对多关系（如user与collect是一对多）
4. 索引设计：针对查询频繁的字段（如用户名、小说ID）设计索引，说明索引类型（普通索引/联合索引）
5. 特殊需求：【如密码加密存储（字段存哈希值）/时间字段自动填充/软删除字段设计】
输出要求：
- 每个表的建表SQL（可直接在数据库执行，含注释）
- 表关系ER图说明（文字描述或结构化表格）
- 关键字段设计说明（如密码加密方式、状态字段枚举值）
二、后端开发：接口+业务逻辑模板（按模块拆分）
模板3：用户模块（登录/注册/权限）后端实现
核心目标：生成可运行的用户相关接口代码，含认证授权逻辑
提示词模板：
用【后端技术栈：如Java+SpringBoot+MyBatis-Plus/ Python+FastAPI+SQLAlchemy】实现用户模块，核心功能：
1. 注册功能：
- 输入：用户名（唯一）、密码（加密）、手机号（可选，需校验格式）、邮箱（可选）
- 业务规则：用户名长度6-20位、密码8-16位（含字母+数字）、手机号格式校验、用户名/手机号不可重复
- 输出：注册结果（成功/失败原因）、用户ID
2. 登录功能：
- 输入：登录账号（用户名/手机号）、密码
- 业务规则：密码校验（与数据库哈希值比对）、账号状态校验（是否禁用）、登录失败次数限制（5次锁定1小时）
- 输出：JWT令牌/Token、用户基础信息（ID/用户名/角色）
3. 权限控制：
- 角色划分：普通用户/管理员
- 接口权限：管理员可访问【如数据统计接口】，普通用户仅访问自己的资源
输出要求：
4. 代码结构：按【实体类（Entity）→ 数据访问层（Mapper/DAO）→ 业务逻辑层（Service）→ 控制层（Controller）】分层编写
5. 关键代码：
- 实体类：含字段注解（如@Table/@Column）、Getter/Setter、构造方法
- Service层：实现注册/登录/权限校验的核心逻辑，含异常处理（如用户名重复异常）
- Controller层：接口映射（如POST /api/user/register）、参数校验（如@NotBlank）、返回统一响应格式（如{code:200, message:"成功", data:{}}）
6. 辅助代码：
- JWT工具类（生成Token/验证Token）
- 密码加密工具类（如BCrypt加密）
- 全局异常处理器（处理参数错误/业务异常）
7. 注释要求：类、方法、关键逻辑行加中文注释，说明功能/参数/返回值
8. 测试用例：给出每个接口的测试请求（如Postman请求参数）
模板4：核心业务模块后端接口实现
核心目标：生成业务相关的CRUD接口+复杂逻辑代码
提示词模板：
基于【项目名称】的核心业务，用【后端技术栈】实现【业务模块：如小说数据管理/可视化数据接口】，需求如下：
1. 数据查询接口：
- 功能：根据【查询条件：如小说分类/发布时间/关键词】查询数据，支持分页（页码/每页条数）、排序（按发布时间倒序）
- 输入：请求参数（如category=科幻&page=1&size=10）
- 输出：分页结果（总条数/总页数/当前页数据列表）
2. 数据新增/修改/删除接口（如管理员功能）：
- 新增：输入【如小说标题/作者/内容/分类】，校验【标题非空/内容长度≥100字】
- 修改：根据ID修改【如小说状态/内容】，仅管理员可操作
- 删除：根据ID删除数据，支持批量删除，软删除（更新delete_flag字段）
3. 复杂业务逻辑：【如统计近7天小说访问量TOP10/生成可视化所需的折线图数据（日期+访问量）】
输出要求：
4. 分层代码：Entity→Mapper→Service→Controller，遵循与用户模块一致的代码规范
5. 关键实现：
- Mapper层：编写SQL（如MyBatis的XML映射文件/注解SQL），支持动态查询（如条件为空则不拼接）
- Service层：处理业务逻辑（如数据校验/统计计算），调用Mapper层操作数据库
- Controller层：接口映射（如GET /api/novel/list）、权限控制（如管理员接口加@PreAuthorize("hasRole('ADMIN')")）
6. 性能优化：查询接口添加索引、避免SQL冗余、批量操作优化
7. 输出内容：完整代码（含所有分层文件）+ 接口文档（路径/请求方式/参数/返回值/异常说明）+ 测试用例
三、前端开发：界面+交互逻辑模板（覆盖登录+系统界面）
模板5：登录/注册页面（前端实现）
核心目标：生成美观、适配的登录/注册页面，含表单校验+接口联调
提示词模板：
用【前端技术栈：如Vue3+Element Plus+Axios/React+Ant Design+Axios】实现登录/注册页面，要求如下：
1. 页面布局：
- 登录页：左侧（品牌/系统介绍图）+ 右侧（登录表单：账号输入框、密码输入框、记住密码复选框、登录按钮、注册跳转链接）
- 注册页：表单（用户名、密码、确认密码、手机号、验证码、注册按钮、登录跳转链接）
- 样式要求：响应式布局（适配PC/平板）、配色协调（如主色#165DFF）、表单元素对齐、hover效果
2. 交互功能：
- 表单校验：实时校验（如输入用户名时提示长度不足）、提交前全量校验（如密码不一致），错误提示清晰（红色文字+图标）
- 登录逻辑：点击登录按钮→加载状态→调用后端登录接口→成功则存储Token到本地存储（localStorage）→跳转到系统首页；失败则显示错误信息（如账号密码错误）
- 注册逻辑：点击注册→校验表单→调用注册接口→成功则跳转登录页；失败则显示错误（如用户名已存在）
- 其他：验证码倒计时（60秒）、密码显示/隐藏切换、记住密码功能（下次登录自动填充账号密码）
3. 技术细节：
- 路由配置：登录页（/login）、注册页（/register），未登录时访问其他路由自动跳转到登录页
- Axios封装：统一请求拦截（添加Token到请求头）、响应拦截（处理接口错误/Token过期）
- 状态管理：用【Pinia/Vuex/Redux】存储用户信息（如Token/用户名）
输出要求：
4. 代码文件：
- 页面组件：Login.vue/Register.vue（含模板template、样式style、逻辑script）
- 辅助文件：Axios封装文件（request.js）、路由配置文件（router/index.js）、状态管理文件（store/user.js）
5. 样式要求：使用【CSS/SCSS/Tailwind CSS】，样式隔离（如Vue的scoped），避免冲突
6. 注释：组件功能、关键逻辑（如表单校验规则、接口调用逻辑）加中文注释
7. 效果说明：描述页面交互效果（如点击登录按钮后的加载动画）
模板6：系统首页/核心功能界面（前端实现）
核心目标：生成系统主界面，含侧边栏、顶部导航、内容区域、数据展示
提示词模板：
用【前端技术栈】实现【项目名称】的系统首页/核心功能界面，要求如下：
1. 页面布局：
- 整体布局：左侧固定侧边栏（菜单导航）+ 顶部导航栏（用户名、退出登录、系统名称）+ 中间内容区域（自适应）
- 侧边栏：菜单列表（如首页、数据管理、个人中心、系统设置），支持多级菜单（展开/折叠），当前页面菜单高亮
- 内容区域：根据路由加载对应功能页面（如首页显示数据可视化图表、数据管理显示表格）
2. 核心功能界面（以数据可视化页面为例）：
- 功能：展示【如小说访问量折线图、分类占比饼图、热门小说排行榜】
- 交互：图表支持切换时间范围（近7天/30天/90天）、点击图表筛选数据、表格支持分页/搜索/导出Excel
- 样式：卡片式布局、图表配色美观、表格样式统一（表头加粗、奇偶行背景区分）
3. 通用交互：
- 退出登录：点击顶部导航的“退出登录”→清除本地存储Token→跳转到登录页
- 侧边栏折叠：点击折叠按钮→侧边栏收缩（仅显示图标）/展开（显示文字+图标）
- 面包屑导航：显示当前页面路径（如首页→数据可视化→访问量统计），支持点击跳转
4. 技术细节：
- 图表库：使用【ECharts/Chart.js】实现可视化图表
- 路由守卫：已登录用户访问登录/注册页自动跳转到首页，Token过期则跳转到登录页
- 组件复用：封装通用组件（如侧边栏组件/Sidebar.vue、顶部导航组件/Header.vue、表格组件/CommonTable.vue）
输出要求：
5. 代码文件：
- 布局组件：Layout.vue（包含侧边栏、顶部导航、内容区域的整体布局）
- 功能页面：如Dashboard.vue（数据可视化首页）、NovelList.vue（小说列表页）
- 通用组件：Sidebar.vue、Header.vue、CommonTable.vue、CommonChart.vue
- 配置文件：菜单配置（menu.js）、路由配置（router/index.js）
6. 代码要求：
- 模板：语义化标签（如
/
），结构清晰
- 逻辑：接口调用（如加载图表数据）、菜单切换、筛选交互等逻辑完整，含加载状态（如骨架屏/loading动画）
- 样式：响应式布局，适配不同屏幕尺寸，样式统一（如字体、间距、颜色）
7. 注释：组件功能、图表配置、接口调用逻辑加中文注释
8. 联调说明：说明前端与后端接口的联调方式（如接口地址配置、参数传递、数据格式转换）
四、联调与优化：全栈整合模板
模板7：前后端联调问题排查（含跨域/接口报错）
核心目标：解决前后端联调时的跨域、参数不匹配、接口报错等问题
提示词模板：
我正在进行【项目名称】的前后端联调，技术栈：后端【X】+ 前端【Y】，遇到以下问题：
1. 问题描述：【如前端调用登录接口时提示跨域错误/接口返回400参数错误/500服务器错误】
2. 相关代码：
- 前端：接口调用代码（Axios请求代码）、请求参数示例
- 后端：对应接口的Controller代码、参数接收实体类
3. 报错信息：【粘贴浏览器控制台报错/后端日志报错信息】
输出要求：
4. 问题定位：分析报错原因（如跨域未配置/参数名称不一致/后端逻辑异常）
5. 解决方案：给出具体的修改代码（前端/后端需修改的部分），如：
- 跨域问题：后端添加CORS配置类
- 参数错误：修改前端请求参数名称/后端实体类字段名称
6. 联调注意事项：给出前后端联调的关键检查点（如接口地址是否正确、请求方式是否匹配、Token是否携带）
模板8：全栈项目优化（性能+用户体验）
核心目标：优化项目性能（如加载速度、接口响应）和用户体验（如交互流畅度）
提示词模板：
针对【项目名称】的全栈项目（后端【X】+ 前端【Y】+ 数据库【Z】），进行以下优化：
1. 后端优化：
- 性能问题：【如查询接口响应时间过长（超过3秒）/批量操作效率低】
- 优化方向：SQL优化（索引优化/避免全表扫描）、缓存设计（Redis缓存热点数据）、异步处理（如批量导入用线程池）
2. 前端优化：
- 性能问题：【如首页加载慢（超过5秒）/图表渲染卡顿/路由切换有延迟】
- 优化方向：资源懒加载（路由懒加载/图片懒加载）、组件缓存、图表数据预加载、减少不必要的接口请求（如本地缓存重复数据）
3. 用户体验优化：
- 问题：【如表单提交无反馈/错误提示不清晰/移动端适配差】
- 优化方向：添加加载动画、优化错误提示（具体到字段）、完善响应式布局
输出要求：
4. 优化方案：分后端/前端/数据库列出具体优化措施，说明优化原理
5. 修改代码：给出关键优化点的修改前后代码对比（如SQL优化前/后、前端懒加载配置代码）
6. 效果预期：优化后的性能指标（如接口响应时间≤500ms、首页加载时间≤2秒）
7. 验证方法：说明如何验证优化效果（如用Postman测试接口响应时间、浏览器Network面板查看加载速度）
五、辅助模板：文档生成+部署指南
模板9：项目文档生成（API文档+开发指南）
提示词模板：
基于【项目名称】的全栈实现，生成以下项目文档：
1. API接口文档：
- 按模块划分（用户模块/业务模块）
- 每个接口包含：接口路径、请求方式、请求参数（字段/类型/是否必填）、返回参数（字段/类型/说明）、异常响应（错误码/描述）、请求示例
2. 开发环境搭建指南：
- 后端环境：JDK版本、Maven/Gradle配置、数据库安装与初始化（建表SQL执行）、IDE配置
- 前端环境：Node.js版本、依赖安装（npm install命令）、环境变量配置（如接口基础地址）
- 运行步骤：后端启动命令、前端启动命令、访问地址（如前端http://localhost:8080，后端http://localhost:8081）
3. 项目目录结构说明：
- 后端目录：逐文件夹说明作用（如src/main/java/com/project/entity：实体类）
- 前端目录：逐文件夹说明作用（如src/views：页面组件）
输出要求：
- 文档格式：Markdown格式，结构清晰（用标题、列表、表格分层）
- 内容详细：步骤可直接跟随操作，无歧义（如“安装MySQL8.0后，执行sql文件夹下的init.sql文件初始化数据库”）
模板10：项目部署指南（本地/服务器部署）
提示词模板：
给出【项目名称】全栈项目的部署指南，部署环境：【本地Windows/Linux服务器/云服务器（如阿里云）】，要求如下：
1. 部署准备：
- 服务器环境要求（如Linux服务器需安装JDK17、MySQL8.0、Nginx）
- 项目打包：后端打包（如Maven打包成jar包）、前端打包（如npm run build生成dist文件夹）
2. 部署步骤：
- 数据库部署：安装MySQL→创建数据库→执行建表SQL→配置远程访问权限
- 后端部署：上传jar包到服务器→编写启动脚本（如start.sh，含日志输出）→设置后台运行（nohup命令）
- 前端部署：上传dist文件夹到服务器→配置Nginx（反向代理到后端接口、静态资源访问）
- 启动顺序：数据库→后端→Nginx
3. 验证与问题排查：
- 验证方法：访问前端地址（如http://?܍务器IP），测试登录/查询等功能
- 常见问题：后端启动失败（查看日志）、前端访问404（Nginx配置错误）、接口调用500（数据库连接失败）的解决方案
输出要求：
- 步骤详细：每一步的命令、操作路径明确（如“上传后端jar包到/usr/local/project/backend目录”）
- 配置文件：给出完整的Nginx配置示例、后端application.yml配置示例（如数据库连接配置）
- 命令清晰：列出所有需要执行的命令（如chmod +x start.sh、nohup java -jar project.jar &）
