ThymeleafとVuejs V2の統合
Thymeleaf
Thymeleaf は、Spring Boot 互換のテンプレートエンジンです。
サーバー側で動的に変わる部分を、JSP のような拡張タグではなく、HTML の属性値で記述するため、ブラウザでテンプレートを表示しても見た目かわ崩れず、実際の表示に近い形で表示される特徴があります。
Vuejs V2
ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
コンポーネントシステムは Vue.js におけるもうひとつの重要な抽象概念です。
Vue においては、「コンポーネント」は本質的にはあらかじめ定義されたオプションを持つ Vue インスタンスです。
Vue インスタンスのオプション
| オプション | エレメント | 説明 | 例 |
|---|---|---|---|
| 状態 | data | コンポーネントインスタンスの 最初のリアクティブステートを返す関数。 |
例１： data() { return { a: 1 } } 例２： data() { a: 1 } |
| 状態 | methods | コンポーネントインスタンスに 混ぜ合わせるメソッドを宣言します。 |
例： plus() { this.a++ } |
| 状態 | watch | データ変更時に呼び出される ウォッチコールバックを宣言します。 |
例： name(val, oldVal) { console.log(`new: \${val}, old: \${oldVal}`) } |
| レンダリング | template | コンポーネントの文字列テンプレート。 | ー |
| ライフサイクル | beforeCreate | インスタンスが初期化されるときに呼び出されます。 | ー |
| ライフサイクル | created | インスタンスがすべての状態関連オプションの処理を終了した後に呼び出されます。 | ー |
| ライフサイクル | beforeMount | コンポーネントがマウントされる直前に呼び出されます。 | ー |
| ライフサイクル | mounted | コンポーネントがマウントされた後に呼び出されます。 | ー |
| ライフサイクル | beforeUnmount | コンポーネントインスタンスがアンマウントされる直前に呼び出されます。 | ー |
| ライフサイクル | unmounted | コンポーネントがアンマウントされた後に呼び出されます。 | ー |
ライフサイクルダイアグラム
サンプル作成
1. 殻HTMLを作成
「classpath:templetes」の配下に「vueinthymeleaf.html」を作成する。
2. 下記ソースを1で作成されたHTMLに張り付ける。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/common :: meta_header('ホーム',~{::link},~{::script})}">
<link rel="stylesheet" th:href="@{/css/index/index.css}" />
</head>
<body>
<!-- ヘッダの読み込む -->
<div th:replace="~{common/common :: header}"></div>
<!-- メニューの読み込む -->
<div th:replace="~{common/common :: menu}"></div>
<div id="app">
<b-form-input v-model="name" placeholder="Enter your name"></b-form-input>
<div class="mt-2">Value: {{ name }}</div>
</div>
<script>
const vApp = new Vue({
el: "#app",
data: {
name: ""
}
})
</script>
</body>
3. ビュー遷移用コントローラーを作成する。
作成方法は「Thymeleaf + Springboot + Mybatis + MySQL + VSCodeー画面遷移(@Controller)」を参照してください。
4. 動作確認
アプリケーションを起動して、起動方法は「Thymeleaf + Springboot + Mybatis + MySQL + VSCodeー画面遷移(@Controller)」を参照してください。
下記URLをブラウザに入力して、作成した画面を表示される。
URL：http://127.0.0.1:8080/greeting/vueinthymeleaf
画面のテキストボックスに任意な文字列を入力して、確認してください。
5. 画面イベントを実装してみる。
1で作成されたHTMLにの「」の直下に下記ソースを張り付ける。
...
<b-form-input v-model="name" placeholder="Enter your name"></b-form-input>
<b-button @click="setNameWithDateTime">Set the name with current datetime</b-button>
...
JavaScript部分のdata部の直下に下記メソッド部を追記してください。
methods:{
setNameWithDateTime: function() {
this.name = dateFns.format(new Date(), 'YYYY-MM-DD HH:mm:ss', {location: 'ja'})
}
}
6. 動作確認
HTMLの修正で、VSCodeが自動ディプロイなので、アプリケーションを再起動しなくても最新なHTMLを自動適用できる。
4の画面を再読み込みで最新のHTMLを読み込み。
ボタンをクリックして、現時点の日付を自動的にテキストボックスに設定できる。
7. ボタンをクリックして、AxiosでRestful APIを呼び出して、サーバ側のデータを取得して、画面に設定する。
Restful APIを下記のように作成する。
作成方法は「Thymeleaf + Springboot + Mybatis + MySQL + VSCodeーRESTful API(@RestController)」を参照してください。
@GetMapping(value="/getSystemDate")
public String getSystemDate() {
return "From Restful API: " + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(Calendar.getInstance().getTime());
}
5で追加されたJavaScriptメソッド部のメソッド「setNameWithDateTime」の中身を下記のように修正する。
setNameWithDateTime: function() {
axios.get('/api/getSystemDate').then((res) => {this.name = res.data});
}
8. 動作確認
4の画面を再読み込みで最新のHTMLを読み込み。ボタンをクリックして、確認してみよう。
まとめ
以上は、VuejsのCDN使い方の説明です。
本章に、ThymeleafにのVueの使い方、ボタンでVueのdata部更新する方法とaxiosでのRestful API呼び出しを実装しました。