Spring Boot的Vue-js前端使用指南

1、 PAGE 1使用 Spring Boot 的 Vue.js 前端指南 PAGE 6使用 Spring Boot 后端的 Vue.js 前端概述在本次教程中，我们将仔细介绍一个使用 Vue.js 前端渲染一个单页面的示例应用程序，同时使用Spring Boot 作为后端。Spring Boot 安装应用程序的 pom.xml 使用 spring-boot-starter-thymeleaf 依赖进行模板渲染以及常用的 spring-boot- starter-web：org.springframework.bootspring-boot-starter-web2.0.3.RELEASEorg.

2、springframework.bootspring-boot-starter-thymeleaf2.0.3.RELEASEThymeleaf 默认在 templates/ 下查找视图模板，我们将添加以一个空得 index.html 到Controllerpublic class MainController GetMapping(/)public String index(Model model) model.addAttribute(eventName, FIFA 2018); return index;src/main/resources/templates/index.html。我们将

3、再下一节更新其内容。最后，我们得 Spring Boot 的 controller 将在 src/main/java 中：该 controller 渲染一个独立模板，其数据通过 Spring Web Model 对象使用 model.addAttribute 传递给视图。让我们使用下面命令运行应用程序：mvn spring-boot:runName of Event: FIFA 2018Lionel Messi Argentinas superstarChristiano Ronaldo Portugal top-ranked player浏览 http:/localhost:8080 来查看

4、 index 页面。当然，此时它将是空的。我们的目标是让页面打印出类似这样的内容：使用 Vue.Js 组件渲染数据模板的基本设置在模板中，让我们加载 Vue.js 和 Bootstrap（可选）来渲染用户界面：/ in head tag/ other markup/ at end of body tag这里我们从 CDN 加载 Vue.js，但是更好的是你可以托管它。我们在浏览器中加载 Babel，这样我们可以在页面上写一些符合 ES6 的代码而无需运行转换（transpilation）步骤。在实际应用程序中，你可能会使用 Webpack 和 Babel 转换器这样的工具进行构建，而不是使用浏

5、览器中 Babel。现在让我们保存页面并用 mvn spring-boot:run 命令重启。我们刷新浏览器以查看我们的更新；依旧没什么有趣的。接下来，让我们设置一个空的 div 元素，我们将其添加到我们的用户界面：接下来，我们在页面上启用 Vue 应用程序： var app = new Vue(el: #contents);刚刚发生了什么？此代码在页面上创建了一个 Vue 应用程序。我们用 CSS 选择器 #contents 将它添加到元素。这引用了页面上空的 div 元素。该应用程序现在启用了 Vue.js！在模板中显示数据接下来，让我们创建一个标题，显示我们从 Spring 的 cont

6、roller 传递的 eventName 属性，并使用Thymleaf 的功能渲染它：Name of Event:现在让我们添加一个 data 属性到 Vue 应用程序来保存我们的玩家数据数组，这是一个简单的 JSON数组。 var app = new Vue(el: #contents, data: players: id: 1,name: Lionel Messi,description: Argentinas superstar , id: 2,name: Christiano Ronaldo,description: World #1-ranked player from Portug

7、al );现在 Vue.js 知道被称为 players 的数据属性。用 Vue.js 组件渲染数据接下来，让我们创建一个名为 player-card 的组件，它只渲染一个 player。请记住在创建 Vue 应用程序之前注册此组件。否则，Vue 将找不到它：Vponent(player-card, props: player,template: player.description );最后，让我们遍历 app 对象中的玩家集合，并为每个玩家渲染 player-card 组件：这里的逻辑是被叫做 v-for 的 Vue 指令，该指令将遍历 players 数据属性钟的每个玩家并在一个元素中为

8、每条 。v-bind：palyer 意味着 player-card 组件将被赋予一个名为 player 的属性，其值将是当前正在处理的player 循环变量。v-bind：要让每个元素唯一通常，player.id 是一个很好的选择，因为它已经是唯一的了。现在，如果你重新加载此页面，请在 devtools 中观察生成的 HTML标记，它看起来类似：/ contents/ contents工作流程改进说明：每次你修改了代码之后必须重启应用程序并刷新浏览器会很快就变得很麻烦。因此，为了使生活更轻松，请参考 HYPERLINK /spring-boot-devtools 本文，了解如何使用 Spring Boot devtools 并自动重启。总结在这篇文章中，我们讨论了如何为一个 web 应用程序使用 Spring Boot 作为后端以及 Vue.