SpringBootバックエンドを備えたVue.jsフロントエンド

投稿日: 2019-10-19 2022-11-08
タグ: Spring Boot

1. 概要

このチュートリアルでは、Spring Bootをバックエンドとして使用しながら、Vue.jsフロントエンドで単一ページをレンダリングするサンプルアプリケーションについて説明します。

また、Thymeleafを使用して情報をテンプレートに渡します。

2. スプリングブートセットアップ

アプリケーションpom.xmlは、通常の spring-boot-starter-web とともに、テンプレートレンダリングにspring-boot-starter-thymeleaf依存関係を使用します。

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

Thymeleafはデフォルトでtemplates/でビューテンプレートを検索します。空のindex.htmlをsrc/ main / resources / templates /index.htmlに追加します。次のセクションで内容を更新します。

最後に、SpringBootコントローラーはsrc / main /javaにあります。

@Controller
public class MainController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("eventName", "FIFA 2018");
        return "index";
    }
}

このコントローラーは、model.addAttributeを使用してSpringWebModelオブジェクトを介してビューに渡されたデータを含む単一のテンプレートをレンダリングします。

以下を使用してアプリケーションを実行してみましょう。

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

<!-- 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をロードしますが、必要に応じてホストすることもできます。

トランスパイル手順を実行せずにページにES6準拠のコードを記述できるように、Babelをブラウザーにロードします。

実際のアプリケーションでは、ブラウザー内のBabelを使用する代わりに、WebpackやBabeltranspilerなどのツールを使用してビルドプロセスを使用する可能性があります。

次に、ページを保存し、 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>

次に、’ 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はplayerというデータ属性を認識します。

3.3. Vue.jsコンポーネントを使用したデータのレンダリング

次に、 player-cardという名前のVue.jsコンポーネントを作成して、playerを1つだけレンダリングします。 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、 の各プレーヤーをループしますプレイヤーデータ属性とレンダリングプレイヤーカードそれぞれのためにプレーヤー内部のエントリ

エレメント。

v-bind：player は、player-cardコンポーネントにplayerというプロパティが与えられ、その値がplayerループになることを意味します。現在使用されている変数。 v-bind：key それぞれを作るために必要です

ユニークな要素。

一般に、 player.id はすでに一意であるため、適切な選択です。

このページをリロードすると、 devtools で生成されたHTMLマークアップを確認すると、次のようになります。

<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>

ワークフローの改善に関する注意：コードに変更を加えるたびに、アプリケーションを再起動してブラウザーを更新する必要があると、すぐに面倒になります。

したがって、作業を楽にするために、Spring Boot devtools と自動再起動の使用方法については、この記事を参照してください。

4. 結論

この簡単な記事では、バックエンドにSpring Bootを使用し、フロントエンドにVue.jsを使用してWebアプリケーションをセットアップする方法について説明しました。このレシピは、より強力でスケーラブルなアプリケーションの基礎を形成することができ、これはほとんどのそのようなアプリケーションの出発点にすぎません。

いつものように、コードサンプルはGitHubのにあります。

getdocs

13036