Spring Boot Thymeleafの概要

胸腺導入

Thymeleafこれは最新のサーバー側JavaテンプレートエンジンでありThymeleaf他のテンプレートとは異なり、構文はHTMLに近く、高度なスケーラビリティを備えています。詳しくは公式サイトをご覧ください

特徴

  • htmlプロトタイプをサポートしているため、ネットワークなしの環境での実行をサポートし、htmlタグに追加の属性を追加して、テンプレート+データ表示モードを実現します。ブラウザーは、htmlの解釈時に未定義のタグ属性を無視するため、thymeleafテンプレートを静的に実行できます。データがページに返されると、Thymeleafタグが静的コンテンツを動的に置き換えて、ページが動的に表示されるようにします。そのため、フロントエンドの女性がブラウザでページの静的な効果を表示し、プログラマの兄弟がサーバー上のデータで動的なページの効果を表示できます。
  • Springすぐに使える、方言提供するために、テンプレートを直接適用してJSTL、 OGNL表現効果を実現でき、テンプレートの適用によるJSTL、 OGNLタグの毎日変更の問題を回避できます同時に、開発者はカスタムの方言を拡張できます。
  • SpringBoot公式の推奨テンプレートは、オプションの統合モジュール(spring-boot-starter-thymeleaf)を提供します。これにより、フォームバインディング、属性エディター、国際化などの機能をすばやく実装できます。

使用する

まず  pom.xml 、thymeleaf テンプレートに依存関係を追加  します

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

次にThymeleafController 、HTTPリクエストをページにマッピングする  ジャンプを作成します。2つの方法を以下に示します。1つ目はより直感的でエレガントです。2つ目は比較的一般的でコードが少なくstruts2、ピットからジャンプする友達に対応します...

  • Spring 4.3以降の@RequestMapping(メソッド= RequestMethod.XXX)の記述を簡略化するために、レイヤーにラップされました。これは、現在GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMappingです。
@Controller
@RequestMapping
public class ThymeleafController {

    @GetMapping("/index")
    public ModelAndView index() {
        ModelAndView view = new ModelAndView();
        // 设置跳转的视图 默认映射到 src/main/resources/templates/{viewName}.html
        view.setViewName("index");
        // 设置属性
        view.addObject("title", "我的第一个WEB页面");
        view.addObject("desc", "欢迎进入battcn-web 系统");
        Author author = new Author();
        author.setAge(22);
        author.setEmail("[email protected]");
        author.setName("唐亚峰");
        view.addObject("author", author);
        return view;
    }

    @GetMapping("/index1")
    public String index1(HttpServletRequest request) {
        // TODO 与上面的写法不同,但是结果一致。
        // 设置属性
        request.setAttribute("title", "我的第一个WEB页面");
        request.setAttribute("desc", "欢迎进入battcn-web 系统");
        Author author = new Author();
        author.setAge(22);
        author.setEmail("[email protected]");
        author.setName("唐亚峰");
        request.setAttribute("author", author);
        // 返回的 index 默认映射到 src/main/resources/templates/xxxx.html
        return "index";
    }

    class Author {
        private int age;
        private String name;
        private String email;
		// 省略 get set
    }
}

最後に、  src/main/resources/templates ディレクトリindex.html で名前が付けられたテンプレートファイルを作成し  ます。thymeleaf ラベルに属性を追加すると、データが動的にバインドされている  ことがわかります 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 可以看到 thymeleaf 是通过在标签里添加额外属性来绑定动态数据的 -->
    <title th:text="${title}">Title</title>
    <!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->
    <script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
    <h1 th:text="${desc}">Hello World</h1>
    <h2>=====作者信息=====</h2>
        <p th:text="${author?.name}"></p>
        <p th:text="${author?.age}"></p>
        <p th:text="${author?.email}"></p>
</body>
</html>

静的効果

ダブルクリックして開くと  index.html 、次の静的効果を確認できます。他のテンプレートのように一連のタグのコンテンツは表示されませんが、静的ページは通常どおりレンダリングされます

静的効果

動的効果

ブラウザーに入力:http:// localhost:8080 / index  レンダリング後の効果、実際の動的分離を確認できます

動的効果

ヒント

  • テンプレートのホットデプロイメント

で   テンプレートIntelliJ IDEA を使用し  thymeleafているときに、静的ページを変更するたびに再起動する必要があることがわかりました。これは非常に不便です。Baiduは、これがデフォルト設定のゴーストであることがわかりました。応答速度を向上させるために、テンプレートはデフォルトでキャッシュされます。そうならば、開発にしてくださいspring.thymeleaf.cacheプロパティをfalseに設定されていますリロードする静的コンテンツ変更するたびにCtrl + Shift + F9を押してください...

  • デフォルトのfavicon.ico アイコンを変更する

デフォルトでは、使用はspringboot、我々はあなた自身のICOの原因を構成する必要はありませんので、必ず葉を参照してください、それは、解決策は、のみする必要が非常に簡単であるsrc/main/static/というディレクトリの下に置かれfavicon.ico、その上に

デフォルトの構成

SpringBoot デフォルトでは、次のデフォルト設定作業が行われます。デフォルト設定に慣れれば、開発プロセス中の問題をより適切に解決できます。

SpringBoot为thymeleaf模æ¿æä¾çé»è®¤é置项 

公開された203のオリジナル記事 賞賛6 訪問4481

おすすめ

転載: blog.csdn.net/weixin_42073629/article/details/105545655