Как получить объект ModelAndView из Spring в Vue данных? - PullRequest
Новая
       42

Как получить объект ModelAndView из Spring в Vue данных?

0 голосов
/ 26 апреля 2020

У меня есть один класс контроллера: 

@RestController
public class ItemController {

    @Autowired
    private ItemService itemService;


    @GetMapping("/auction_items")
    public ModelAndView getAllItems() {
            ModelAndView mv = new ModelAndView();
            List<Item> itemList = itemService.getAllItems();
            mv.addObject("auctionItems", itemList );
            mv.setViewName("auction_items");
            return mv;
        }
    }

, и затем я пытаюсь получить в моих getitems. html страницу как: 

<script>
  var app = new Vue({
    el: '#app',
    data: {
      auctionItems: <%= ${auctionItems} %>
    }
  })
</script>

Я вижу, что с Thymeleaf работает как th: object = "auctionItems". Как насчет Vue в этом случае? Или Как мне пометить объект чабреца на vue данных?

Любые другие предложения также будут оценены. Моя главная цель - использовать Vue на главной странице.

1 Ответ

2 голосов
/ 26 апреля 2020

Если я правильно понимаю, в getitems.html вы вставили <script>, который содержит этот код <%= ${auctionItems} %>, который должен быть выполнен.

Это неправильно, поскольку код <% %> выполняется на стороне сервера в сервлете, затем результат возвращается пользователю, и вы фактически пытаетесь выполнить его на стороне клиента в теге сценария. Возможно, это не сработает.

Если вы хотите, чтобы auctionItems достиг javascript, вы должны добавить его в качестве атрибута данных в html div и извлечь его из js. Я обрисую это в общих чертах: 

// in your html
<div id="dataDiv" data-auctions="#{auctionItems}"></div>

//in your js - of course, you can change it to use jQuery if you want
var auctions = document.getElementById("dataDiv").getAttribute('data-auctions');

Это не лучший подход, но выглядит очень близко к тому, что вы пытались сделать.

Лучше было бы не хранить аукционы в самом html и делать GetRequest только в js, когда вы хотите получить данные из бэкэнда, например так: 

$.get('/auction_items', function (data, textStatus) {  
    alert('status: ' + textStatus + ', data:' + data);
});

И ваш контроллер должен вернуть ответ, содержащий данные, а не сохранять их в модели.

...