テンプレートエンジンの知識

記事ディレクトリ

1.サーバーレンダリングとクライアントレンダリング

サーバーが動的ページを生成する方法は2つあります服务器渲染。客户端渲染

サーバーレンダリング

特徴：

サーバーは完整的 html 页面

HTML内の動的に変化するデータの一部は、模板引擎動的に「」に置き換えられます

アドバンテージ：

フロントエンドとバックエンドの相互作用の数は少なく、完全なhtmlファイルを1つのHTTP要求/応答で取得できるため、非常に効率的です。

欠点：

フロントエンドとバックエンドのコード无法充分解耦を組み合わせたもの。正式な作業では、この方法はめったに使用されず、フロントエンドとバックエンドの開発者が開発に協力する必要があります。分業は十分に明確ではなく、独立してテストする方法はありません。

クライアント側のレンダリング

特徴：

前后端分离クライアントajaxがサーバーと対話する方法とも呼ばれます

サーバーが返すのは単純なデータであり、ほとんどのデータJSONは次の形式で編成されています。

アドバンテージ：

フロントエンドとバックエンドのコード充分解耦合。フロントエンドおよびバックエンドの開発者は、独自の開発を行い、いくつかのテストツール（バックエンドのPostman、フロントエンドのモックサーバーなど）を使用してコードをテストできます。

欠点：

フロントエンドとバックエンドの相互作用の数が多く、完全なデータを取得するにはajaxの複数のグループが必要です。サーバーレンダリングと比較すると、効率は低くなりますが、その利点があるため、この欠点は大した問題ではありません。。

2.サーバー版の簡単な数字推測ゲーム

2.1テンプレートエンジンなし

サーバーがテンプレートなしで完全なhtmlを返すようにする場合、唯一の方法は、resp.getWriter（）。write（）を介してデータ形式でWebページにhtmlコードを記述し、“text/html;charset=utf-8”必要なデータを渡すことです。字符串拼接メソッドを介して動的に変換されます。

//html 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="guess" method="post"> 
        <input type="text" name="Num">
        <input type="submit" value="猜">
        <div>
            结果：
        </div>
    </form>
</body>
</html>

コアコードは実際にはbodyタグのフォームの一部にすぎませんが、htmlコード全体はまだ比較的大きいです（比較的）

// Servlet 程序
@WebServlet("/guess")
public class GuessNumber extends HttpServlet {
    
    
    private int toGuess = 0;
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        resp.setContentType("text/html;charset=utf8");
        Random random = new Random();
        toGuess = random.nextInt(100)+1;
        System.out.println("toGuess=" + toGuess);
        String html = "<!DOCTYPE html>\n" +
                "<html lang=\"en\">\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
                "    <title>Document</title>\n" +
                "</head>\n" +
                "<body>\n" +
                "    <form action=\"guess\" method=\"post\">\n" +
                "        <input type=\"text\" name=\"Num\">\n" +
                "        <input type=\"submit\" value=\"猜\">\n" +
                "        <div>\n" +
                "            结果：\n" +
                "        </div>\n" +
                "    </form>\n" +
                "</body>\n" +
                "</html>";
        resp.getWriter().write(html);//返回原始猜数字页面
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        resp.setContentType("text/html;charset=utf8");
        int num = Integer.parseInt(req.getParameter("Num"));
        String str = ""; //结果直接拼接在要输出的 html 代码中
        if(num < toGuess) {
    
    
            str = "猜小了";
        }else if (num > toGuess) {
    
    
            str = "猜大了";
        }else {
    
    
            str = "猜对了";
        }
        String html = "<!DOCTYPE html>\n" +
                "<html lang=\"en\">\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
                "    <title>Document</title>\n" +
                "</head>\n" +
                "<body>\n" +
                "    <form action=\"guess\" method=\"post\">\n" +
                "        <input type=\"text\" name=\"Num\">\n" +
                "        <input type=\"submit\" value=\"猜\">\n" +
                "        <div>\n" +
                "            结果：\n" + str +
                "        </div>\n" +
                "    </form>\n" +
                "</body>\n" +
                "</html>";
        resp.getWriter().write(html);
    }
}

