テンプレートエンジンThymeleafのSpringBoot2戦闘訓練のデモ

ステップ1：春ブートプロジェクトを作成し、Thymeleafをチェック

ステップ2：JavaBeansを作成し、それを引数なしでパラメータとコンストラクタが含まれています

パブリッククラス人{ 

    プライベート文字列名; 
    プライベート整数歳。

    公共の人（）{ 
        スーパー（）; 
    } 

    公共パーソン（文字列名、整数歳）{ 
        スーパー（）; 
        this.nameは名称。
        this.ageは年齢を=。
    } 

    パブリック文字列のgetName（）{ 
        戻り名。
    } 

    公共ボイドのsetName（文字列名）{ 
        this.name =名。
    } 

    パブリック整数getAge（）{ 
        戻り年齢; 
    } 

    公共ボイドsetAge（整数年齢）{ 
        this.age =年齢。
    } 
}

ステップ3：スクリプトファイルとスタイル静的なプレゼンテーションページのindex.htmlを作成します。

<HTMLのxmlns：目= "http://www.thymeleaf.org"> 
<HEAD> 
    <メタコンテンツ= "text / htmlの;のcharset = UTF-8" /> 
    <メタHTTP-当量= "X-UA-の互換性"コンテンツ=" IE =縁"/> 
    <メタ名="ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1"/> 
    <リンク番目：HREF =" @ {ブートストラップ/ CSS / bootstrap.min .css}」REL = "スタイルシート" /> 
    <リンク番目：HREF = "@ {ブートストラップ/ CSS /ブートストラップtheme.min.css}" REL = "スタイルシート" /> 
    <タイトル>测试页</タイトル> 
< / HEAD> 
<BODY> 

<DIV CLASS = "パネルパネルの主"> 
    <DIV CLASS = "パネルの見出し"> 
        <h3のクラス=」パネル・タイトル"> 
            访问モデル
        </ H3> 
    </ div> 
    <divのクラス="パネル・ボディ」>
            <スパン目：テキスト= "$ {singlePerson.name}">$ {person.age} "> </ span>を
                    <ボタンクラス=" BTN」番目：onclickの= "のgetName（[[$ {person.name}]]）;">获得名字</ボタン>
            </ span>を
    </ div> 
</ div> 
<divの目：= "$ {ない＃lists.isEmpty（人）}"の場合> 
    <DIV CLASS = "パネルパネルの主"> 
        <DIV CLASS = "パネル-見出し"> 
            <h3のクラス="パネル・タイトル">列表</ H3> 
        </ div> 
        <divのクラス="パネル体"> 
            <ulのクラス="リスト・グループ"> 
                <LIクラス="リストグループ-item "目：各= "人：$ {人}"> 
                    <スパン目：テキスト= "$ {person.getName（）}"> </ span>の
                    <スパン目：テキスト=" $ {} person.age 「> </ span>をボタンクラス= "BTN"番目：のonclick = " 'のjavascript：のgetName（\' '+ $ {person.name} + '\'）;'">获得名字</ボタン> - > 
                </ LI> 
            </ UL>

<！ - <ボタンクラス=番目の"BTN"：onclickの= " 'ジャバスクリプト：のgetName（\' '+ $ {person.name} + '\'）;'">>获得名字</ボタン- >
        </ div> 
    </ div> 

</ div> 

<スクリプト番目：SRC = "@ {jquery.min.js}"タイプ= "テキスト/ javascriptの"> </ SCRIPT> 
<スクリプト番目：SRC = "@ {ブートストラップ/js/bootstrap.min.js} "> </ SCRIPT> 
<SCRIPT番目：インライン=" javascriptの"> 
    VAR単一= [[$ {singlePerson}]]。
    console.log（single.name + "/" + single.age）。

    関数のgetName（名）{ 
        にconsole.log（名）; 
    } 
 </ SCRIPT> 

</ body> 
</ HTML>

ステップ4：データの準備：

輸入org.springframework.boot.SpringApplication。
輸入org.springframework.boot.autoconfigure.SpringBootApplication。
輸入org.springframework.stereotype.Controller; 
輸入org.springframework.ui.Model; 
輸入org.springframework.web.bind.annotation.RequestMapping。

輸入はjava.util.ArrayList; 
輸入はjava.util.List; 

@Controller 
@SpringBootApplication 
パブリッククラスDemoThymeleafApplication { 

    @RequestMapping（ "/"）
    パブリック文字列インデックス（モデルモデル）{ 
        人単一=新しい人物（ "大王"、11）; 
        一覧<人>人=新しいのArrayList <人>（）; 
        人p1は=新しい人（ "张三"、22）; 
        人物P2 =新しい人（」
        人物P3 =新しい人（」
        people.add（P1）。
        people.add（P2）。
        people.add（P3）。

        model.addAttribute（ "singlePerson"、シングル）。
        model.addAttribute（ "人"、人）。

        「インデックス」を返します。
    } 

    パブリック静的無効メイン（文字列[] args）{ 
        SpringApplication.run（DemoThymeleafApplication.class、引数）。
    } 

}

ステップ5：業績あなたは「名前を取得」ボタンをクリックすると、コンソールには、取得した名称が表示されます

ステップ6：SpringBoot2と違いSpringBoot1.5：

ページ別の言い回しで、ボタンのOnClickイベントのパラメータを使用した場合

SpringBoot2バージョン：< ボタンクラス= "BTN" TH ：onclickの= "のgetName（[[$ {PERSON.NAME}]]）;" > 名前を取得するには、</ ボタン>

SpringBoot1.5バージョン：

< ボタンクラス"BTN" = 目：のonclick = " 'のjavascript：のgetName（\' '+ $ {person.name} + '\'）;'" > 获得名字</ ボタン>

テンプレートエンジンThymeleafのSpringBoot2戦闘訓練のデモ

おすすめ