Spring Boot学習ノート7:Thymeleafテンプレートエンジンを使用してWebビューをレンダリングする

14060 ワード
Spring 勉強します
Spring Boot学習ノート7:Thymeleafテンプレートエンジンを使用してWebビューをレンダリングする
  • スタティックリソースアクセス
  • デフォルト設定
  • Webページのレンダリング
  • テンプレートエンジン
  • Thymeleaf
  • 簡単な例
  • Thymeleafのデフォルトパラメータ構成
  • GitHub例
    • 静的リソースアクセス
    Webアプリケーションを開発する際には,js,css,ピクチャなどの静的リソースを大量に引用する必要がある.
    デフォルト設定
    Spring Bootのデフォルトでは、静的リソースディレクトリの場所はclasspathの下に配置する必要があります.ディレクトリ名は次のルールに従う必要があります.
  • /static
  • /public
  • /resources
  • /META-INF/resources例:src/main/resourcesstatic/ディレクトリの下にピクチャファイルtest.jpgを配置できます.プログラムを起動したら、http://localhost:8080/test.jpgにアクセスしてみます.画像が表示されたら、構成は成功しました.

    • Webページのレンダリング
    以前の学習ノートでは,@RestControllerでリクエストを処理していたので,返された内容はJSONオブジェクトである.ではhtmlページをレンダリングする必要がある場合、どのように実現しますか?
    テンプレートエンジン
    ダイナミックHTML実装ではSpring Bootは依然として完璧に機能し、多くのテンプレートエンジンのデフォルト構成サポートを提供しているので、推奨されているテンプレートエンジンの下で、ダイナミックWebサイトをすぐに開発することができます.
    Spring Bootでは、デフォルトの構成を提供するテンプレートエンジンには、主に次のものがあります.
  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache

    • Spring Bootは、これらのテンプレートエンジンを使用してJSPを使用しないことをお勧めします.JSPを使用する必要がある場合は、Spring Bootのさまざまな特性を実現することはできません.
    上記のテンプレートエンジンのいずれかを使用すると、デフォルトのテンプレート構成パスはsrc/main/resources/templatesです.もちろん、このパスを変更することもできます.具体的には、後続のテンプレートエンジンの構成プロパティでクエリーして変更することができます.
    Thymeleaf
    ThymeleafはXML/XHTML/HTML 5テンプレートエンジンであり、Webと非Web環境での応用開発に利用できる.Apache License 2.0ライセンスに基づいてDaniel Fernándezによって作成されたオープンソースJavaライブラリです.Java暗号化ライブラリJasyptの著者です.
    ThymeleafはSpring MVCを統合するためのオプションモジュールを提供しています.アプリケーション開発では、JSPやVelocity、FreeMarkerなどの他のテンプレートエンジンの代わりにThymeleafを使用することができます.Thymeleafの主な目的は、ブラウザによって正しく表示され、フォーマットが良好なテンプレートの作成方法を提供することであり、静的モデリングとしても使用することができる.検証済みのXMLとHTMLテンプレートを作成するには、これを使用します.開発者は、論理またはコードの作成に対して、テンプレートにラベル属性を追加するだけです.次に、これらのラベル属性は、DOM(ドキュメントオブジェクトモデル)上で予め定められた論理を実行する.
    フロントエンドサンプルテンプレート:
    <table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Nametd>
      <th th:text="#{msgs.headers.price}">Pricetd>
    tr>
  thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Orangestd>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99td>
    tr>
  tbody>
table>

    Thymeleafは主に属性でhtmlタグに組み込まれていることがわかり、ブラウザはhtmlを解析する際、ない属性をチェックすると無視されるため、Thymeleafのテンプレートはブラウザで直接開くことができ、前後の分離に非常に有利である.
    簡単な例
    簡単な例を挙げて、Thymeleafでページをレンダリングします.
  • Spring BootでThymeleafを使用するには、次の依存を導入する必要があります:
    • <dependency>
	<groupId>org.springframework.bootgroupId>
	<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
  • 新規Controller:
    • @Controller
public class HelloController {

    @RequestMapping("/")
    public String index(ModelMap map) {
    
        //       ，        
        map.addAttribute("msg", "Thymeleaf    ");
        
        // return       ，  src/main/resources/templates/index.html
        return "index";  
    }
}

    テンプレートファイルindex.htmlは、デフォルトのテンプレートパスsrc/main/resources/templatesの下で作成されます.注意IDEA開発${msg}を使用すると、ここでは赤く表示される可能性があります.バックエンドのModelデータに追加されていますが、フロントエンドファイルでは認識できないため、IDEAの現在のバグです.ここではいくつかの処理方法があります:-で -で xmlns:th="http://www.w3.org/1999/xhtml"-で${msg} に -メニューバーでFile=>Settings, Thymeleaf Editor=>Inspections=>ThymeleafでExpression variables validationをチェックアウトし、OKをクリックして します. 
    
<html>
	<head xmlns:th="http://www.w3.org/1999/xhtml">
    	<meta charset="UTF-8" />
    	<title>title>
	head>
	<body>
		<h1 th:text="${msg}">Hello Worldh1>
	body>
html>

    ， html Hello World， ， http://localhost:8080/は、Controller msgを す :Thymeleafサンプルメッセージであり、HTML のコンテンツを しないデータ を している.
    Thymeleafのデフォルトパラメータ
    デフォルト を する がある は、 の するプロパティをapplication.propertiesファイルにコピーし、テンプレートファイルの の 、デフォルトのテンプレートパスの など、 な に します.

    #       
spring.thymeleaf.cache=true 
#              
spring.thymeleaf.check-template=true  
#           
spring.thymeleaf.check-template-location=true 
# Content-Type  
spring.thymeleaf.content-type=text/html 
#   MVC Thymeleaf    
spring.thymeleaf.enabled=true 
#     
spring.thymeleaf.encoding=UTF-8 
#                 ，       
spring.thymeleaf.excluded-view-names= 
#              。  StandardTemplate-ModeHandlers
spring.thymeleaf.mode=HTML5 
#    URL            
spring.thymeleaf.prefix=classpath:/templates/ 
#    URL            
spring.thymeleaf.suffix=.html
# Thymeleaf              。     ，     。   1  ，         TemplateResolver Bean          
spring.thymeleaf.template-resolver-order= 
#           ，      
spring.thymeleaf.view-names=

    GitHubの
    Springboot Study.
    juiでexcelファイルを読み込む
    SGU 306 Balance