知識庫 / Spring / Spring Boot RSS 訂閱

1. 概述

在本教程中，我們將介紹一個示例應用程序，該應用程序使用 Vue.js 前端渲染一個單頁應用，同時使用 Spring Boot 作為後端。

我們還將使用 Thymeleaf 將信息傳遞到模板中。

2. Spring Boot 部署

該應用程序使用 <em >pom.xml</em > 文件，其中包含 <a href="https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf"><em >spring-boot-starter-thymeleaf</em></a > 依賴項，用於模板渲染，以及常規的 <a href="https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web">spring-boot-starter-web</a >：

<dependency> 
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId> 
    <version>3.1.5</version>
</dependency> 
<dependency> 
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId> 
    <version>3.1.5</version>
</dependency>

Thymeleaf 默認情況下會查找視圖模板在 templates/ 目錄下，我們將添加一個空的 index.html 文件到 src/main/resources/templates/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 模型對象傳遞的數據渲染到視圖中。

讓我們使用以下命令運行應用程序：

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 組件渲染數據

This section explains how to render data using a Vue.js component. Vue.js components are the building blocks of Vue.js applications. They encapsulate data, logic, and presentation, allowing you to create reusable and maintainable UI elements.

Here's a basic example of a Vue.js component that renders a list of items:

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.description }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'My Items',
        items: [
          { id: 1, name: 'Item 1', description: 'This is the first item.' },
          { id: 2, name: 'Item 2', description: 'This is the second item.' },
          { id: 3, name: 'Item 3', description: 'This is the third item.' }
        ]
      }
    }
  }
</script>

In this example:

• The template section defines the HTML structure of the component.
• The v-for directive iterates over the items array and renders a list item for each item.
• The :key attribute is used to provide a unique identifier for each list item, which is important for Vue.js's efficient rendering.
• The data function defines the component's data, which is used to populate the template.

3.1. 模板基本設置

在模板中，讓我們加載 Vue.js 和 Bootstrap（可選）以渲染用户界面：

// in head tag

<!-- Include Bootstrap -->

//  other markup

// at end of body tag
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/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 元素，我們將向其中添加用户界面：

<div id="contents"></div>

接下來，我們在頁面上設置了一個 Vue 應用：

<script type="text/babel">
    var app = new Vue({
        el: '#contents'
    });
</script>

剛才發生了什麼？這段代碼會在頁面上創建一個 Vue 應用。它通過 CSS 選擇器 #contents 附加到該元素。

它指的是頁面上的一個空 div 元素。應用程序現在已配置為使用 Vue.js!

3.2. 在模板中顯示數據

接下來，讓我們創建一個標題，顯示從 Spring 控制器傳遞的 ‘eventName’ 屬性，並使用 Thymeleaf 的功能進行渲染：

<div class="lead">
    <strong>Name of Event:</strong>
    <span th:text="${eventName}"></span>
</div>

現在我們為 Vue 應用添加一個 ‘data’ 屬性，用於存儲我們的玩家數據數組，這是一個簡單的 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 組件，該組件渲染一個 player 對象。 請記住在創建 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>`
});

最後，我們遍歷應用程序對象中的玩家集合，為每個玩家渲染一個 player-card 組件：

<ul>
    <li style="list-style-type:none" v-for="player in players">
        <player-card
          v-bind:player="player" 
          v-bind:key="player.id">
        </player-card>
    </li>
</ul>

這裏的邏輯是 Vue 指令 v-for, 它會循環遍歷 players 數據屬性中的每個玩家，並在每個 player 條目內部的

<ul>
    <li style="list-style-type: none;">
        <div class="card">
            // contents
        </div>
    </li>
    <li style="list-style-type: none;">
        <div class="card">
            // contents
        </div>
    </li>
</ul>