- 概述
在開始本教程中，先推薦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應用程式：復制
剛剛發生了什么？此代碼在頁面上創建一個 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 > <div > <h6 > {{ player.name }} </h6> <p > <div> {{ player.description }} </div> </p> </div> </div>
});
復制
最后，讓我們回圈應用程式物件中的玩家集并為每個玩家渲染一個玩家卡組件：
v-bind:player意味著玩家卡組件將被賦予一個名為player的屬性，其值將是當前正在使用的玩家回圈變數，v-bind:key需要使每個
一般來說，player.id是一個不錯的選擇，因為它已經是唯一的，
現在，如果您重新加載此頁面，請觀察devtools中生成的 HTML 標記，它將類似于以下內容：
- // contents
- // contents
因此，為了讓生活更輕松，請參閱這篇關于如何使用 Spring Boot devtools和自動重啟的文章，
4，結論
在這篇簡短的文章中，我們介紹了如何使用 Spring Boot 作為后端和Vue.js作為前端來設定 Web 應用程式，此配方可以為更強大和可擴展的應用程式奠定基礎，而這只是大多數此類應用程式的起點，
本文由博客群發一文多發等運營工具平臺 OpenWrite 發布
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/556304.html
標籤：其他
上一篇：Python Flask - 快速構建Web應用詳解
下一篇：返回列表