Javascript 如何使用Vue访问Spring引导模型？

我不知道如何在html中访问使用Vue的控制器创建的模型。我知道如何使用thymeleaf访问模型属性，但在任何地方都找不到有关如何使用Vue访问模型属性的任何信息。我想将控制器的计数值存储在下面的Vue数据计数中。我在CDN托管的模板中使用Vue，而不是作为单独的项目

这是我的控制器：

@PostMapping("/word")
public String searchSentence(@ModelAttribute WordSearch wordSearch, Model model) {
    int c = wordSearch.search();
    String count = String.valueOf(c);
    model.addAttribute("wordSearch", wordSearch);
    model.addAttribute("count", count);
    return "count";
}

以下是count.html：

计数表
结果



{{count}}
新Vue({
el:“#应用程序”，
数据（）{
返回{
伯爵：“是的。”
}
},
创建（）{
这个.计数=？？？
}
})

Thymeleaf是一个服务器端Java模板引擎，而Vue是一个用于构建前端层的JS框架。连接Spring和Vue的最佳方法是使用API。 因此，您需要将数据公开为JSON，进行http调用

vue app->java api

，并使用响应

---

你可以找到更多的细节，这是如何运作的

你可以通过这个博客来做你想做的事。在本文中，作者解释了如何通过在pom.xml中添加VueJS依赖项来同时使用Thymeleaf和VueJS

要使用VueJS，pom xml中需要以下依赖项，

org.webjars
vue
2.6.11

如果您只想访问Thymeleaf模板中的Spring引导模型而不调用API，请查看