第 2 章

理工科学生项目

适合有编程基础的用户,通过API服务和全栈应用开发,深入理解AI工具在软件开发中的实际应用,掌握企业级开发的最佳实践。

项目1:API服务开发

项目概述

1
项目目标:开发一个RESTful API服务,支持用户管理、数据CRUD操作,包含认证、错误处理、数据验证等功能
2
工具栈:Cursor(Agent模式)+ GitHub Copilot(代码补全)+ Continue.dev(代码审查)
3
时间估算:8-10小时(包含设计、开发、测试)
4
难度等级:中级(需要基本的编程和API设计知识)

技术选型分析:为什么选择这个工具组合?

Cursor Agent:架构设计和代码生成

  • 项目结构生成:Agent可以理解需求,自动生成合理的项目结构
  • 架构设计:帮助设计API路由、中间件、错误处理等架构
  • 代码生成:根据需求描述生成完整的CRUD操作代码
  • 最佳实践:自动应用RESTful设计原则、错误处理模式等

GitHub Copilot:实时代码补全

  • 代码补全:输入函数名或注释,自动补全代码实现
  • 上下文理解:理解当前代码上下文,提供相关建议
  • 快速迭代:减少重复代码编写,提高开发速度
  • 多语言支持:支持多种编程语言和框架

Continue.dev:代码审查和优化

  • 代码审查:使用本地模型审查代码质量,发现潜在问题
  • 性能优化:识别性能瓶颈,提供优化建议
  • 安全审计:检查安全漏洞,提供修复建议
  • 私有部署:代码不上传到云端,保护隐私

工具协同效应:Cursor Agent负责整体架构和复杂逻辑生成,Copilot负责日常代码补全和快速迭代,Continue.dev负责代码质量保证。这个组合实现了从设计到实现再到优化的完整开发流程,既保证了开发速度,又确保了代码质量。

详细步骤

Step 1: 需求分析与API设计(1-2小时)

1. 明确API需求:用户管理、数据CRUD、认证授权

2. 使用Cursor Agent设计API结构:

"设计一个用户管理API,包含:
- POST /api/users(创建用户)
- GET /api/users(获取用户列表,支持分页和筛选)
- GET /api/users/:id(获取单个用户)
- PUT /api/users/:id(更新用户)
- DELETE /api/users/:id(删除用户)
- POST /api/auth/login(用户登录)
- POST /api/auth/register(用户注册)
使用JWT进行身份认证,实现RBAC权限控制"

3. Cursor会生成API设计文档和路由结构

4. 定义数据模型(User、Role等)

Step 2: 使用Cursor Agent生成项目结构(1小时)

1. 在Cursor中创建新项目,选择技术栈(如Node.js + Express)

2. 使用Agent模式,告诉Cursor你的需求:

"创建一个Express API项目,包含:
- 项目结构(routes、controllers、models、middleware)
- 数据库配置(使用Prisma ORM)
- 环境变量配置
- 错误处理中间件
- 日志记录中间件
- 认证中间件(JWT)"

3. Cursor会生成完整的项目结构和基础代码

4. 检查生成的结构,根据需要进行调整

Step 3: 使用Copilot加速开发(3-4小时)

1. 使用Copilot补全CRUD操作代码:

  • • 输入函数签名,Copilot自动补全实现
  • • 输入注释描述需求,Copilot生成代码
  • • 使用Copilot生成数据验证逻辑
  • • 使用Copilot生成错误处理代码

2. 实现认证和授权功能:

  • • JWT token生成和验证
  • • 密码加密(bcrypt)
  • • 权限检查中间件

3. 添加数据验证(使用Joi或Zod)

4. 实现分页和筛选功能

Step 4: 使用Continue.dev进行代码审查(1小时)

1. 配置Continue.dev,连接本地模型(Ollama)

2. 使用Continue.dev审查代码:

  • • 检查代码质量和最佳实践
  • • 识别潜在的性能问题
  • • 检查安全漏洞
  • • 提供优化建议