テンプレートエンジンがない場合、長いhtmlコードとjavaコードが混在していることは明らかであり、非常に不便に見えます。

2.2テンプレートエンジンアプリケーション（数を推測）

テンプレートエンジンは、その名前が示すように、動的に置き換えられる部分を差し引いて特殊符号プレースホルダーとして使用するテンプレートです。このテンプレートは、サーブレットコードで使用して、置き換えられるコンテンツを置き換えることができます。

に似ている：

ここに画像の説明を挿入

空白のパンダの頭はテンプレートです。これに基づいて、毎回絵文字パッケージを最初から作成する代わりに、パンダの顔とテキストを直接追加して、パンダの頭の絵文字パッケージを完成させることができます。

多くのテンプレートエンジンがありますが、今回使用したのはThymeleaf

第一歩：

プロジェクトを作成すると、ディレクトリ構造などは導入されません。詳細については、リンクを参照してください。

詳細

ステップ2：

依存関係を導入するには、2つの依存関係を導入する必要があります。1つはServlet、もう1つはThymeleaf、中央ウェアハウスでこれら2つのキーワードを検索します。最初は、適切なバージョンを選択し、コードスニペットをにコピーします。pom.xml

<dependencies>
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.15.RELEASE</version>
    </dependency>
</dependencies>

ステップ3：

テンプレートファイルを作成し、数字を推測するために上記のhtmlコードを変更します。具体的には、動的に特別な記号に置き換える必要のある情報を配置します。

<body>
    <form action="guess" method="post">
        <input type="text" name="Num">
        <input type="submit" value="猜">
    </form>
    <div>
        结果：<span th:text="${result}"></span>
    </div>
</body>

ここで動的に置き換える必要があるのは、ここに表示される結果だけです。これth:text="${result}は、テンプレートエンジンで定義された変数と同等です。ここで定義された変数は、result戻ったときにJavaコードで割り当てることができる変数です。動的置換の結果を達成するため。

通常のhtmlコードの場合、th：textのような属性はありません。つまりThymeleaf 扩充的属性、この属性を見ると、置き換える必要のある部分があることがわかります。

変更したテンプレートファイルを特別なディレクトリに置きます

ここに画像の説明を挿入

ステップ4：

サーブレットコードを書く

（1）Thymeleaf 进行初始化初期化コードは固定ルーチンなので、どこに保存し、使用する場合は直接コピー＆ペーストすることをお勧めします。

private TemplateEngine engine = new TemplateEngine();//1

@Override
public void init() throws ServletException {
    
    
    ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());//3
    resolver.setPrefix("/WEB-INF/template/");//4
    resolver.setSuffix(".html");//4
    resolver.setCharacterEncoding("utf-8");
    engine.setTemplateResolver(resolver);//5
}

まずTemplateEngine 对象、テンプレート：テンプレート、エンジン：エンジンのいずれかを作成します。このクラスはThymeleafのコアクラスであり、最終的なページレンダリング作業（置換データ）を完了するために使用されます

サーブレットがロードされると、メソッドが1回呼び出されinit()、Thymeleafの初期化をinit（）メソッドに配置する必要があります。

ServletContextTemplateResolverオブジェクトを作成します。リゾルバー：リゾルバー。このオブジェクトの機能は、ディスクからhtmlテンプレートファイルをロードすることです。次のパラメータgetServletContext()が取得され上下文对象ます。各Webアプリケーションには、現在のWebアプリケーション内のすべてのサーブレットで共有される独自のコンテキストオブジェクト（ServletContext）があります。これに基づいて、複数のサーブレット間でデータを転送できます。

次に、リゾルバーオブジェクトのいくつかのプロパティを設定します。テンプレートファイルと見なされてロードする必要のあるファイルをsetPrefix()指定するには、前者がファイルプレフィックスで、後者がファイルサフィックスです。setSuffix()書き込み方法に注意してください。ロードディレクトリに「/」がないことはありません。setCharacterEncoding()文字セットを設定する

