reactjs Sping Boot REST -所需的字符串参数不存在

46scxncf  于 2023-10-17  发布在  React
关注(0)|答案(4)|浏览(93)

向Sping Boot 服务器发送数据时遇到问题。我检查了Postman,一切都很好,但是我使用了ReactJS的Axios库,我得到了错误

Required String parameter 'name' is not present.

addProduct函数

addProduct = (e) => {
 e.preventDefault();
    var { productName, productPrice, productStatus } = this.state;
    callApi('product/add', 'POST', {
        name: productName,
        price: productPrice,
        status: productStatus
    }).then(res => {
        console.log(res);
    });
}

productController.java(示例网站)

@RestController
@RequestMapping(path = "/api/product")
public class ProductController {
    @Autowired
    private ProductRespository productRespository;

    @GetMapping(path = "/all")
    public @ResponseBody Iterable<Product> getAllProduct(){
        return productRespository.findAll();
    }

    @PostMapping(path = "/add")
    @ResponseBody
    public String createProduct(@RequestParam String name, @RequestParam Integer price, @RequestParam String status){
        Product product = new Product();
        product.setName(name);
        product.setPrice(price);
        product.setStatus(status);
        productRespository.save(product);
        return "OK";
    }
}

apiCaller.js

import axios from 'axios';
import * as Config from './../constants/Config';

export default function callApi(endpoint, method, body) {
    return axios({
        method: method,
        url: `http://localhost:8000/api/${endpoint}`,
        data: body,
        headers: {
            'Access-Control-Allow-Origin': '*' 
        }
    }).catch(err => {
        console.log(err);
    });
}

我该如何解决?

8ehkhllq

8ehkhllq1#

您的rest服务需要name、price、status作为请求参数,在spring中,这些参数是默认强制的。但是在react代码中,你并没有将它们作为请求参数发送,而是将它们作为请求体发送。
由于name是第一个参数,一旦它不可用,spring就会抛出'name' not available异常,但是一旦你修复了它,它就会抛出price,然后是status。那就把它们都修好
你必须像下面这样改变你的控制器方法,这将是更有效的代码和休息标准的方式。

@PostMapping(path = "/add")
@ResponseBody
public String createProduct(@RequestBody Product product){
    productRespository.save(product);
    return "OK";
}

或者改变你的react代码,像下面这样在请求中发送它们。但对于“POST”方法,不建议这样做。因为这会泄露url本身传递的信息。

addProduct = (e) => {
    e.preventDefault();
    var { productName, productPrice, productStatus } = this.state;
    callApi('product/add?name=' + productName +  '&price=' + productPrice + '&status=' + productStatus , 'POST', {}).then(res => {
        console.log(res);
    });
}
w6lpcovy

w6lpcovy2#

@RequestParam注解从url获取数据。应该是这样的:
?name=myname&price=100&status=ok
如果你在请求体中以json对象的形式发送数据,@RequestBody注解就是你要找的。确保您还将axios请求中的Content-Type设置为application/json

axios.post('url', JSON.stringify({
        "name": productName,
        "price": productPrice,
        "status": productStatus,
     }) , { headers: {  "Content-Type": "application/json"  }
})
r1zhe5dt

r1zhe5dt3#

你需要将add方法的参数改为一个@RequestBody Product参数。或者您应该在Axios请求中包含所有参数作为查询参数,例如:product/add?name=myname&price=100&status=ok

ffdz8vbo

ffdz8vbo4#

我使用了错误的HTTP方法。预期是POST,我正在尝试GET方法

相关问题