SpringMVC+Thymeleaf3.0:新機能
1. 序章
Thymeleaf は、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、この記事をご覧ください。
この記事では、Thymeleafアプリケーションを使用したSpringMVCでのThymeleaf3.0の新機能について説明します。 バージョン3には、新機能と多くの内部的な改善が含まれています。 具体的には、自然処理とJavascriptのインライン化のトピックについて説明します。
Thymeleaf 3.0には、 TEXT 、 JAVASCRIPT 、 CSS の3つの新しいテキストテンプレートモードが含まれています。これらは、それぞれプレーン、JavaScript、CSSテンプレートの処理に使用されます。 。
2. Mavenの依存関係
まず、ThymeleafをSpringと統合するために必要な構成を見てみましょう。 thymeleaf-spring ライブラリは、依存関係に必要です。
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
Spring 4プロジェクトの場合、thymeleaf-spring5の代わりにthymeleaf-spring4ライブラリを使用する必要があることに注意してください。 依存関係の最新バージョンはここにあります。
3. JavaThymeleaf構成
まず、新しいテンプレートエンジン、ビュー、およびテンプレートリゾルバーを構成する必要があります。 そのためには、作成されたJava構成クラスを更新する必要があります。
そのためには、ここで作成されたJava構成クラスを更新する必要があります。 新しいタイプのリゾルバーに加えて、テンプレートはSpringインターフェイスApplicationContextAwareを実装しています。
@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {
private ApplicationContext applicationContext;
// Java setter
@Bean
public ViewResolver htmlViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
resolver.setContentType("text/html");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.html"));
return resolver;
}
@Bean
public ViewResolver javascriptViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
resolver.setContentType("application/javascript");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.js"));
return resolver;
}
@Bean
public ViewResolver plainViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
resolver.setContentType("text/plain");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.txt"));
return resolver;
}
}
上記のように、3つの異なるビューリゾルバーを作成しました。1つはHTMLビュー用、1つはJavascriptファイル用、もう1つはプレーンテキストファイル用です。 Thymeleafは、ファイル名拡張子( .html 、 .js 、 .txt )をそれぞれチェックすることで、それらを区別します。
また、ビュー名を使用して必要な String []配列を作成するメソッドarray()を使用するために、静的ArrayUtilクラスを作成しました。
このクラスの次の部分では、テンプレートエンジンを構成する必要があります。
private ISpringTemplateEngine templateEngine(ITemplateResolver templateResolver) {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
return engine;
}
最後に、3つの個別のテンプレートリゾルバーを作成する必要があります。
private ITemplateResolver htmlTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/views/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
private ITemplateResolver javascriptTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/js/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
return resolver;
}
private ITemplateResolver plainTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/txt/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.TEXT);
return resolver;
}
テストには、キャッシュされていないテンプレートを使用することをお勧めします。そのため、 setCacheable(false)メソッドを使用することをお勧めします。
Javascriptテンプレートは/WEB-INF / js / フォルダーに保存され、プレーンテキストファイルは / WEB-INF / txt / フォルダーに保存され、最後にHTMLファイルへのパスはになります。 / WEB-INF /html。
4. スプリングコントローラーの構成
新しい構成をテストするために、次のSpringコントローラーを作成しました。
@Controller
public class InliningController {
@RequestMapping(value = "/html", method = RequestMethod.GET)
public String getExampleHTML(Model model) {
model.addAttribute("title", "Baeldung");
model.addAttribute("description", "<strong>Thymeleaf</strong> tutorial");
return "inliningExample.html";
}
@RequestMapping(value = "/js", method = RequestMethod.GET)
public String getExampleJS(Model model) {
model.addAttribute("students", StudentUtils.buildStudents());
return "studentCheck.js";
}
@RequestMapping(value = "/plain", method = RequestMethod.GET)
public String getExamplePlain(Model model) {
model.addAttribute("username", SecurityContextHolder.getContext()
.getAuthentication().getName());
model.addAttribute("students", StudentUtils.buildStudents());
return "studentsList.txt";
}
}
HTMLファイルの例では、HTMLタグをエスケープする場合としない場合で、新しいインライン化機能を使用する方法を示します。
JSの例では、学生情報を含むjsファイルをロードするAJAXリクエストを生成します。 このarticleのStudentUtilsクラス内で単純なbuildStudents()メソッドを使用していることに注意してください。
最後に、プレーンテキストの例では、学生情報をテキストファイルとして表示します。 プレーンテキストテンプレートモードを使用する典型的な例は、プレーンテキストの電子メールを送信するために使用できます。
追加機能として、 SecurityContextHolder を使用して、ログに記録されたユーザー名を取得します。
5. Html / Js/Textサンプルファイル
このチュートリアルの最後の部分は、3つの異なるタイプのファイルを作成し、新しいThymeleaf機能の使用法をテストすることです。 HTMLファイルから始めましょう:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Inlining example</title>
</head>
<body>
<p>Title of tutorial: [[${title}]]</p>
<p>Description: [(${description})]</p>
</body>
</html>
このファイルでは、2つの異なるアプローチを使用しています。 タイトルを表示するために、エスケープされた構文を使用します。これにより、すべてのHTMLタグが削除され、テキストのみが表示されます。 説明の場合、HTMLタグを保持するために、エスケープされていない構文を使用します。 最終結果は次のようになります。
<p>Title of tutorial: Baeldung</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>
もちろん、これは、Thymeleafという単語を太字で表示することにより、ブラウザによって解析されます。
次に、jsテンプレート機能のテストに進みます。
var count = [[${students.size()}]];
alert("Number of students in group: " + count);
JAVASCRIPTテンプレートモードの属性はJavaScriptでエスケープされません。 その結果、jsアラートが作成されます。 このアラートは、jQuery AJAXを使用して、listStudents.htmlファイルにロードされます。
<script>
$(document).ready(function() {
$.ajax({
url : "/spring-thymeleaf/js",
});
});
</script>
テストしたい最後の機能は、プレーンテキストファイルの生成です。 次の内容のstudentsList.txtファイルを作成しました。
Dear [(${username})],
This is the list of our students:
[# th:each="s : ${students}"]
- [(${s.name})]. ID: [(${s.id})]
[/]
Thanks,
The Baeldung University
マークアップテンプレートモードと同様に、標準方言には1つの処理可能な要素( [#…])と一連の処理可能な属性( th:text、th:utext、th: if、th:unless、th:each など)。 結果はテキストファイルになります。これは、セクション3の最後で説明したように、たとえば電子メールで使用できます。
テスト方法は?最初にブラウザーで遊んでから、既存のJUnitテストも確認することをお勧めします。
6. Spring BootのThymeleaf
Spring Boot は、 spring-boot-starter-thymeleaf 依存関係を追加することにより、Thymeleafの自動構成を提供します。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.3.3.RELEASE</version>
</dependency>
明示的な構成は必要ありません。 デフォルトでは、HTMLファイルはリソース/テンプレートの場所に配置する必要があります。
7. 結論
この記事では、バージョン3.0に焦点を当てて、Thymeleafフレームワークに実装された新機能について説明しました。
このチュートリアルの完全な実装は、 GitHubプロジェクトにあります。これはEclipseベースのプロジェクトであり、最新のすべてのインターネットブラウザーで簡単にテストできます。
最後に、プロジェクトをバージョン2からこの最新バージョンに移行することを計画している場合は、こちらの移行ガイドを参照してください。 また、既存のThymeleafテンプレートはThymeleaf3.0とほぼ100% c互換性があるため、構成を少し変更するだけで済みます。