如何使用 Vue 访问 Spring Boot 模型？

发布时间：2021-02-25 06:48

我不知道如何访问我在 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：

<!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>

回答1

您可以关注此博客来做您想做的事。 https://dev.to/brunodrugowick/spring-boot-vue-js-axios-and-thymeleaf-with-bootstrap-in-4-commits-2b0l。在本文中，作者解释了如何通过在 pom.xml 中添加 VueJS 依赖项来一起使用 Thymeleaf 和 VueJS。

您需要在 pom xml 中遵循以下依赖项才能使用 VueJS，

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>vue</artifactId>
    <version>2.6.11</version>
</dependency>

回答2

Thymeleaf 是服务器端 Java 模板引擎，而 Vue 是构建前端层的 JS 框架。将 Spring 与 Vue 连接的最佳方式是通过 API。因此，您需要将数据公开为 JSON，进行 http 调用 vue app -> java api 并使用响应。

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