带有 Spring Boot 后端的 Vue.js 前端-Toy模板网

这篇具有很好参考价值的文章主要介绍了带有 Spring Boot 后端的 Vue.js 前端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述
在开始本教程中，先推荐1个SpringBoot+Vue前后端分离Java项目，本项目是一个大型互联网金融项目，采用Spring Boot , Dubbo 微服务的架构，包括多个独立的微服务，micr-common个公共服务，micr-web服务，micr-database数据库服务，micr-pay支付服务 ,micr-task定时任务。
前端技术栈：Vue,JavaScript, Axios, Promise
后端技术栈：Spring Boot 2，Dubbo2.7, MyBatis 3, Redis 5, MySQL 5
课程链接：

我们将介绍一个示例应用程序，该应用程序使用 Vue.js 前端呈现单个页面，同时使用 Spring Boot 作为后端。

我们还将利用 Thymeleaf 将信息传递给模板。

2.Spring启动设置
应用程序pom.xml使用spring-boot-starter-thymeleaf 依赖项进行模板渲染以及通常的spring-boot-starter-web：

org.springframework.bootspring-boot-starter-web2.4.0org.springframework.bootspring-boot-starter-thymeleaf2.4.0 复制 Thymeleaf 默认在templates/查找视图模板，我们将向 src/main/resources/templates/index.html 添加一个空的index.html。我们将在下一节中更新其内容。

最后，我们的 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应用程序：

复制
刚刚发生了什么？此代码在页面上创建一个 Vue 应用程序。我们使用 CSS 选择器#contents将其附加到元素。

它指的是页面上的空div元素。该应用程序现已设置为使用 Vue.js！

3.2. 在模板中显示数据
接下来，让我们创建一个标头，其中显示我们从 Spring 控制器传递的“ eventName ”属性，并使用 Thymeleaf 的功能来渲染它：

Name of Event:

复制现在让我们将一个“ data” 属性附加到 Vue 应用程序来保存玩家数据数组，这是一个简单的 JSON 数组。

我们的 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-for 的 Vue 指令，它将循环遍历players数据属性中的每个玩家，并为

元素内的每个玩家条目渲染一个玩家卡。

v-bind:player意味着玩家卡组件将被赋予一个名为player的属性，其值将是当前正在使用的玩家循环变量。v-bind:key需要使每个

元素唯一。

一般来说，player.id是一个不错的选择，因为它已经是唯一的。

现在，如果您重新加载此页面，请观察devtools中生成的 HTML 标记，它将类似于以下内容：