如何进行前后端联调

1、什么是前后端联调？#

简单说就是：

1. 后端写好接口
2. 前端来调接口
3. 发现问题，后端改
4. 再调，再改，直到没问题

2、联调流程图#

1、一定要先自测！（重要！）#

新人最容易犯的错：接口写完直接给前端调，结果一堆问题。

自测要测什么？

自测工具：

• Postman
• Apifox
• Swagger

2、准备接口文档#

接口文档是给前端看的，要包含这些内容：

接口文档工具：

• Word文档（简单粗暴）
• Swagger/Knife4j（自动生成）
• Apifox（在线协作）

1、方式一：本地部署#

就是把你本地的IDEA启动，让前端来连你电脑。

前提条件：

• 前后端在同一个局域网（同一个WiFi）
• 电脑防火墙要关闭
• 端口没有被占用

操作步骤：

1. 查看自己的IP地址

1
# Windows
2
ipconfig
3

4
# 找到 IPv4 地址，比如 192.168.3.10 ,可以让前端Ping一下，能够Ping通就没问题

2. 关闭防火墙

1
控制面板 → Windows Defender 防火墙 → 启用或关闭Windows Defender防火墙 → 关闭

3. 告诉前端你的地址

1
192.168.3.10

2、方式二：测试环境部署#

直接把服务部署到测试服务器上，前端访问测试环境。

常见部署方式：

• Jenkins自动部署
• 手动打包上传
• Docker部署

问同事： “我们项目怎么部署到测试环境？“

3、验证服务是否正常#

1
# 本地测试
2
curl http://localhost:8080/api/test

1、跨域问题#

现象： 前端控制台报错 CORS policy

原因： 前端和后端域名/端口不同，浏览器拦截了

解决方案：

后端添加跨域配置：

1
@Configuration
2
public class CorsConfig {
3
    @Bean
4
    public CorsFilter corsFilter() {
5
        CorsConfiguration config = new CorsConfiguration();
6
        config.addAllowedOriginPattern("*");
7
        config.addAllowedMethod("*");
8
        config.addAllowedHeader("*");
9
        config.setAllowCredentials(true);
10

11
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
12
        source.registerCorsConfiguration("/**", config);
13
        return new CorsFilter(source);
14
    }
15
}

2、前端收不到参数#

现象： 前端传了参数，后端收到是null

排查步骤：

常见错误：

1
// 错误：POST请求用了@RequestParam
2
@PostMapping("/add")
3
public Result add(@RequestParam String name) {  // 收不到！
4

5
// 正确：POST请求用@RequestBody
6
@PostMapping("/add")
7
public Result add(@RequestBody UserDto dto) {  // 正确

3、返回字段名不对#

现象： 前端要userName，你返回的是user_name

解决方案：

1
@Data
2
public class UserVo {
3
    @JsonProperty("userName")  // 指定返回的字段名
4
    private String userName;
5
}

4、日期格式问题#

现象： 日期返回的是时间戳或格式不对

解决方案：

1
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
2
private Date createTime;

5、Token失效#

现象： 接口返回401

排查：

• Token有没有传
• Token格式对不对（Bearer xxx）
• Token有没有过期

1、与前端沟通的技巧#

不要这样说：

“接口没问题啊，你自己检查下”

应该这样说：

“我这边用Postman测是正常的，我们一起看看是什么问题，你把请求参数和返回结果发我一下”

2、问题定位方法#

1
1. 让前端把请求参数发给你
2
2. 你用同样的参数在Postman测试
3
3. 如果Postman正常，说明可能是跨域或前端问题
4
4. 如果Postman也有问题，那就是后端问题

3、改接口要注意#