我们将介绍一个示例应用程序，该应用程序使用 Vue.js 前端呈现单个页面，同时使用 Spring Boot 作为后端。
我们还将利用 Thymeleaf 将信息传递给模板。
2.Spring启动设置
应用程序pom.xml使用spring-boot-starter-thymeleaf 依赖项进行模板渲染以及通常的spring-boot-starter-web：
最后，我们的 Spring Boot 控制器将位于src/main/java中：
@Controller
public class MainController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute(“eventName”, “FIFA 2018”);
return “index”;
}
}
复制
该控制器渲染单个模板，其中的数据使用model.addAttribute通过 Spring Web Model 对象传递到视图。
让我们使用以下命令运行应用程序：
mvn spring-boot:run
复制
浏览到http://localhost:8080以查看索引页面。当然，此时它会是空的。
我们的目标是使页面打印出如下内容：
Name of Event: FIFA 2018
Lionel Messi
Argentina’s superstar
Christiano Ronaldo
Portugal top-ranked player
复制
3. 使用 Vue.Js 组件渲染数据
3.1. 模板的基本设置
在模板中，我们加载 Vue.js 和 Bootstrap（可选）来渲染用户界面：
// in head tag
// other markup
// at end of body tag
复制
在这里，我们从 CDN 加载 Vue.js，但如果您愿意的话，您也可以托管它。
我们在浏览器中加载 Babel，以便我们可以在页面中编写一些符合 ES6 的代码，而无需运行转译步骤。
在现实应用程序中，您可能会使用 Webpack 和 Babel 转译器等工具来构建过程，而不是使用浏览器内的 Babel。
现在让我们保存页面并使用mvn spring-boot : run命令重新启动。我们刷新浏览器来查看我们的更新；还没有什么有趣的事情。
接下来，让我们设置一个空的 div 元素，将用户界面附加到该元素上：
复制
刚刚发生了什么？此代码在页面上创建一个 Vue 应用程序。我们使用 CSS 选择器#contents将其附加到元素。
它指的是页面上的空div元素。该应用程序现已设置为使用 Vue.js！
3.2. 在模板中显示数据
接下来，让我们创建一个标头，其中显示我们从 Spring 控制器传递的“ eventName ”属性，并使用 Thymeleaf 的功能来渲染它：
我们的 Vue 应用程序现在看起来像这样：
复制
现在，Vue.js 知道了一个名为players的数据属性。
3.3. 使用 Vue.js 组件渲染数据
接下来，让我们创建一个名为player-card的 Vue.js 组件，它仅渲染一名玩家。请记住在创建 Vue 应用程序之前注册此组件。
否则，Vue 将找不到它：
Vue.component(‘player-card’, {
props: [‘player’],
template: <div class="card"> <div class="card-body"> <h6 class="card-title"> {{ player.name }} </h6> <p class="card-text"> <div> {{ player.description }} </div> </p> </div> </div>
});
复制
最后，让我们循环应用程序对象中的玩家集并为每个玩家渲染一个玩家卡组件：
v-bind:player意味着玩家卡组件将被赋予一个名为player的属性，其值将是当前正在使用的玩家循环变量。v-bind:key需要使每个
元素唯一。一般来说，player.id是一个不错的选择，因为它已经是唯一的。
现在，如果您重新加载此页面，请观察devtools中生成的 HTML 标记，它将类似于以下内容：
-
// contents
-
// contents
因此，为了让生活更轻松，请参阅这篇关于如何使用 Spring Boot devtools和自动重启的文章。
4。结论
在这篇简短的文章中，我们介绍了如何使用 Spring Boot 作为后端和Vue.js作为前端来设置 Web 应用程序。此配方可以为更强大和可扩展的应用程序奠定基础，而这只是大多数此类应用程序的起点。