SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfrontend-backend-integration

frontend-backend-integration

Frontend & websites

View repository

Updated 10-15 11:00

About this skill

Frontend-Backend Integration

Function Description

This skill is specifically for frontend-backend API integration checking and debugging, including:

  • Check frontend-backend interface documentation
  • Analyze code to summarize API specifications
  • Verify request/response format consistency
  • Ensure data structures are correctly mapped
  • Debug network call issues

Use Cases

  • "Check whether frontend-backend integration is correct"
  • "Frontend reports an error when calling backend API"
  • "Ensure frontend-backend data formats are consistent"
  • "Debug interface call issues"
  • "Integration work for newly added APIs"

Integration Process

Step 1: Review the project structure

First, understand the project's frontend and backend directory structure:

# 查看前端目录
ls frontend/src/
ls frontend/src/api/
ls frontend/src/stores/

# 查看后端目录
ls backend/
ls backend/app/

Step 2: Find or create API documentation

Prioritize finding existing documentation

# 查找API文档
find docs/ -name "*api*" -o -name "*API*" -o -name "*接口*"
find backend/docs/ -type f
find frontend/docs/ -type f

Common documentation locations

  • docs/api-reference.md - API reference documentation
  • docs/frontend/ - Frontend-related documentation
  • backend/tests/test_*.py - Backend test files (containing API behavior)
  • backend/README.md - Backend description

Step 3: Analyze the backend API specification

1. Check the backend main entry file

# backend/app/main.py 或类似文件
# 重点查找：
# - @app.get/post/put/delete 装饰器定义的路由
# - response_model 指定的响应格式
# - 参数定义（query, path, body）

2. Check the Schema definitions

# backend/app/schemas.py
# 重点查找：
# - Pydantic模型定义
# - 字段类型和验证规则
# - ApiResponse格式
# - PaginatedResponse格式

3. Check the test files

# backend/tests/test_main.py
# 重点查找：
# - 测试请求的参数格式
# - 预期的响应格式
# - 断言检查的数据结构

Step 4: Analyze frontend API calls

1. Check the API wrapper

// frontend/src/api/index.js
// 重点查找：
// - baseURL配置
// - axios拦截器处理
// - 各个API方法的参数和返回值

2. Check Store state management

// frontend/src/stores/*.js
// 重点查找：
// - API调用方式
// - 响应数据处理方式
// - 数据提取路径（res.data vs res.items）

3. Check page components

// frontend/src/views/*.vue
// 重点查找：
// - API调用时机
// - 数据使用方式
// - 错误处理

Step 5: Compare and verify

Response format comparison table

Backend return format Frontend should extract Verification point
ApiResponse {code, message, data} res.data Whether the frontend uses.data
PaginatedResponse {items, total, page} res.items, res.total Whether the frontend directly accesses
Nested object {category: {id, name}} item.category.name Whether the component accesses correctly
Array field {tags: [...]} item.tags.map() Whether it is handled as an array

Port configuration verification

Backend configuration：

# backend/app/config.py
# 查找 host, port 配置
# 默认通常是 0.0.0.0:8000

Frontend proxy configuration：

// frontend/vite.config.js
// server.proxy['/api'] 应指向后端地址
// 例如：target: 'http://localhost:8000'

Frontend baseURL：

// frontend/src/api/index.js
// baseURL 应为 '/api'（走代理）

Step 6: Checklist

  • The backend API endpoint paths are consistent with frontend calls
  • The request methods (GET/POST/PUT/DELETE) match
  • The request parameter names and types are correct
  • The response format is handled correctly (.data vs direct access)
  • Data field mapping is correct (nested objects, arrays)
  • Error handling covers exceptional cases
  • The CORS configuration allows the frontend domain

Common Issues

Issue 1: Inconsistent response format

Symptom: The frontend cannot retrieve data and displays undefined

Cause: Some backend APIs returnApiResponsewrapping, while some directly return data

Solution：

// 检查后端返回格式，调整前端处理
// 如果是 ApiResponse 格式：
this.data = res.data

// 如果是直接返回格式：
this.data = res

Issue 2: CORS error

Symptom: The browser console displays a CORS policy error

Solution：

# backend/app/main.py
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],  # 前端地址
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Issue 3: Port conflict

Symptom: After the frontend starts, it cannot access the backend API

Solution：

  • Check whether the backend is running on the correct port (default 8000)
  • Check the proxy configuration in the frontend vite.config.js
  • Usenetstat -ano | findstr :8000check port usage

Problem 4: Field name mismatch

Symptoms: Some data does not display correctly

Solution：

  • Compare the backend Schema definitions with the fields used by the frontend
  • Check snake_case vs camelCase conversion
  • Confirm the access paths of nested objects

Practical cases

Case: Vue3 + FastAPI integration

Backend (FastAPI)：

@app.get("/api/articles", response_model=PaginatedResponse)
async def list_articles(page: int = 1, page_size: int = 20):
    # 返回格式：{items: [...], total: 100, page: 1, page_size: 20, total_pages: 5}
    return PaginatedResponse(...)

Frontend (Vue3 + Pinia)：

// stores/article.js
const res = await articleApi.getList({ page: 1, page_size: 20 })
// 直接访问，因为后端返回PaginatedResponse而不是ApiResponse
this.articles = res.items || []
this.pagination = {
  total: res.total || 0,
  page: res.page || 1,
  // ...
}

Case: React + Node.js integration

Backend (Express)：

res.json({
  success: true,
  data: { items: [...], total: 100 }
})

Frontend (React)：

const res = await api.get('/articles')
// 需要访问 .data.data.items
setItems(res.data.data.items)

Documentation template

API integration documentation template

# 前后端API对接文档

## 服务地址
- 前端：http://localhost:5173
- 后端：http://localhost:8000
- API代理：/api -> http://localhost:8000/api

## API端点列表

### 文章列表
- **请求**：`GET /api/articles?page=1&page_size=20`
- **响应**：
  - 格式：直接 `PaginatedResponse`
  - 字段：`{items, total, page, page_size, total_pages}`

### 文章详情
- **请求**：`GET /api/articles/{id}`
- **响应**：
  - 格式：`ApiResponse {code, message, data}`
  - 数据在 `data` 字段中

## 数据结构

### 文章对象（列表）
```javascript
{
  id: number,
  title: string,
  slug: string,
  summary: string | null,
  cover_image: string | null,
  category: { id, name, slug } | null,
  tags: [{ id, name, slug }],
  author_name: string,
  views: number,
  published_at: string | null
}


## 注意事项

1. **响应格式不统一**：很多后端框架的列表接口直接返回分页数据，而详情接口返回包装格式
2. **日期格式**：后端通常返回ISO格式字符串，前端需要解析
3. **空值处理**：前端需要处理可能为null的字段
4. **错误处理**：确保拦截器正确处理HTTP错误状态
5. **类型安全**：使用TypeScript可以提前发现类型不匹配

## 工具推荐

- **API测试**：Postman, curl, HTTPie
- **网络抓包**：浏览器DevTools Network面板
- **文档生成**：FastAPI自动生成Swagger文档
- **类型检查**：TypeScript接口定义