🎉 欢迎使用 AI合租 文档系统!返回主站 →
文档中心
💻 Vibe Coding
Day 5: 写功能

Day 5: 写功能

从产品需求到代码实现,让 Claude 帮你快速开发功能。

从需求开始

描述清楚功能

你:做一个用户注册功能,需要:
- 邮箱、密码输入框
- 密码确认
- 邮箱格式验证
- 提交后显示成功提示

Claude 会:

  1. 分析需求
  2. 设计实现方案
  3. 创建相关文件
  4. 写完整代码

分步骤实现

你:先创建注册表单的 UI 界面
Claude:我来创建一个用户注册表单...

你:现在添加表单验证
Claude:我来添加邮箱和密码验证...

你:最后对接后端 API
Claude:我来添加提交数据的逻辑...

前端功能开发

创建组件

你:创建一个商品卡片组件,显示图片、标题、价格、加购物车按钮

状态管理

你:给购物车添加状态管理,用 Redux 或者 Context API

路由配置

你:添加用户中心路由,包括个人信息、订单历史、设置页面

响应式布局

你:让这个页面支持手机和桌面端,用 flex 布局

后端功能开发

API 接口

你:创建用户相关的 CRUD 接口
- GET /api/users - 获取用户列表
- POST /api/users - 创建用户
- PUT /api/users/:id - 更新用户
- DELETE /api/users/:id - 删除用户

数据验证

你:给用户注册接口添加数据验证:
- 邮箱格式验证
- 密码强度检查
- 用户名重复检查

权限控制

你:添加 JWT 身份认证中间件,保护需要登录的接口

数据库操作

你:用 Mongoose 创建用户模型,包含基本字段和索引

完整功能示例

评论系统

你:做一个文章评论功能,包括:
1. 评论列表显示
2. 发表评论
3. 点赞评论
4. 删除自己的评论
5. 管理员可以删除任何评论

Claude 会创建:

  • 前端评论组件
  • 后端评论 API
  • 数据库模型
  • 权限验证

搜索功能

你:给商品列表添加搜索功能:
- 关键词搜索
- 分类筛选
- 价格区间
- 排序(价格、销量、时间)

开发技巧

1. 说清楚技术栈

你:用 React + TypeScript + Ant Design 创建表格组件

2. 指定设计规范

你:按照 Material Design 风格设计按钮组件

3. 考虑边界情况

你:处理一下加载状态、错误状态、空数据状态

4. 性能优化

你:给这个列表组件添加虚拟滚动,支持大量数据

功能拆解

复杂功能分步骤

大功能:在线聊天系统

第一步:创建聊天界面
你:先做聊天的 UI,消息列表 + 输入框

第二步:添加消息发送
你:实现发送消息功能

第三步:实时通信
你:用 WebSocket 实现实时消息

第四步:完善功能
你:添加文件上传、表情、@用户功能

从简单到复杂

版本1:基础功能
你:先实现用户能登录就行

版本2:增加功能
你:添加忘记密码和邮箱验证

版本3:完善体验
你:添加第三方登录(微信、QQ)

代码质量

添加注释

你:给这些函数添加详细注释,解释业务逻辑

错误处理

你:给所有 API 调用添加错误处理和用户提示

类型定义

你:为这些接口添加 TypeScript 类型定义

测试用例

你:为登录功能写几个测试用例

实际项目流程

  1. 需求分析

    你:我要做一个博客系统,用户能发文章、评论、点赞
  2. 架构设计

    你:帮我设计一下技术架构和数据库结构
  3. 功能开发

    你:先从用户系统开始,注册、登录、个人资料
  4. 测试部署

    你:写点测试,然后部署到服务器
⚠️

重要:功能复杂的时候,一定要分步骤。一次性要求太多,Claude 可能顾不过来。

第五天完成! 你已经学会用 Claude 开发完整功能了。明天学习代码重构技巧。

下一步

Day 6: 重构代码 - 让代码更优雅、更好维护


练习建议

  • 选一个小功能完整实现一遍
  • 试试前端 + 后端的完整流程
  • 体验一下分步骤开发的好处