前端与后端数据完整交互全流程（企业实战版）

一、核心交互本质

前后端分离架构：

后端：提供接口 API（返回 JSON 格式数据），运行在服务器，操作数据库
前端：通过网络请求调用后端接口，拿到数据渲染页面；提交表单 / 操作时传参给后端入库
通信标准协议：HTTP / HTTPS

完整流程：前端发起请求 → Nginx / 服务接收 → 后端 Controller 接收参数 → 业务逻辑 + 操作 MySQL/Redis → 返回 JSON 响应 → 前端解析渲染页面

二、前端发送请求的 4 种主流方式

1. 原生 AJAX（XMLHttpRequest，底层基础）

所有请求库底层都是封装 XHR，面试常考手写

javascript 复制代码

// GET请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/api/user/list?page=1&size=10', true);
xhr.send();
xhr.onload = function () {
  if (xhr.status === 200) {
    const res = JSON.parse(xhr.responseText);
    console.log('后端返回数据', res.data);
  }
}

// POST传参
xhr.open('POST', 'http://localhost:8080/api/login', true);
// 请求头告诉后端是JSON格式
xhr.setRequestHeader('Content-Type', 'application/json');
const params = JSON.stringify({username: 'admin', password: '123456'});
xhr.send(params);

2. Fetch API（浏览器原生新标准，替代 AJAX）

现代浏览器内置，无需引入第三方库，返回 Promise

javascript 复制代码

// GET
fetch('/api/user/list?page=1')
  .then(res => res.json())
  .then(data => console.log(data))

// POST
fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({username: 'admin', password: '123456'})
})
.then(res => res.json())

3. Axios（企业项目 90% 在用，Vue/React 标配）

基于 Promise 封装 XHR，支持拦截器、超时、统一配置、请求取消

1）安装

复制代码

npm install axios

2）基础使用

javascript 复制代码

import axios from 'axios'

// GET传参：params自动拼接url
axios.get('/api/user/list', {
  params: { page: 1, size: 10 }
}).then(res => {
  console.log(res.data) // 后端真实数据
})

// POST传JSON参数（最常用）
axios.post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(res => {
  // 登录成功保存token
  localStorage.setItem('token', res.data.token)
})

3）企业统一封装（核心）

统一域名、请求头携带 Token、统一错误提示、响应拦截

javascript 复制代码

// request.js 统一请求封装
import axios from 'axios'
const service = axios.create({
  baseURL: '/api', // 统一接口前缀
  timeout: 10000
})

// 请求拦截器：每次请求自动带上登录凭证Token
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

// 响应拦截器：统一处理后端错误码
service.interceptors.response.use(res => {
  return res.data
}, err => {
  // 401未登录，跳转到登录页
  if (err.response.status === 401) location.href = '/login'
  return Promise.reject(err)
})

export default service

4. jQuery.ajax（老旧项目遗留，新项目不用）

仅维护老系统会见到，现在企业开发抛弃 jQuery

javascript 复制代码

$.ajax({
  url: '/api/list',
  type: 'GET',
  data: { page: 1 },
  success: res => console.log(res)
})

三、两种参数传递格式（后端接收区分）

1. Query 参数（URL 拼接，GET 专用）

地址栏 ?key=value&key2=value2

后端接收：@RequestParam

适用：分页、筛选查询

2. RequestBody JSON 参数（POST 主流）

请求头 Content-Type: application/json

前端直接传 JS 对象，后端用实体类接收 @RequestBody

适用：登录、新增、编辑表单提交

3. FormData 表单（文件上传专用）

上传图片 / 文件时使用，后端接收 MultipartFile

javascript 复制代码

const formData = new FormData()
formData.append('file', file)
axios.post('/api/upload', formData, {
  headers: {'Content-Type': 'multipart/form-data'}
})

四、跨域问题（前后端分离必踩坑）

出现原因

前端域名端口：localhost:5173

后端域名端口：localhost:8080

浏览器同源策略阻止跨域请求

4 种解决方案（企业常用）

后端 CORS 配置（开发 / 线上首选） SpringBoot 添加跨域注解 / 全局配置，允许前端域名访问

本地开发代理（Vite/Webpack） 前端配置 proxy，前端请求转发给后端，规避浏览器跨域 vite.config.js 示例：

javascript 复制代码

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true
      }
    }
  }
})

Nginx 反向代理（线上部署）
静态前端资源与接口统一域名，无跨域
JSONP（仅 GET，老旧方案，不推荐）

五、登录鉴权：前后端身份交互（企业必备）

主流方案：Token（JWT）

前端提交账号密码 POST 登录接口
后端校验账号密码正确，生成JWT Token返回前端
前端将 Token 存入 localStorage / sessionStorage
后续所有请求通过请求头携带 Token
后端拦截器校验 Token 是否有效、过期
Token 失效返回 401，前端清除缓存跳登录

流程代码（Axios 拦截器上方已演示）

六、完整业务交互案例（用户列表 CRUD）

1. 查询数据（GET）

前端调用接口拿列表，循环渲染表格

javascript 复制代码

import request from '@/utils/request'
// 获取用户分页列表
export function getUserList(page, size) {
  return request.get('/user/list', { params: { page, size } })
}

// 页面调用
getUserList(1, 10).then(res => {
  tableData = res.records // 赋值给页面表格数组
})

2. 新增数据（POST）

前端收集表单数据传给后端，后端插入数据库

javascript 复制代码

export function addUser(data) {
  return request.post('/user/add', data)
}
// 点击提交
addUser(form).then(() => {
  ElMessage.success('新增成功')
  getList() // 刷新列表
})

3. 修改数据（PUT）

javascript 复制代码

export function updateUser(data) {
  return request.put('/user/update', data)
}

4. 删除数据（DELETE）

javascript 复制代码

export function delUser(id) {
  return request.delete(`/user/delete?id=${id}`)
}

七、后端统一返回格式（标准 JSON）

前后端约定统一结构体，前端拦截器统一处理

html 复制代码

{
  "code": 200,       // 状态码：200成功，500服务异常，401未登录
  "msg": "操作成功", // 提示文字
  "data": {}         // 真实业务数据（列表、对象、字符串）
}

前端判断 code，非 200 直接弹出错误提示。

八、进阶交互方案

WebSocket 实时通信
1. HTTP 是短连接，单向请求；WebSocket 长连接双向通信
2. 适用：聊天、实时通知、大屏数据实时刷新、在线协同
SSE（服务端推送）
1. 后端单向持续推送数据，无需前端轮询
文件流交互
1. 后端返回二进制流，前端实现 Excel/PDF 下载

九、常见交互问题总结

跨域报错：配置后端 CORS 或前端代理
传参后端接收不到：区分 params（get）和 data（post json）
401 未登录：Token 丢失、过期、请求头没携带
文件上传失败：必须使用 FormData，不能传 JSON
数据渲染不更新：异步请求时机问题，数据赋值错误
接口并发重复请求：添加防抖、请求取消、加载遮罩