带有 Spring Boot 后端的 Vue.js 前端

1. 概述
   在开始本教程中，先推荐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：

最后，我们的 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>
});
复制
最后，让我们循环应用程序对象中的玩家集并为每个玩家渲染一个玩家卡组件：

热门相关：恭喜你被逮捕了   变身蜘蛛侠   重生野性时代   回眸医笑，冷王的神秘嫡妃   花月颂