Vue.js Frontend with a Spring Boot Backend
1. 概要
このチュートリアルでは、Spring Bootをバックエンドとして使用しながら、Vue.jsフロントエンドで単一ページをレンダリングするサンプルアプリケーションについて説明します。
また、Thymeleafを利用して情報をテンプレートに渡します。
2. スプリングブートセットアップ
アプリケーションpom.xmlは、通常のspring-boot-starter-webとともに、テンプレートレンダリングにspring-boot-starter-thymeleaf依存関係を使用します。
org.springframework.boot
spring-boot-starter-web
2.0.3.RELEASE
org.springframework.boot
spring-boot-starter-thymeleaf
2.0.3.RELEASE
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 WebModelオブジェクトを介してビューに渡されたデータを含む単一のテンプレートをレンダリングします。
以下を使用してアプリケーションを実行しましょう。
mvn spring-boot:runhttp://localhost:8080を参照して、インデックスページを表示します。 もちろん、この時点では空になります。
私たちの目標は、ページに次のようなものを印刷させることです。
Name of Event: FIFA 2018
Lionel Messi
Argentina's superstar
Christiano Ronaldo
Portugal top-ranked player3. Vue.Jsコンポーネントを使用したデータのレンダリング
3.1. テンプレートの基本設定
テンプレートで、Vue.jsとBootstrap（オプション）をロードして、ユーザーインターフェイスをレンダリングしましょう。
// in head tag
// other markup
// at end of body tag
ここでは、CDNからVue.jsを読み込みますが、必要に応じてホストすることもできます。
Babelでブラウザーをロードして、トランスピレーション手順を実行せずにページにES6準拠のコードを記述できるようにします。
実際のアプリケーションでは、ブラウザ内のBabelを使用する代わりに、WebpackやBabeltranspilerなどのツールを使用してビルドプロセスを使用する可能性があります。
それでは、ページを保存して、mvn spring-boot：_run_コマンドを使用して再起動しましょう。 ブラウザを更新して更新を確認します。まだ何も面白くない。
次に、ユーザーインターフェースをアタッチする空のdiv要素を設定しましょう。
次に、ページでVueアプリケーションを設定します。
今何があったの？ このコードは、ページにVueアプリケーションを作成します。 CSSセレクター#contentsで要素にアタッチします。
これは、ページ上の空のdiv要素を指します。 これで、Vue.jsを使用するようにアプリケーションが設定されました！
3.2. テンプレートでのデータの表示
次に、Springコントローラーから渡した ‘eventName‘属性を示すヘッダーを作成し、Thymeleafの機能を使用してレンダリングします。
Name of Event:
次に、「data'」属性をVueアプリケーションにアタッチして、単純なJSON配列であるプレーヤーデータの配列を保持しましょう。
Vueアプリは次のようになります。
これで、Vue.jsはplayersというデータ属性を認識します。
3.3. Vue.jsコンポーネントを使用したデータのレンダリング
次に、playerを1つだけレンダリングするplayer-cardという名前のVue.jsコンポーネントを作成しましょう。 Remember to register this component before creating the Vue app.
そうしないと、Vueはそれを見つけられません。
Vue.component('player-card', {
props: ['player'],
template: `
{{ player.name }}
{{ player.description }}
`
});最後に、アプリオブジェクト内のプレーヤーのセットをループして、各プレーヤーのplayer-cardコンポーネントをレンダリングしましょう。
-
ここでのロジックは、v-for,と呼ばれるVueディレクティブです。これは、playersデータ属性の各プレーヤーをループし、<li>内の各playerエントリに対してplayer-cardをレンダリングします。 s要素。
v-bind:playerは、player-cardコンポーネントにplayerというプロパティが与えられ、その値が現在処理されているplayerループ変数になることを意味します。 各<li>要素を一意にするには、v-bind:keyが必要です。
一般に、player.idはすでに一意であるため、適切な選択です。
ここで、このページをリロードすると、devtoolsで生成されたHTMLマークアップを観察すると、次のようになります。
-
// contents
-
// contents
ワークフローの改善に関する注意：コードに変更を加えるたびに、アプリケーションを再起動してブラウザを更新する必要があると、すぐに面倒になります。
したがって、作業を楽にするために、Spring Bootdevtoolsと自動再起動の使用方法についてはthis articleを参照してください。
4. 結論
この簡単な記事では、バックエンドにSpring Bootを使用し、フロントエンドにVue.jsを使用してWebアプリケーションをセットアップする方法について説明しました。 このレシピは、より強力でスケーラブルなアプリケーションの基礎を形成できます。これは、このようなアプリケーションのほとんどの出発点にすぎません。
いつものように、コードサンプルはover on GitHubで見つけることができます。