前端数据传输丢失，如何解决

Question

Vue前端的ReportAdd方法获取表单的数据传入后端Post方法的接口，前后端成员变量的名字都一样，前端的请求也发送到后端了，但是后端总是读取不了值，显示为null无法插入怎么解决？
前端的测试数据Json格式，显示title有值：

后端报错：

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，首先我们需要检查前端和后端的数据绑定以及序列化过程。从提供的信息来看，前端的ReportAdd方法似乎成功地收集了表单数据，并且这些数据在发送请求时看起来是正确的。然而，后端接收到的数据却显示为NULL。

这里有几个可能的问题点和相应的解决步骤：

1. 序列化问题：确保前端发送的数据被正确地序列化成JSON格式。
2. 参数名匹配：确认前端传递的参数名称与后端接收的参数名称完全一致。
3. 后端错误处理：检查后端代码，确保对空值进行了适当的处理。
4. 网络请求问题：确认请求是否成功到达后端，可以使用浏览器开发者工具中的Network面板查看。

接下来，我会提供一些详细的调试建议和示例代码。

前端调试建议

1. 确保数据序列化：在发送请求之前，使用JSON.stringify()将对象转换为字符串。

   const formData = JSON.stringify({
     title,
     deptId,
     content,
     // 其他字段...
   });
   

2. 检查请求头：确保设置正确的Content-Type为application/json。

   axios.post('/api/reports', formData, {
     headers: {'Content-Type': 'application/json'}
   })
   .then(response => ...)
   .catch(error => ...)
   

3. 使用axios.interceptors进行全局日志记录，以便观察请求和响应的详细信息。

   import axios from 'axios';
   
   axios.interceptors.request.use(config => {
     console.log('Request:', config.data);
     return config;
   });
   
   axios.interceptors.response.use(
     response => response,
     error => {
       console.error('Error:', error.response.data);
       throw error;
     }
   );
   
   Vue.prototype.$http = axios;
   

后端调试建议

1. 在后端代码中，打印接收到的请求数据，以确认是否接收到数据。

   @PostMapping("/api/reports")
   public ResponseEntity<?> createReport(@RequestBody Report report) {
       System.out.println("Received report data: " + report.toString());
       // ...
   }
   

2. 对于可能出现NULL的情况，在后端添加默认值或异常处理。

   private String title;
   
   public void setTitle(String title) {
       this.title = title != null ? title.trim() : "";
   }
   
   // 类似地，为其他属性添加类似的setter方法
   

3. 如果后端是Spring Boot应用，考虑使用Lombok注解简化模型类。

   import lombok.Data;
   import lombok.Setter;
   
   @Data
   public class Report {
   
       @Setter(onMethod_ = @Autowired)
       private String title;
   
       // 其他字段...
   }
   

   这样，即使没有值，setter方法也会自动创建一个空字符串，而不是NULL。

4. 检查数据库字段类型和约束，确保能接受空值（如果允许）。

通过以上步骤，你应该能找到问题所在并修复它。如果问题仍然存在，请提供更多关于前端和后端代码的细节，以便我能提供更具体的帮助。