3. 根据审查结果优化代码

4. 确保代码符合团队规范

Step 5: 测试与部署(2小时)

1. 编写单元测试(使用Jest)

2. 编写集成测试(测试API端点)

3. 使用Postman或Thunder Client测试API

4. 部署到云平台(如Railway、Render、Vercel)

5. 配置CI/CD流程(GitHub Actions)

关键代码示例

用户控制器(Cursor Agent生成)

// controllers/userController.js
const User = require('../models/User')
const { validationResult } = require('express-validator')

exports.createUser = async (req, res) => {
  try {
    const errors = validationResult(req)
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() })
    }

    const { name, email, password, role } = req.body
    
    // 检查邮箱是否已存在
    const existingUser = await User.findOne({ email })
    if (existingUser) {
      return res.status(400).json({ error: 'Email already exists' })
    }

    // 创建用户
    const user = await User.create({
      name,
      email,
      password: await bcrypt.hash(password, 10),
      role: role || 'user'
    })

    res.status(201).json({
      id: user.id,
      name: user.name,
      email: user.email,
      role: user.role
    })
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
}

认证中间件(Copilot补全)

// middleware/auth.js
const jwt = require('jsonwebtoken')

const authenticate = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1]
  
  if (!token) {
    return res.status(401).json({ error: 'No token provided' })
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET)
    req.user = decoded
    next()
  } catch (error) {
    res.status(401).json({ error: 'Invalid token' })
  }
}

const authorize = (...roles) => {
  return (req, res, next) => {
    if (!req.user) {
      return res.status(401).json({ error: 'Unauthorized' })
    }
    
    if (!roles.includes(req.user.role)) {
      return res.status(403).json({ error: 'Forbidden' })
    }
    
    next()
  }
}

module.exports = { authenticate, authorize }

常见问题与解决方案

问题1:API设计不符合RESTful规范

解决方案:使用Cursor Agent重新设计API结构,参考RESTful最佳实践。确保使用正确的HTTP方法(GET、POST、PUT、DELETE)和状态码。

问题2:错误处理不统一

解决方案:创建统一的错误处理中间件,使用Continue.dev审查错误处理代码,确保所有错误都返回标准格式。

问题3:性能问题(数据库查询慢)

解决方案:使用Continue.dev分析性能瓶颈,添加数据库索引,使用查询优化,实现缓存机制。

问题4:安全问题(SQL注入、XSS)

解决方案:使用参数化查询,输入验证和清理,使用Continue.dev进行安全审计。

项目检查清单

API设计符合RESTful规范,使用正确的HTTP方法和状态码
实现了完整的CRUD操作,功能正常
认证和授权功能正常,JWT token生成和验证正确
数据验证完整,输入验证和错误处理统一
代码已通过Continue.dev审查,质量和安全性达标
单元测试和集成测试通过,覆盖率达标
API文档完整(Swagger/OpenAPI),易于理解和使用
已部署到生产环境,可以正常访问

项目2:全栈应用开发

项目概述

1
项目目标:开发一个完整的全栈应用(如任务管理工具、博客平台),包含前端UI、后端API、数据库、用户认证等完整功能
2
工具栈:bolt.new(前端快速搭建)+ Cursor(后端开发)+ Fabric(代码优化)
3
时间估算:12-16小时(包含前后端开发和集成)
4
难度等级:中高级(需要全栈开发知识)

技术选型分析:为什么选择bolt.new + Cursor + Fabric?

bolt.new:浏览器内全栈开发

  • WebContainers技术:在浏览器中运行Node.js,无需本地环境
  • 即时预览:代码修改立即生效,实时看到效果
  • 快速原型:几分钟内搭建完整的前端应用
  • 协作友好:分享链接即可协作开发
  • 一键部署:直接部署到Vercel等平台

Cursor:后端API开发

  • API开发:使用Agent模式快速生成后端API
  • 数据库集成:集成Prisma、TypeORM等ORM框架
  • 认证系统:实现JWT、OAuth等认证方案
  • 业务逻辑:处理复杂的业务逻辑和数据验证

