• 解决axios发送post请求，springMVC接收不到数据问题

    今天发现一个问题：

    vue组件中无法正确接收并处理axios请求

    这个问题已经困扰我好久了，在电脑面前坐了两天只能确定前端应该是正确的发送了请求，但发送请求后无法正确接受后端返回的数据。

    问题：vue组件无法接受后端数据

    错误代码如下：

    1. axios.post("/simple_query",{
    2. },this.simple_query_input).then(res=>{    
    3.     console.log(res);
    4. }).catch(err=>{
    5.     console.log(err);
    6. })
    1. @RequestMapping(value = "/simple_query",method = RequestMethod.POST)
    2. public cheName handleSimpleQuery(@RequestParam("simple_query_input") String simpleQueryInput) throws Exception {
    3.  
    4. }

    网上找到也有类似未解决的：

    Spring MVC的Controller里面使用了@RequestParam注解来接收参数，但是只在GET请求的时候才能正常访问，在使用POST请求的时候会产生找不到参数的异常。原本好好的POST请求开始报400错误，找不到REST服务，一般情况下报这种错误多是由于POST请求时传递的参数不一致，但是这次不存在这种问题，百思不得其解啊。。。

    还有这个：axios发送post请求，springMVC接收不到数据问题

    1. @RequestMapping(method = RequestMethod.POST, value = "/test")
    2. @ResponseBody
    3. public ResponseEntity testDelete(@RequestParam("id") Integer id)
    4.         throws Exception {
    5.     return ResponseEntity.ok();
    6. }

    代码中是规定了请求方式POST，使用@RequestParam接收id参数。

    然后前台请求参数也对,是这个形式的{id:111}，看起来没错啊，参数名完全一样，但是后台报错Required String parameter 'id' is not present,说id参数必须传过来。分析问题
    虽然前端传递的参数形式为{id: 111}，看起来id的参数名确实是一样的，但是这个参数是作为请求的body而非作为普通参数或query parameter传递的。因此无法直接使用@RequestParam注释接收它。

    今天就俩解决一下吧：

    SpringMVC 中 @PathVariable、@RequestBody、@RequestParam的使用场景以及对应的前端axios写法是什么呢？

    一、@PathVariable

    axios代码：

    1. axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
    2. .then(response => {
    3.   console.log(response.data);
    4. })
    5. .catch(error => {
    6.   console.error(error);
    7. });

    SpringMvc的controller代码：

    1. @PostMapping("/endpoint3/{firstName}/{lastName}")
    2. @ResponseBody
    3. public String endpoint2(@PathVariable("firstName") String firstName,  
    4.          @PathVariable("lastName") String lastName) {
    5. 	// 处理请求逻辑
    6. 	return "Hello, " + firstName + " " + lastName;
    7. }

    二、@RequestBody

    axios代码：

    1. axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
    2. .then(response => {
    3.   console.log(response.data);
    4. })
    5. .catch(error => {
    6.   console.error(error);
    7. });

    SpringMvc的controller代码：

    1. @PostMapping("/endpoint2")
    2. @ResponseBody
    3. public String endpoint2(@RequestBody Map requestBody) {
    4. 	String firstName = Objects.toString(requestBody.get("firstName"));
    5. 	String lastName = Objects.toString(requestBody.get("lastName"));
    6. 	// 处理请求逻辑
    7. 	return "Hello, " + firstName + " " + lastName;
    8. }

    三、@RequestParam

    axios代码：

    1. const formData = new FormData();
    2. formData.append('firstName', this.firstName);
    3. formData.append('lastName', this.lastName);
    4. axios.post('http://localhost:8080/endpoint1', formData)
    5. .then(response => {
    6.   console.log(response.data);
    7. })
    8. .catch(error => {
    9.   console.error(error);
    10. });

    SpringMvc的controller代码：

    1. @PostMapping("/endpoint1")
    2. public String handlePostRequest(@RequestParam("firstName") String firstName,
    3. 		@RequestParam("lastName") String lastName) {
    4. 	// 处理请求逻辑
    5. 	return "Hello, " + firstName + " " + lastName;
    6. }

    前台完整代码：

    1. html>
    2. <html>
    3. <head>
    4. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js">script>
    5. 	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js">script>
    6. head>
    7. <body>
    8. 	<div id="app">
    9. 		
    10. 	div>
    11. 	<script>
    12. 			new Vue({
    13. 			  el: '#app',
    14. 			  data () {
    15. 				return {
    16. 				  firstName: "John",
    17. 				  lastName: "Doe"
    18. 				}
    19. 			  },
    20. 			  mounted () {
    21. 				  const formData = new FormData();
    22. 				  formData.append('firstName', this.firstName);
    23. 				  formData.append('lastName', this.lastName);
    24. 				  axios.post('http://localhost:8080/endpoint1', formData)
    25. 					.then(response => {
    26. 					  console.log(response.data);
    27. 					})
    28. 					.catch(error => {
    29. 					  console.error(error);
    30. 					});	
    31.  
    32. 					axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
    33. 					.then(response => {
    34. 					  console.log(response.data);
    35. 					})
    36. 					.catch(error => {
    37. 					  console.error(error);
    38. 					});	
    39.  
    40. 					axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
    41. 					.then(response => {
    42. 					  console.log(response.data);
    43. 					})
    44. 					.catch(error => {
    45. 					  console.error(error);
    46. 					});	
    47.  
    48. 			  }
    49. 			})
    50. 	script>
    51.  
    52. body>

    后台核心代码：

    1. @RestController
    2. @CrossOrigin
    3. public class MySpringMvcController {
    4. 	
    5. 	@PostMapping("/endpoint1")
    6. 	public String handlePostRequest(@RequestParam("firstName") String firstName,
    7. 			@RequestParam("lastName") String lastName) {
    8. 		// 处理请求逻辑
    9. 		return "Hello, " + firstName + " " + lastName;
    10. 	}
    11. 	
    12. 	@PostMapping("/endpoint2")
    13. 	@ResponseBody
    14. 	public String endpoint2(@RequestBody Map requestBody) {
    15. 		String firstName = Objects.toString(requestBody.get("firstName"));
    16. 		String lastName = Objects.toString(requestBody.get("lastName"));
    17. 		// 处理请求逻辑
    18. 		return "Hello, " + firstName + " " + lastName;
    19. 	}
    20. 	
    21. 	@PostMapping("/endpoint3/{firstName}/{lastName}")
    22. 	@ResponseBody
    23. 	public String endpoint2(@PathVariable("firstName") String firstName,  
    24. 	         @PathVariable("lastName") String lastName) {
    25. 		// 处理请求逻辑
    26. 		return "Hello, " + firstName + " " + lastName;
    27. 	}
    28.  
    29. }

      问题来源：

    vue组件中无法正确接收并处理axios请求_前端-CSDN问答

  • 相关阅读:
    从月薪8.5K 再到拿到字节跳动 20K*13薪那天，我泪目了，没人知道我付出了多少
    Springboot毕设项目校园缴费平台dzyxyjava+VUE+Mybatis+Maven+Mysql+sprnig）
    通过条件竞争实现内核提权
    Python数据类型
    如何使用Excel进行设备管理：巡检、维修、保养、备件管理
    Pyparsing模块使用介绍
    算法与数据结构 --- 图 --- 图的应用
    基于蒙特卡诺的风、光模型出力（Matlab代码实现）
    深入理解比特币原理4----比特币网络设计
    Lumiprobe非荧光炔烃丨EU（5-乙炔基尿苷）
  • 原文地址：https://blog.csdn.net/svygh123/article/details/138739168