胸腺導入
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
デフォルトでは、次のデフォルト設定作業が行われます。デフォルト設定に慣れれば、開発プロセス中の問題をより適切に解決できます。