带有 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 课程链接： src="//player.bilibili.com/player.html?aid=399889004&bvid=BV1Bo4y1771J&cid=1168469324&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">

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

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

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

org.springframework.boot spring-boot-starter-web 2.4.0 org.springframework.boot spring-boot-starter-thymeleaf 2.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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"> </script>

复制 在这里，我们从 CDN 加载 Vue.js，但如果您愿意的话，您也可以托管它。

我们在浏览器中加载 Babel，以便我们可以在页面中编写一些符合 ES6 的代码，而无需运行转译步骤。

在现实应用程序中，您可能会使用 Webpack 和 Babel 转译器等工具来构建过程，而不是使用浏览器内的 Babel。

现在让我们保存页面并使用mvn spring-boot : run命令重新启动。我们刷新浏览器来查看我们的更新；还没有什么有趣的事情。

接下来，让我们设置一个空的 div 元素，将用户界面附加到该元素上：

复制 接下来，我们在页面上设置一个Vue应用程序： <script type="text/babel"> var app = new Vue({ el: '#contents' }); </script>

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

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

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

Name of Event:

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

我们的 Vue 应用程序现在看起来像这样：

<script type="text/babel"> var app = new Vue({ el: '#contents', data: { players: [ { id: "1", name: "Lionel Messi", description: "Argentina's superstar" }, { id: "2", name: "Christiano Ronaldo", description: "World #1-ranked player from Portugal" } ] } }); </script>

复制 现在，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 标记，它将类似于以下内容：

  • // contents
  • // contents
  复制 工作流程改进说明：每次更改代码时都必须重新启动应用程序并刷新浏览器，这很快就会变得很麻烦。

  因此，为了让生活更轻松，请参阅这篇关于如何使用 Spring Boot devtools和自动重启的文章。

  4。结论 在这篇简短的文章中，我们介绍了如何使用 Spring Boot 作为后端和Vue.js作为前端来设置 Web 应用程序。此配方可以为更强大和可扩展的应用程序奠定基础，而这只是大多数此类应用程序的起点。