Fabric:代码质量优化

  • 代码审查:使用Patterns审查代码质量
  • 性能优化:识别和优化性能瓶颈
  • 最佳实践:应用行业最佳实践和设计模式
  • 代码重构:重构代码,提高可维护性

工具协同效应:bolt.new负责快速搭建前端UI和基础交互,Cursor负责开发后端API和业务逻辑,Fabric负责优化代码质量和性能。这个组合实现了前后端分离开发,既保证了开发速度,又确保了代码质量,适合中大型全栈项目。

详细步骤

Step 1: 使用bolt.new快速搭建前端(3-4小时)

1. 访问bolt.new,创建新项目

2. 使用AI助手描述前端需求:

"创建一个任务管理应用的前端,包含:
- 登录/注册页面
- 任务列表页面(显示所有任务)
- 任务详情页面
- 创建/编辑任务表单
- 用户设置页面
使用Next.js + TypeScript + Tailwind CSS,支持暗色主题"

3. bolt.new会生成完整的前端代码

4. 调整UI样式和交互,添加动画效果

5. 实现状态管理(使用Zustand或Context API)

Step 2: 使用Cursor开发后端API(4-5小时)

1. 在Cursor中创建后端项目(Node.js + Express)

2. 使用Agent模式生成API结构:

"创建任务管理API,包含:
- 用户认证API(注册、登录、刷新token)
- 任务CRUD API
- 任务筛选和搜索API
- 用户设置API
使用Prisma ORM,PostgreSQL数据库,JWT认证"

3. 实现数据库模型和关系

4. 实现API端点和业务逻辑

5. 添加数据验证和错误处理

Step 3: 前后端集成(2-3小时)

1. 配置API客户端(使用axios或fetch)

2. 实现API调用函数:

  • • 用户认证相关API
  • • 任务CRUD API
  • • 错误处理和重试逻辑
  • • Token刷新机制

3. 连接前后端,测试API调用

4. 处理加载状态和错误状态

5. 实现乐观更新和错误回滚

Step 4: 使用Fabric优化代码质量(2-3小时)

1. 使用Fabric的Patterns审查代码:

  • • 代码质量Pattern
  • • 性能优化Pattern
  • • 安全审计Pattern
  • • 最佳实践Pattern

2. 根据Fabric的建议优化代码

3. 重构重复代码,提取公共组件

4. 优化数据库查询,添加索引

5. 实现缓存机制(Redis)

Step 5: 集成测试与部署(1-2小时)

1. 编写端到端测试(使用Playwright或Cypress)

2. 测试前后端集成功能

3. 部署前端到Vercel

4. 部署后端到Railway或Render

5. 配置环境变量和数据库连接

6. 测试生产环境功能

常见问题与解决方案

问题1:前后端通信失败(CORS错误)

解决方案:在后端配置CORS中间件,允许前端域名访问。检查API URL配置是否正确。

问题2:状态同步问题(前端状态与后端不一致)

解决方案:实现乐观更新和错误回滚,使用React Query或SWR管理服务器状态。

问题3:部署配置复杂

解决方案:使用环境变量管理配置,使用Docker容器化部署,使用CI/CD自动化部署流程。

项目检查清单

前端UI完整,所有页面和功能正常
后端API完整,所有端点功能正常
前后端集成正常,数据流转正确
用户认证和授权功能正常
代码已通过Fabric审查,质量达标
性能优化完成,加载速度快
前后端都已部署,可以正常访问

学习成果

完成本章后,你将:

  • 1掌握API开发的最佳实践,能够设计符合RESTful规范的API
  • 2理解全栈开发的完整流程,能够独立完成前后端分离项目
  • 3能够使用多个工具协同工作,发挥工具组合的协同效应
  • 4掌握代码质量保证方法,能够使用工具进行代码审查和优化
  • 5具备解决实际问题的能力,能够处理前后端集成、部署等复杂问题