Springブートバックエンドを持つVue.jsフロントエンド
1.概要
このチュートリアルでは、Spring Bootをバックエンドとして使用しながら、単一のページをVue.jsフロントエンドでレンダリングするサンプルアプリケーションについて説明します。
Thymeleafを利用して情報をテンプレートに渡すこともできます。
2. Spring Bootのセットアップ
アプリケーション
pom.xml
はリンクを使用します。通常の
spring-boot-starter-thymeleaf
依存関係を使用します。 ％7Cga％7C1％7Ca％3A％22スプリングブートスターターウェブ％22[スプリングブートスターターウェブ]
:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.0.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.0.3.RELEASE</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 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
<!– Include Bootstrap -→
<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準拠のコードを記述して、変換手順を実行する必要がなくなります。 実際のアプリケーションでは、ブラウザ内のBabelを使用するのではなく、WebpackやBabel transpilerなどのツールを使用したビルドプロセスを使用することが多いでしょう。 それでは、ページを保存して__mvn spring-boot __:__ run__コマンドを使って再起動しましょう。更新を確認するためにブラウザを更新します。まだおもしろいことは何もない。 次に、空のdiv要素を設定して、そこにユーザーインターフェイスをアタッチします。 [source,html,gutter:,true]
<div id=”contents”></div>
次に、このページにVueアプリケーションを設定します。 [source,javascript,gutter:,true]
<script type=”text/babel”>
var app = new Vue({
el: ‘#contents’
});
</script>
今何があったの？このコードはページ上にVueアプリケーションを作成します。 CSSセレクター__＃contents__を使用して要素に添付します。 それはページ上の空の__div__要素を参照します。アプリケーションはVue.jsを使用するように設定されました。 ==== 3.2. テンプレート内のデータの表示 次に、Springコントローラーから渡した「__eventName__」属性を示すヘッダーを作成し、Thymeleafの機能を使用してレンダリングします。 [source,html,gutter:,true]
<div class=”lead”>
<strong>Name of Event:</strong>
<span th:text=”${eventName}”></span>
</div>
それでは、単純なJSON配列であるプレーヤデータの配列を保持するために、__data属性をVueアプリケーションにアタッチしましょう。 私たちのVueアプリはこのようになりました: [source,html,gutter:,true]
<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はそれを見つけることができません: [source,javascript,gutter:,true]
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__コンポーネントをレンダリングします。 [source,javascript,gutter:,true]
<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>
ここでのロジックは__v-forと呼ばれるVueディレクティブです。これは__players__ data属性の各プレーヤーをループし、__ <li> __要素内の各__player__エントリに対して__player-card__をレンダリングします。 __v-bind:player__は、__player-card__コンポーネントに__player__というプロパティが与えられ、その値が現在使用中の__player__ループ変数になることを意味します。各__ <li> __要素を一意にするには、__v-bind:key__が必要です。 一般に、__player.id__は既にユニークなので、良い選択です。 このページをリロードすると、__devtools__で生成されたHTMLマークアップを確認すると、これは次のようになります。 [source,html,gutter:,true]
<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の使い方と自動再起動の方法については、https://www.baeldung.com/spring-boot-devtoolsを参照ください。 === 4.まとめ この簡単な記事では、バックエンドにSpring Bootを、フロントエンドに__Vue.js__を使用してWebアプリケーションを設定する方法について説明しました。このレシピは、より強力でスケーラブルなアプリケーションの基礎を形成することができ、これはほとんどのそのようなアプリケーションの単なる出発点です。 いつものように、コードサンプルはhttps://github.com/eugenp/tutorials/tree/master/spring-boot-vue[over on GitHub]にあります。
