帶有 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>
});
複製
最後，讓我們迴圈應用程式對象中的玩家集併為每個玩家渲染一個玩家卡組件：