如何将来自 Spring 的 ModelAndView 对象转换为 Vue 数据？答案

【问题标题】：How to get ModelAndView object coming from Spring into Vue data?如何将来自 Spring 的 ModelAndView 对象转换为 Vue 数据？
【发布时间】：2020-04-25 23:02:06
【问题描述】：

我有一个控制器类：

@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 对象标记为 vue 数据？

任何其他建议也将不胜感激。我的主要目标是在前端页面使用 Vue。

【问题讨论】：

标签： spring-boot vue.js thymeleaf modelandview

【解决方案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);
});

并且您的控制器应该返回包含数据的响应，而不是将其存储到模型中。

【讨论】：

谢谢。但是我在 ruby on rails 中看到可以直接将来自控制器的对象分配给 Vue 数据变量：<script> var app = new Vue({ el: '#app', data: { services: <%= services.to_json.html_safe %>, total_amount: 100, checkedServices: [], visits_services_attributes: <%= visit.visits_services.to_json.html_safe %> } }) </script> 我想类似地分配 Vue 数据变量并在当前页面上工作。我不想在同一页面上再次调用控制器。
我有点困惑，如果你能指出你从哪里得到这个，也许它会有所帮助。我想向您展示的是一种更好的方法（肯定不会多次调用控制器）。我将再次指出<% %> 不能在<script></script> 标签中执行的事实。检查您的控制台日志，您可能会遇到拼写错误。
嘿卡塔林，谢谢。我想通了。
@CatalinPirvu，为什么不在脚本标签中执行<% %>？它们将在服务器端执行并将结果打印在 html 源中，然后可用于脚本处理？

【解决方案2】：

这是怎么做的。

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

【讨论】：