JavaScriptでのSpring MVCモデルオブジェクトへのアクセス

1. 概要

このチュートリアルでは、JavaScriptコードを含むThymeleafビューでSpring MVCオブジェクトにアクセスする方法を示します。 この例ではSpring BootとThymeleafテンプレートエンジンを使用しますが、このアイデアは他のテンプレートエンジンでも機能します。
JavaScriptコードがエンジンによって生成されたWebページの内部または内部にある場合と、ページの外部にある場合（たとえば、個別のJavaScriptファイル内）の2つのケースについて説明します。

2. セットアップ

Thymeleafテンプレートエンジンを使用するSpring Boot Webアプリケーションが既に構成されていると仮定しましょう。 それ以外の場合は、これらのチュートリアルを開始すると便利です。

  • link:/spring-boot-start [シンプルなブートストラップ
    アプリケーション] – Spring Bootアプリケーションをゼロから作成する方法について

  • Spring MVC + Thymeleaf
    3.0：新機能     – Thymeleaf構文の使用方法

    さらに、アプリケーションに、_index.html_という名前のテンプレートからビューをレンダリングするエンドポイント_ / index_に対応するコントローラーがあると仮定します。 このテンプレートには、_script.js_などの埋め込みまたは外部JavaScriptコードが含まれる場合があります。
    私たちの目標は、埋め込みまたは外部JavaScript（JS）コードからSpring MVCパラメーターにアクセスできるようにすることです。

3. パラメータにアクセスする

まず、JSコードから使用するモデル変数を作成する必要があります。
Spring MVCには、これを行うさまざまな方法があります。 _ModelAndView_アプローチを使用してみましょう。
@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}
tutorialhttps：//www.baeldung.com/spring-mvc-model-model-map-model-view [Spring MVCの_Model _、_ ModelMap_、および_ModelView_]のチュートリアルで他の可能性を見つけることができます。

4. 埋め込みJSコード

埋め込みJSコードは、_ <script> _要素内にある_index.html_htmlファイルの一部にすぎません。 そこで、Spring MVC変数を非常に簡単に渡すことができます。
<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
Thymeleafテンプレートエンジンは、すべての式を現在の実行のスコープで使用可能な値に置き換えます。 これは、テンプレートエンジンが上記のコードを次のHTMLコードに変換することを意味します。
<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

5. 外部JSコード

外部のJSコードが、同じ_ <script> _タグを使用して_index.html_ fileに含まれており、_src_属性を指定するとします。
<script src="/js/script.js"></script>
さて、_script.js_のSpring MVCパラメーターを使用する場合、次のようにする必要があります。

  1. 前と同じように、埋め込みJSコードでJS変数を定義します
    セクション

  2. script.js fileからこれらの変数にアクセスします

    *外部JSコードは、埋め込みJSコードの変数の初期化後に呼び出す必要があることに注意してください*。
    これは、JSコード実行の順序を指定する方法、または非同期JSコード実行を使用する方法の2つの方法で実現できます。

5.1. 実行順序を指定する

これを行うには、_index.html_に埋め込まれたJSコードの後に​​外部JSコードを宣言します。
<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

5.2. 非同期コード実行

この場合、_index.html_で外部JSコードと埋め込みJSコードを宣言する順序は重要ではありませんが、_script.js_のコードをページ上にロードされた一般的なラッパーに配置する必要があります。
window.onload = function() {
    // JS code
};
このコードは単純ですが、最も一般的な方法は__jQuery ___insteadを使用することです。 このライブラリを_index.html_ファイルの最初の_ <script> _要素として含めます：
<!DOCTYPE html>
<html>
    <head>
        <script src="/js/jquery.js"></script>
        ...
    </head>
 ...
</html>
これで、次の_jQuery_ラッパー内にJSコードを配置できます。
$(function () {
    // JS code
});
このラッパーを使用すると、ページコンテンツ全体、したがって他のすべての埋め込みJSコードが完全にロードされたときにのみJSコードが実行されることを保証できます。

6. ちょっとした説明

Spring MVCでは、Thymeleafテンプレートエンジンはテンプレートファイル（この例では_index.html_）のみを解析し、それをHTMLファイルに変換します。 このファイルには、テンプレートエンジンの範囲外の他のリソースへの参照が含まれる場合があります。 これらのリソースを解析してHTMLビューをレンダリングするのは、ユーザーのブラウザーです。
そのため、これらのリソースはテンプレートエンジンによって解析されず、コントローラーで定義された変数を埋め込みJSコードにのみ注入して、外部JSコードで使用できるようにすることができます。

7. 結論

このチュートリアルでは、JavaScriptコード内でSpring MVCパラメーターにアクセスする方法を学びました。
いつものように、完全なコード例は、https：//github.com/eugenp/tutorials/tree/master/spring-boot-mvc [GitHubリポジトリ内]です。