企业官网建设流程全解析

第十期：综合项目实战与结业

本期目标：独立完成一个完整业务模块，建立可持续的 AI 前端开发工作流
核心理念：从"会写页面"到"能交付模块"——这是从学习者到实践者的跨越

目录

• 第一章：需求分析
• 第二章：模块设计
• 第三章：AI 驱动开发流程
• 第四章：代码审查清单
• 第五章：建立个人知识库
• 第六章：结业项目
• 第七章：结业评审标准

第一章：需求分析

1.1 从后端接口推导前端需求

示例：后端提供以下接口

GET /api/orders# 订单列表（分页、筛选）GET /api/orders/:id# 订单详情POST /api/orders# 创建订单PUT /api/orders/:id# 修改订单DELETE /api/orders/:id# 删除订单GET /api/orders/stats# 订单统计

前端需求推导：

1.2 页面结构设计

订单管理模块 ├── 列表页 │ ├── 统计卡片（订单总数、待处理、已完成） │ ├── 搜索区域（订单号、状态、日期范围） │ ├── 操作按钮（新增） │ ├── 数据表格（订单号、客户、金额、状态、时间、操作） │ └── 分页 ├── 新增/编辑弹窗 │ ├── 表单字段（客户、商品、数量、金额、状态） │ └── 提交/取消 └── 详情弹窗 ├── 订单信息 ├── 客户信息 └── 商品列表

第二章：模块设计

2.1 技术方案设计

技术选型：

• 框架：Vue 3 或 React 18
• UI 库：Element Plus 或 Ant Design 5
• 状态管理：Pinia 或 Zustand
• 路由：Vue Router 或 React Router
• HTTP：Axios（已封装）

目录结构：

src/ ├── views/ │ └── orders/ │ ├── OrderList.vue / OrderList.tsx │ ├── OrderForm.vue / OrderForm.tsx │ └── OrderDetail.vue / OrderDetail.tsx ├── components/ │ └── orders/ │ └── OrderStatsCard.vue / OrderStatsCard.tsx ├── stores/ │ └── orderStore.ts ├── types/ │ └── order.ts └── composables / hooks/ └── useOrders.ts

2.2 接口类型定义

// types/order.tsexportinterfaceOrder{id:numberorderNo:stringcustomerName:stringamount:numberstatus:'pending'|'processing'|'completed'|'cancelled'items:OrderItem[]createdAt:string}exportinterfaceOrderItem{productId:numberproductName:stringquantity:numberunitPrice:number}exportinterfaceOrderStats{total:numberpending:numberprocessing:numbercompleted:number}exportinterfaceOrderQuery{page:numberpageSize:numberorderNo?:stringstatus?:stringstartDate?:stringendDate?:string}

第三章：AI 驱动开发流程

3.1 标准开发工作流

需求分析 → 写 Prompt → AI 生成 → 审查代码 → 对接接口 → 测试调优 → 交付

3.2 分阶段 Prompt

阶段 1：生成类型定义

请根据以下 Swagger 定义生成 TypeScript interface。 [粘贴 Swagger] 要求： - 使用 interface - 可选字段标记 ? - 枚举使用联合类型 - 生成 OrderStats 类型

阶段 2：生成列表页

请生成订单列表页，技术栈：[Vue 3 + Element Plus / React 18 + Ant Design]。 功能： 1. 统计卡片（4 个：总数、待处理、处理中、已完成） 2. 搜索区域（订单号、状态、日期范围） 3. 表格（订单号、客户、金额、状态 Tag、时间、操作） 4. 分页 5. 操作：新增、编辑、删除、查看详情 接口： GET /api/orders GET /api/orders/stats 类型： [粘贴 Order 类型]

阶段 3：生成表单和详情

请生成订单表单组件和详情弹窗组件。 表单字段： - 客户名称（必填） - 订单状态（下拉：待处理/处理中/已完成/已取消） - 商品列表（动态添加/删除行） 详情弹窗： - 显示订单所有信息 - 商品列表表格 - 关闭按钮

阶段 4：代码审查

请审查以下代码，找出问题： [粘贴代码] 关注： 1. 安全问题 2. 性能问题 3. 边界情况 4. TypeScript 类型

第四章：代码审查清单

4.1 审查维度

4.2 最终检查清单

• 所有页面能正常打开
• 搜索功能正常
• 新增/编辑/删除功能正常
• 分页功能正常
• 空数据和错误状态处理
• 响应式布局（手机端）
• 没有 console.error
• TypeScript 编译无错误

第五章：建立个人知识库

5.1 知识库结构

我的前端知识库 ├── Prompt 模板库/ │ ├── 列表页生成.md │ ├── 表单页生成.md │ ├── 接口对接.md │ ├── 代码审查.md │ └── 调试排错.md ├── 代码片段/ │ ├── Axios 封装.ts │ ├── 路由守卫.ts │ ├── 防抖节流.ts │ └── useAsync.ts ├── 踩坑记录/ │ ├── Vue 常见问题.md │ ├── React 常见问题.md │ └── 接口联调问题.md └── 学习笔记/ ├── Vue 核心概念.md ├── React Hooks.md └── TypeScript 进阶.md

5.2 Prompt 模板库示例

## 列表页生成模板 请用 [技术栈] 写一个 [模块名] 管理列表页。 功能： 1. 搜索区域：[字段] 2. 表格字段：[字段] 3. 分页 4. 操作列：[操作] 接口： GET [地址] 参数：[参数] 返回：[返回结构] 输出要求： - 处理 loading/error/empty - 严格 TypeScript - 注释中文

第六章：结业项目

6.1 项目要求

题目：订单管理系统（或自选业务模块）

必须包含：

1. ✅ 登录页
2. ✅ 管理后台骨架（侧边栏 + 顶部栏）
3. ✅ 列表页（搜索 + 表格 + 分页 + 统计卡片）
4. ✅ 新增/编辑弹窗（表单校验）
5. ✅ 删除确认
6. ✅ 路由守卫（登录拦截）
7. ✅ Axios 封装
8. ✅ TypeScript 类型定义

加分项：

• 文件上传
• 导出 Excel
• 批量操作
• 权限控制
• 响应式布局

6.2 开发时间

建议 1-2 天内独立完成。

6.3 提交物

1. 可运行的项目代码
2. 个人 Prompt 模板库
3. 结业总结（遇到的问题和解决方案）

第七章：结业评审标准

7.1 评分维度

7.2 十期回顾

7.3 三个行动项

1. ✅本周内：独立完成结业项目
2. ✅本月内：建立个人 Prompt 库（10+ 场景）
3. ✅持续：养成"生成 → 审查 → 调优"的习惯

最后记住这个公式：

后端思维 + AI 工具 + 最小前端知识 = 独立交付前端页面

AI 是副驾驶，你是机长。🛫

恭喜你完成全部学习！