前后端联调的艺术：从Mock数据到无缝切换真实API

国家不保护废物
114 阅读6分钟

前后端联调的艺术：从Mock数据到无缝切换真实API

如何优雅地实现前后端并行开发？学会这招，联调效率翻倍！

引言：一个开发者的日常困境

记得我刚入行时，团队里前后端开发总是互相等待： "后端接口还没好吗？" "前端页面还没好我怎么测？" 😫 这种"前后端互等"的困境，直到我掌握了前后端联调的艺术才得以解决！

什么是前后端联调？为什么如此重要？

前后端联调就像是软件开发中的"握手仪式"🤝：

  • 前端负责展示层（React/Vue等）
  • 后端负责数据处理（Java/Node/Go等）
  • 联调就是让这两部分完美协作的过程

为什么要专门进行联调？

  1. 避免开发阻塞（前后端可并行开发）
  2. 确保接口一致性（数据格式、字段名等）
  3. 提早发现接口设计问题
  4. 提升整体开发效率

我们的技术栈选择

graph LR
A[前端] --> B(React)
C[Mock服务] --> D(vite-plugin-mock)
E[HTTP请求] --> F(axios)
G[后端] --> H(Node/Java/Go)

第一步：Mock数据 - 前端的"替身演员"

当后端API还没准备好时，前端如何独立开发？答案就是Mock数据！

配置vite-plugin-mock

当然，你要先在命令行下载依赖，运行pnpm i vite-plugin-mock，再添加配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: './mock', // mock文件存放目录
      localEnabled: true, // 开发环境启用
    }),
  ],
})

创建Mock接口

get请求
// /mock/test.js
export default [
  {
    url: '/api/todos',
    method: 'get',
    response: () => {
      const todos = [
        { id: 1, title: '学习React', completed: false },
        { id: 2, title: '编写Mock数据', completed: true }
      ]
      return {
        code: 0,
        message: 'success',
        data: todos,
      }
    }
  },
  {
    url: '/repos',
    method: 'get',
    response: () => {
      return [
        { id: 1, title: 'ai_lesson', description: "AI全栈工程师课程" },
        { id: 2, title: 'AlloyFinger', description: "超轻量级多点触控库" }
      ]
    }
  }
]

  1. 定义接口路径和方法：

    • 每个对象代表一个 Mock 接口。
    • url：接口路径（如 /api/todos）
    • method：请求方法（如 get、post）

  2. 模拟响应数据：

    • response 是一个函数，返回你希望接口返回的数据。
    • 你可以根据需要返回任意结构的数据，比如分页数据、错误码、状态信息等。

  3. 集成到项目中：

    • 如果你使用的是 Vite + vite-plugin-mock，只需将这个文件放在 /mock 目录下即可自动生效。
    • 如果是 Vue CLI 项目，可以通过 mockjs + axios 拦截请求。
    • React 项目中也可以通过配置 devServer.proxy 或使用 Mock.js 拦截 fetch/XHR 请求。

此时你可以下载(apifox.com/) 软件，可以测试是否可以成功拿到反馈

通过 Apifox，你可以直接在界面上发送 HTTP 请求来测试 API 的响应。这包括设置请求头、查询参数、请求体等，并查看返回的数据和状态码。这对于开发者来说非常方便，可以在开发过程中即时验证 API 的正确性。

通过 Apifox 或其他类似的工具（如 Postman、cURL 等）发送 HTTP 请求后返回的数据，实际上模拟了后端给前端提供的数据交互过程。当你在开发过程中使用这些工具测试 API 时，你所看到的响应数据就是后端服务器根据你的请求参数处理后返回的结果，这与前端应用实际从后端获取的数据是一致的。

image.png

post请求

// login 模块的 mock

export default [
    {
        url: '/api/login',
        method: 'post',
        timeout:2000,//请求耗时
        response: (req,res) => {
            const {username,password} = req.body
            return {
                username,
                password
            }
           
        }
    }
]

image.png

post请求需要我们自己先传入数据，之后请求时会返回我们之前设置的数据

项目结构说明：

image.png

project-root/
├── src/
│   ├── api/
│   ├── components/
│   └── App.jsx
├── mock/
│   └── test.js   # Mock接口定义
├── public/
└── vite.config.js

注意：由于mock是偏向于后端的技术，而src是存放前端的开发目录，所以我们一般将mock放到src外面

