如何將來自 Spring 的 ModelAndView object 獲取到 Vue 數據中？

Question

我有一個 controller class：

@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 怎么樣？ 或者我應該如何將 thymeleaf object 標記為 vue 數據？

任何其他建議也將不勝感激。 我的主要目標是在前端頁面上使用 Vue。

Answer 1

如果我理解正確，在getitems.html中，您插入了一個<script> ，其中包含應該執行的代碼<%= ${auctionItems} %> 。

這是錯誤的，因為<% %>代碼在服務器端在 servlet 中執行，然后將結果返回給用戶，而您實際上嘗試在腳本標記中的客戶端執行該代碼。 它不可能工作。

如果您希望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 本身中，並且僅當您需要來自后端的數據時才在 js 中創建 GetRequest，如下所示：

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

並且您的 controller 應該返回包含數據的響應，而不是將其存儲到 Model 中。

Answer 2

這是如何做到的。

data: {
      auctionItem: [(${auctionItem})],
      userBidValue: null
     }