ThymeleafとVuejs V2の統合

Thymeleaf

　Thymeleaf は、Spring Boot 互換のテンプレートエンジンです。
　サーバー側で動的に変わる部分を、JSP のような拡張タグではなく、HTML の属性値で記述するため、ブラウザでテンプレートを表示しても見た目かわ崩れず、実際の表示に近い形で表示される特徴があります。

Vuejs V2

　ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
　コンポーネントシステムは Vue.js におけるもうひとつの重要な抽象概念です。
　Vue においては、「コンポーネント」は本質的にはあらかじめ定義されたオプションを持つ 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に張り付ける。

vueinthymeleaf.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にの「」の直下に下記ソースを張り付ける。

追加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)」を参照してください。

Restful API

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

                setNameWithDateTime: function() {
                    axios.get('/api/getSystemDate').then((res) => {this.name = res.data});
                }

8. 動作確認
　4の画面を再読み込みで最新のHTMLを読み込み。ボタンをクリックして、確認してみよう。

まとめ

　以上は、VuejsのCDN使い方の説明です。
　本章に、ThymeleafにのVueの使い方、ボタンでVueのdata部更新する方法とaxiosでのRestful API呼び出しを実装しました。