当前位置：首页 > article >正文

前后端对接

article 2025/2/24 16:30:06

前端与后端的对接主要通过接口进行数据交互，具体流程和方式如下：

1. 明确需求与接口定义

前后端协商：确定需要哪些接口、接口的功能、请求参数和返回格式。
接口文档：使用工具（如 Swagger、Postman、Apifox）编写接口文档，明确以下内容：
- 请求方法（GET、POST、PUT、DELETE 等）
- 请求 URL
- 请求参数（Query、Body、Header 等）
- 返回数据格式（通常是 JSON）
- 错误码和错误信息

2. 前后端开发

前端：根据接口文档，使用 HTTP 请求库（如 fetch、axios）调用接口，获取数据并渲染页面。
后端：根据接口文档实现接口逻辑，处理数据并返回结果。

3. 接口调用方式

前端通过 HTTP 请求与后端交互，常见的请求方式包括：

（1）GET 请求（获取数据）

用于从后端获取数据。

示例：

fetch('https://api.example.com/data?id=123')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

（2）POST 请求（提交数据）

用于向后端提交数据。

示例：

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

（3）PUT 请求（更新数据）

用于更新后端的数据。

示例：

fetch('https://api.example.com/update/123', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jane', age: 25 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

（4）DELETE 请求（删除数据）

用于删除后端的数据。

示例：

fetch('https://api.example.com/delete/123', {
  method: 'DELETE'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

4. 数据格式

请求数据格式：
- application/json：JSON 格式（常用）。
- multipart/form-data：文件上传。
- application/x-www-form-urlencoded：表单提交。

返回数据格式：

通常是 JSON 格式，例如：

{
  "code": 200,
  "message": "Success",
  "data": {
    "id": 1,
    "name": "John"
  }
}

5. 跨域问题

问题：前端和后端在不同域名或端口时，浏览器会阻止跨域请求。
解决方案：
- CORS：后端设置 Access-Control-Allow-Origin 头部。
- 代理服务器：前端通过代理服务器转发请求（如使用 webpack-dev-server 或 Nginx）。
- JSONP：仅适用于 GET 请求（不推荐）。

6. 认证与授权

JWT（JSON Web Token）：
- 用户登录后，后端返回一个 Token，前端将其存储在本地（如 localStorage），并在每次请求时通过 Authorization 头部发送。
- 示例：
```
fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: { 'Authorization': 'Bearer ' + token }
});
```
OAuth 2.0：适用于第三方登录（如 Google、GitHub）。

7. 错误处理

HTTP 状态码：
- 200：请求成功。
- 400：请求参数错误。
- 401：未授权。
- 404：资源未找到。
- 500：服务器内部错误。
自定义错误信息：
- 后端返回 JSON 格式的错误信息，例如：
```
{
  "code": 400,
  "message": "Invalid input"
}
```

8. 实时通信

WebSocket：

用于实时双向通信（如聊天室、实时通知）。

示例：

const socket = new WebSocket('wss://api.example.com/socket');
socket.onmessage = function(event) {
  console.log('Received:', event.data);
};
socket.send('Hello Server');

9. 文件上传与下载

文件上传：

使用 multipart/form-data 格式上传文件。

示例：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
});