如何使用Vue访问Spring Boot模型？
我不确定如何在html中使用Vue访问我的控制器创建的模型。我知道如何使用thymeleaf访问模型属性，但在任何地方都找不到任何关于如何使用Vue访问它们的信息。我想将控制器的计数值存储在下面的Vue data count中。我在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：
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Count-Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Result</h1>
<p th:text="'sentence: ' + ${wordSearch.sentence}" />
<p th:text="'word: ' + ${wordSearch.word}" />
<!--<p th:text="'count: ' + ${count}" /> -->
<div id="count-text" style="display: none">
<p th:text="${count}" />
</div>
<div id="app">
{{count}}
</div>
<script>
new Vue({
el: '#app',
data() {
return {
count: ""
}
},
created() {
this.count = ???
}
})
</script>
<a href="/greeting">Submit another message</a>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2021-02-25 20:49:16
你可以关注这个博客，做你想做的事情。https://dev.to/brunodrugowick/spring-boot-vue-js-axios-and-thymeleaf-with-bootstrap-in-4-commits-2b0l。在本文中，作者解释了如何通过在pom.xml中添加VueJS依赖来同时使用百里叶和VueJS。
要使用VueJS，需要在pom中使用以下依赖项：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>vue</artifactId>
<version>2.6.11</version>
</dependency> Stack Overflow用户
发布于 2021-02-25 15:12:07
Thymeleaf是一个服务器端的Java模板引擎，而Vue是一个构建前端层的JS框架。连接Spring和Vue的最好方法是通过API。因此，您需要将数据公开为JSON，进行http调用vue app -> java api并使用响应。
Here你可以找到更多细节，了解它是如何工作的
https://stackoverflow.com/questions/66363648
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号