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

最新推荐文章于 2025-05-24 08:40:23 发布

往前的

最新推荐文章于 2025-05-24 08:40:23 发布

阅读量2k

点赞数

分类专栏： Spring实战笔记文章标签： mvc apache themeleaf web springmvc

本文链接：https://blog.youkuaiyun.com/m0_37355951/article/details/73694690

版权

Spring实战笔记专栏收录该内容

31 篇文章

订阅专栏

概述：

使用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 {


	@Bean
	public TemplateEngine templateEngine(TemplateResolver templateResolver){
		SpringTemplateEngine templateEngine = new SpringTemplateEngine();
		templateEngine.setTemplateResolver(templateResolver);
		return templateEngine;
	}
	@Bean
	public ViewResolver viewResolver(SpringTemplateEngine templateEngine) {
		
		ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
		viewResolver.setTemplateEngine(templateEngine);
		return viewResolver;
	}
	
	
	
	@Bean
	public TemplateResolver templateResolver(){
		TemplateResolver templateResolver = 
				new ServletContextTemplateResolver();
		templateResolver.setPrefix("/WEB-INF/template/");
		templateResolver.setSuffix(".html");
		templateResolver.setTemplateMode("HTML5");
		return templateResolver;
		
	}

	
	
}

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

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

/*@Bean
	public 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.youkuaiyun.com/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样式