@RequestBody 空值（Spring boot 和 Vue JS）

Question

Hello everyone (first post here !)

I have an issue with a simple web application that I'm developping.

I created a rest service (POST) with spring boot, but when I try this service from the front end I cannot retrieve any values on my @RequestBody.

The javascript that's calling the controller is the following

bookStore.html

                //Submit shopping cart to the backend to be saved
            checkout : function() {
                //Place holder for the POST Request
                this.$http.post('/createOrder', {
                    'shopCart' : {'basket' : this.shoppingCart}
                });
                //END Post request
            }

OrderController.java

    @RequestMapping(value = "/createOrder",
        method = RequestMethod.POST)
public String createOrder(@RequestBody ShoppingCart shopCart, Model model) {
    Order order = new Order();
    Float totalPrice = 0f;
    order.setCreationDate(new Date());
    List<String> bookIdList = new ArrayList<>();
    for (Book book : shopCart.getBasket()) {
        bookIdList.add(book.getId());
        totalPrice = totalPrice + book.getPrice();
    }
    order.setItemList(bookIdList);
    order.setTotalOrder(totalPrice);
    orderRepo.save(order);
    List<Order> orderList = orderRepo.findAll();
    model.addAttribute("addedOrder", order);
    model.addAttribute("orderList", orderList);
    return "orderList";
}

ShoppingCart.java

public class ShoppingCart {
private List<Book> basket;

public List<Book> getBasket() {
    return basket;
}

public void setBasket(List<Book> basket) {
    this.basket = basket;
}

@Override
public String toString() {
    StringBuilder builder = new StringBuilder();
    builder.append("BookList [shoppingCart=");
    builder.append(basket);
    builder.append("]");
    return builder.toString();
}

}

Note that shoppingCart is defined as an array of object in VUE js. When I set this value it looks like this

{"shoppingCart":[{"id":"5add48ed217c1823543f0610","name":"War and Peace","author":"Leo Tolstoy","price":25},{"id":"5add48ed217c1823543f060f","name":"Madame Bovary","author":"Gustave Flaubert","price":20}]}

The issue is that shopCart is always null. Am I missing something ? it seems to be a basic thing to do and it works fine with the RequestParam controller that I've done before

Answer 1

Just to give an update. I found a workaround on this.

Instead of directly using the ShoppingCart object I'll pass a json String to the variable and use ObjectMapper to create my object.

    @RequestMapping(path = "/createOrderList", method = RequestMethod.POST)
public String createOrderList(@RequestBody String shopCart, Model model)
        throws JsonParseException, JsonMappingException, IOException {
    Order order = new Order();
    Float totalPrice = 0f;
    order.setCreationDate(new Date());
    List<String> bookIdList = new ArrayList<>();
    ObjectMapper mapper = new ObjectMapper();
    ShoppingCart shpCart = mapper.readValue(shopCart, ShoppingCart.class);
    for (Book book : shpCart.getBookList()) {
        bookIdList.add(book.getId());
        totalPrice = totalPrice + book.getPrice();
    }
    order.setItemList(bookIdList);
    order.setTotalOrder(totalPrice);
    orderRepo.save(order);
    model.addAttribute("orderList", orderRepo.findAll());
    model.addAttribute("bookList", bookRepo.findAll());
    model.addAttribute("addedOrder", order);
    return "bookStore";
}

On the fron end side the Javascript looks like that

this.$http.post('/createOrderList', JSON.stringify({
            'bookList': this.shoppingCart
        }))

This works as expected

Answer 2

This is an old post, but this info might help someone. The way it is done on the top with @RequestBody and mapping to the model should work with a @RestController, with the small exception that the response should not be a string but probably the model with updated values.

In my case, I had an issue where the @RequestBody was incorrectly imported from SwaggerUI instead of " import org.springframework.web.bind.annotation.RequestBody;" which gave me a hard to catch bug.

As long as the pojo is serializable it should have worked. Additionally, if you are sending the JSON from manually built strings, make sure that the naming conventions are followed on the casing of the properties.