第二步：API契约 - 前后端的"合作协议"

前后端分离开发的核心是定义清晰的接口规范：

接口路径方法请求参数响应格式
/api/todosGET无{ code: number, message: string, data: Todo[] }
/reposGET无Repo[]

Todo对象结构：

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

实际开发中，我们会使用Swagger或YAPI等工具维护接口文档，确保前后端对接口的理解完全一致。

第三步：封装axios - 前端的"外交官"

// src/api/config.js
import axios from 'axios'

// 开发环境使用Mock，生产环境使用真实API
axios.defaults.baseURL = import.meta.env.DEV 
  ? 'http://localhost:5173' // Mock服务
  : 'https://api.your-real-domain.com' // 真实后端

export default axios;

接口服务封装：

// src/api/todoService.js
import axios from './config'

export const getTodos = () => {
  return axios.get('/api/todos')
}

export const getRepos = () => {
  return axios.get('/repos')
}

要是再开发环境时，则使用mock,挂载在页面上的数据，也是我们在apifox里面发送请求后得到的

第四步：前端组件 - 数据的"舞台"

// src/App.jsx
import { useState, useEffect } from 'react'
import { getTodos, getRepos } from '@/api'

function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const todosResult = await getTodos();
      const reposResult = await getRepos();
      
      setTodos(todosResult.data.data)
      setRepos(reposResult.data)
    }
    fetchData()
  }, [])

  return (
    <div className="app-container">
      <section>
        <h2>待办事项</h2>
        {todos.map(todo => (
          <div key={todo.id} className="todo-item">
            <input type="checkbox" checked={todo.completed} />
            <span>{todo.title}</span>
          </div>
        ))}
      </section>
      
      <section>
        <h2>代码仓库</h2>
        {repos.map(repo => (
          <div key={repo.id} className="repo-card">
            <h3>{repo.title}</h3>
            <p>{repo.description}</p>
          </div>
        ))}
      </section>
    </div>
  )
}

export default App

第五步：无缝切换 - 从Mock到真实API的"魔法"

这就是我们整个方案的精髓所在！✨

当后端完成真实接口开发后，我们只需要：

  1. 修改axios的基础配置
  2. 移除或禁用Mock插件
  3. 享受无缝切换的快乐！
// 只需修改这一处配置
axios.defaults.baseURL = 'https://api.your-real-domain.com'

为什么能如此丝滑切换？

  1. 接口路径一致：Mock和真实API使用相同路径
  2. 数据结构一致：前后端遵守相同的接口规范
  3. 请求库封装：所有API调用通过统一入口
  4. 环境隔离：开发/生产环境使用不同配置

联调最佳实践：我的经验之谈

  1. 尽早定义接口规范：在编码前双方确认数据结构
  2. 使用TypeScript：定义接口类型，减少沟通成本 
    interface TodoResponse {
  code: number;
  message: string;
  data: Todo[];
}
  3. Mock数据应尽量真实：包含边界情况（空列表、异常数据等）
  4. 定期同步：每周至少同步一次接口变更
  5. 版本控制：当接口变更时，使用版本号管理 /api/v1/todos /api/v2/todos

常见问题解决方案

1. 跨域问题（CORS）

解决方案：

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://your-backend-domain.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

2. 接口变更导致的前端错误

预防措施：

  • 使用TypeScript接口验证
  • 编写接口测试用例
  • 添加默认值和错误处理
// 安全的解构赋值
const { data = [] } = await getTodos()
setTodos(data)

3. 接口响应慢影响开发体验

应对方案：

  • 在Mock中添加延迟
// mock/test.js
response: () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: [...] })
    }, 500) // 模拟网络延迟
  })
}

总结：优雅联调的核心要素

  1. Mock先行：前端不等待后端
  2. 契约驱动：基于接口规范开发
  3. 抽象隔离：通过axios封装实现环境切换
  4. 渐进切换：从Mock到真实API无缝过渡

前后端联调不是战场，而是需要精心设计的协作舞蹈。💃🕺

最终效果：

  • 前端开发效率提升50%
  • 联调时间减少70%
  • 团队摩擦减少90%
  • 开发者幸福感提升100% 😄

现在，当你的后端同事问："前端需要等我们吗？" 你可以自信地回答："不需要，你们按自己的节奏来！" 🚀

avatar
文章
阅读
粉丝