后端使用 AI 开发前端速成：第十期：综合项目实战与结业

程序猿Top

186人浏览 · 2026-06-07 14:39:17

程序猿Top · 2026-06-07 14:39:17 发布

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

本期目标：独立完成一个完整业务模块，建立可持续的 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    # 订单统计

前端需求推导：

接口	前端页面
GET /api/orders	订单列表页（Table + Pagination + Search）
GET /api/orders/:id	订单详情弹窗/页面
POST /api/orders	新增订单弹窗
PUT /api/orders/:id	编辑订单弹窗
DELETE /api/orders/:id	删除确认弹窗
GET /api/orders/stats	统计卡片（Dashboard 区域）

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.ts
export interface Order {
  id: number
  orderNo: string
  customerName: string
  amount: number
  status: 'pending' | 'processing' | 'completed' | 'cancelled'
  items: OrderItem[]
  createdAt: string
}

export interface OrderItem {
  productId: number
  productName: string
  quantity: number
  unitPrice: number
}

export interface OrderStats {
  total: number
  pending: number
  processing: number
  completed: number
}

export interface OrderQuery {
  page: number
  pageSize: number
  orderNo?: string
  status?: string
  startDate?: string
  endDate?: 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 审查维度

维度	检查项	工具
功能	三态处理、分页逻辑、表单校验	手动测试
安全	XSS、敏感数据、权限控制	搜索 v-html
性能	防抖、懒加载、虚拟滚动	DevTools
类型	any、类型完整性	TypeScript 编译
规范	命名、注释、代码结构	ESLint
可维护性	组件拆分、复用性	代码 review

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 项目要求

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

必须包含：

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

加分项：

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

6.2 开发时间

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

6.3 提交物

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

第七章：结业评审标准

7.1 评分维度

维度	权重	标准
功能完整度	40%	所有功能正常运行
代码质量	25%	类型安全、无安全问题
AI 协作能力	20%	能独立使用 AI 生成 + 审查代码
知识沉淀	15%	有个人 Prompt 库和踩坑记录

7.2 十期回顾

期数	核心技能
1	全景认知
2	HTML/CSS/JS/TS 基础
3	Vue 3 列表页
4	React 18 列表页
5	Cursor + Prompt 工程
6	表单与 CRUD
7	路由、权限、骨架
8	真实接口联调
9	调试排错与优化
10	综合实战与结业