第6章渲染Web视图----Thymeleaf --笔记3

来源：互联网发布：大久保利通知乎编辑：程序博客网时间：2024/06/04 19:58

概述：

使用Thymeleaf,它与jsp最大不同就是它不依赖与servlet容器

1.配置Thymeleaf 视图解析器

主要配置三个Bean

ThymeleafViewResolver : 将逻辑视图名称解析为Thymeleaf模板视图
SpringTemplateEngine: 处理模板并渲染结果
TemplateResolver: 加载Thymeleaf模板

引入jar包

<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>2.1.5.RELEASE</version>
</dependency>

<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>2.1.5.RELEASE</version>
</dependency>

最新版本thymeleaf 不存在 TemplateResolver.java ，没有仔细研究被那个类替代了

然后在引入三个bean

package com.jack.config;import org.springframework.context.MessageSource;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.ComponentScan;import org.springframework.context.annotation.ComponentScan.Filter;import org.springframework.context.annotation.Configuration;import org.springframework.context.annotation.FilterType;import org.springframework.context.support.ReloadableResourceBundleMessageSource;import org.springframework.web.servlet.ViewResolver;import org.springframework.web.servlet.config.annotation.EnableWebMvc;import org.thymeleaf.TemplateEngine;import org.thymeleaf.spring4.SpringTemplateEngine;import org.thymeleaf.spring4.view.ThymeleafViewResolver;import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import org.thymeleaf.templateresolver.TemplateResolver;@Configuration@ComponentScan(basePackages={"com.jack"},excludeFilters={@Filter(type=FilterType.ANNOTATION, value=EnableWebMvc.class)})public class RootConfig {@Beanpublic TemplateEngine templateEngine(TemplateResolver templateResolver){SpringTemplateEngine templateEngine = new SpringTemplateEngine();templateEngine.setTemplateResolver(templateResolver);return templateEngine;}@Beanpublic ViewResolver viewResolver(SpringTemplateEngine templateEngine) {ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();viewResolver.setTemplateEngine(templateEngine);return viewResolver;}@Beanpublic TemplateResolver templateResolver(){TemplateResolver templateResolver = new ServletContextTemplateResolver();templateResolver.setPrefix("/WEB-INF/template/");templateResolver.setSuffix(".html");templateResolver.setTemplateMode("HTML5");return templateResolver;}}

总结：其实它通过引擎类去获取文件进行渲染SpringTemplateEngine 同时注意方法位置templateEngine方法要放置在viewResolver方法之前，不然会报错

这里还有注意一点就是要注释JSP渲染的bean，不然会冲突

/*@Beanpublic ViewResolver viewResolver(){InternalResourceViewResolver resolver = new InternalResourceViewResolver();resolver.setPrefix("/WEB-INF/views/");resolver.setSuffix(".jsp");resolver.setExposeContextBeansAsAttributes(true);resolver.setViewClass(org.springframework.web.servlet.view.JstlView.class);return resolver;}*/

定义Thymeleaf模板以home.jsp 改为 home.html

注意文件的结构

home.html 内容：

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <!-- 声明Thymeleaf命名空间 --><head><title>Spittr</title><link rel="stylesheet" type="text/css" th:href="@{/resource/style.css}"></link></head><body><h1>Welcome to Spittr</h1><a th:href="@{/spittles}">Spittles</a>|<a th:href="@{/spitter/register}">Register</a></body></html>

总结：它类似Spring通过命名空间来增加功能，xmlns:th="http://www.thymeleaf.org"

如果有乱码问题，可以参考

http://blog.csdn.net/m0_37355951/article/details/73742140

表单处理：

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <!-- 声明Thymeleaf命名空间 --><head><title>Spittr</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <link rel="stylesheet" type="text/css" th:href="@{/resource/style.css}"></link></head><body><h1>注册</h1><form method="POST" th:object="${spitter}"  ><div class="errors" th:if="${#fields.hasErrors('*')}"><ul><li th:each="err : ${#fields.errors('*')}"th:text="${err}">Input is incorrect</li></ul></div><label th:class="${#fields.hasErrors('firstName')} ? 'error'">First Name</label> :<input type="text" th:field="*{firstName}"th:class="${#fields.hasErrors('firstName')} ? 'error'" /><br/><label th:class="${#fields.hasErrors('firstName')} ? 'error'">Last Name</label> :<input type="text" th:field="*{lastName}"th:class="${#fields.hasErrors('lastName')} ? 'error'"/><br/><label th:class="${#fields.hasErrors('email')} ? 'error'">email</label> :<input type="text" th:field="*{email}"th:class="${#fields.hasErrors('email')} ? 'error'"/><br/><label th:class="${#fields.hasErrors('username')} ? 'error'">Username</label> :<input type="text" th:field="*{username}"th:class="${#fields.hasErrors('username')} ? 'error'"/><br/><label th:class="${#fields.hasErrors('password')} ? 'error'">Last Name</label> :<input type="text" th:field="*{password}"th:class="${#fields.hasErrors('password')} ? 'error'"/><br/><input type="submit" value="Reqister"/></form></body></html>

${} 和 *{} 区别：

“${}”表达式（如${spitter}）是变量表达式（variableexpression）。一般来讲，它们会是对象图导航语言（Object-GraphNavigation Language，OGNL）表达式

“*{}”表达式，它们是选择表达式（selection expression）。变量表达式是基于整个SpEL上下文计算的，而选择表达式是基于某一个选中对象计算的。在本例的表单中，选中对象就是<form>标签中th:object属性所设置的对象：模型中的Spitter对象。因此，“*{firstName}”表达式就会计算为Spitter对象的firstName属性。

最后效果是跟jsp是一样，这里没有写CSS样式

总结： themeleaf 是jsp 劲敌，需要了解更多的可以去官网看一下

http://www.thymeleaf.org/

阅读全文

0 0

第6章 渲染Web视图----Thymeleaf --笔记3

1.配置Thymeleaf 视图解析器

表单处理：

第6章渲染Web视图----Thymeleaf --笔记3