Day 5: 写功能
从产品需求到代码实现,让 Claude 帮你快速开发功能。
从需求开始
描述清楚功能
你:做一个用户注册功能,需要:
- 邮箱、密码输入框
- 密码确认
- 邮箱格式验证
- 提交后显示成功提示
Claude 会:
- 分析需求
- 设计实现方案
- 创建相关文件
- 写完整代码
分步骤实现
你:先创建注册表单的 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 类型定义
测试用例
你:为登录功能写几个测试用例
实际项目流程
-
需求分析
你:我要做一个博客系统,用户能发文章、评论、点赞
-
架构设计
你:帮我设计一下技术架构和数据库结构
-
功能开发
你:先从用户系统开始,注册、登录、个人资料
-
测试部署
你:写点测试,然后部署到服务器
⚠️
重要:功能复杂的时候,一定要分步骤。一次性要求太多,Claude 可能顾不过来。
第五天完成! 你已经学会用 Claude 开发完整功能了。明天学习代码重构技巧。
下一步
Day 6: 重构代码 - 让代码更优雅、更好维护
练习建议:
- 选一个小功能完整实现一遍
- 试试前端 + 后端的完整流程
- 体验一下分步骤开发的好处