Google App Engine Java スタンダード環境 の Spring BootでVue.jsを利用する

Spring Boot を Google App Engine Java スタンダード環境で動作するようにしてテンプレートエンジンThymelear を適用した ので、テンプレートで生成したHTMLから、Vue.js を使えるようにする。

公式ページの無料動画をさらっと見る。うん。わかりやすい。

https://jp.vuejs.org/v2/guide/

無料動画

1.Chromeに開発ツールを入れる

Chrome Web Store を検索して表示、して、Vue.js を検索、Vue.js devtool をインストール

gae_vue_js01

設定から、ファイルへのURLへのアクセスを許可するをONにする。

gae_vue_js02


2.静的コンテンツとして Javascriptファイルを置く

Spring Boot で静的ファイルをホストするパスを調べる。

静的コンテンツ

https://docs.spring.io/spring-boot/docs/2.1.4.RELEASE/reference/htmlsingle/

https://docs.spring.io/spring-boot/docs/2.1.4.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

/src/main/resource/static でよさそう。

gae_vue_js03

ここに、以下の内容の、Javascript ファイルを置く

var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
})

3.テンプレートの編集

ThymeThymeleaf で作成したテンプレートを編集

  • </body> の前で、上記で静的ファイルとして置いたJavascriptを読み込む
  • Vue.jsの開発用スクリプトを読み込む(https://jp.vuejs.org/v2/guide/ 参照)
  • div の id="app" により、上記で記述した Javascript の el:="#app" と紐づけ
  • data: で指定した、message と {{message}} がリアクティブにバインディングされる

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script src="/js/favphrase.js"></script>
</body>
</html>

4.実行

想定通り表示された。

gae_vue_js04

Chrome の開発コンソールから、app オブジェクトを変更すると、即座に画面のメッセージ領域が変更される。

gae_vue_js05