パーサーオブジェクトをTemplateEngineオブジェクト。後でTemplateEngineが特定のレンダリングを実行します。作業するときは、最初に解析したばかりのテンプレートを取得する必要があります。

（2）テンプレートレンダリング固有の操作

private int toGuess = 0; //需要被猜的数据
//处理 GET 请求操作，包含着生成随机数，以及返回猜数字原始页面
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
    resp.setContentType("text/html;charset=utf-8");
    Random random = new Random();
    toGuess = random.nextInt(100)+1;
    System.out.println("toGuess = " + toGuess);
    WebContext webContext = new WebContext(req,resp,getServletContext());
    engine.process("GuessNum",webContext,resp.getWriter());
}
//处理 POST 请求，获取的 body 中的数据和 toGuess 进行比较，将结果替换到模板中 
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
    resp.setContentType("text/html;charset=utf-8");
    int num = Integer.parseInt(req.getParameter("Num"));
    String result = "";
    if(num < toGuess) {
    
    
        result = "猜低了";
    }else if (num > toGuess) {
    
    
        result = "猜高了";
    }else {
    
    
        result = "猜对了";
    }
    WebContext webContext = new WebContext(req,resp,getServletContext());
    webContext.setVariable("result",result);
    //前面的"result"与th:text="${result}"中的要被替换的数据名相对应
    engine.process("GuessNum",webContext, resp.getWriter());
}

WebContextオブジェクトは、レンダリングされるデータを整理するために使用されます。これは、実際にはキーと値のペア構造（ハッシュテーブル）であり、その中の3つのパラメーターを覚えておいてください。

setVariable()メソッドを使用してキーと値のペアをハッシュテーブルに挿入します。各テンプレートに複数のプレースホルダーを含めることができ、このメソッドを使用して複数の変数を設定できます。POSTリクエストの処理では、生成された結果をhtmlに入力する必要があります<span th:text="${result}"></span>。1

engine.process特定のレンダリング作業を実行します。この操作は、特定のテンプレートファイル
をレンダリングされるデータに関連付け、最終結果をrespオブジェクト。最初のパラメーターはhtmlテンプレートのファイル名であり、最後の2つのパラメーターは変更されていません。

結果：

ここに画像の説明を挿入

3.Thymeleafテンプレートの構文

フロントで使用されるテンプレートコマンドはth：textですが、実際には他の用途もあります

注文	特徴
th：text	式の評価結果のテキスト内容をタグ本文に表示します
th：[HTMLタグ属性]	HTMLタグ属性の値を設定します
th：if	式の結果がtrueの場合はコンテンツを表示し、それ以外の場合は表示しない
th：each	要素を反復処理します

ラベルテキストを設定します：th：text

前のhtmlテンプレートの使用法を参照してください

タグ属性を設定します：th：[HTMLタグ属性]

置換する必要のあるリンクがhtmlテンプレートにあります

<a th:href="${url}">百度</a>

サーブレットコード

webContext.setVariable("url", "http://www.baidu.com");

この時点で、ページ上のタグをクリックしてBaiduにジャンプします

条件付き判断：th：if

<div th:if="${!newGame}">
  <div>结果: <span th:text="${result}"></span> </div>
</div>

newGameがfalseの場合、ゲームを再開する必要がなく、結果の値を置き換え続ける必要がないことを意味します

反復：th：each

利用方法：

th:each="自定义的元素变量名称 : ${集合变量名称}"

<div th:each="message:${messages}">
    <span th:text="${message.from}"></span>
    对
    <span th:text="${message.to}"></span>
    说：
    <span th:text="${message.message}"></span>
</div>

メッセージは、置き換える必要のあるオブジェクトです。Collectionsタイプは、Javaコードで渡されて置き換えられ、メッセージはメッセージの各要素にアクセスします。次のth：text = "$ {message.XX}は、メッセージ変数のさまざまな属性に対応しており、これらも置き換える必要があります

終了！