第6章—渲染web视图—使用Thymeleaf
使用Thymeleaf
长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原始HTML的地方进行编辑和渲染.因为它没有与Servelet规范耦合,因此Thymeleaf模板能进入jsp所无法涉足的领域.现在我们来看下如何使用Thymeleaf!
1.引入pom依赖:
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
2.配置thymeleaf的视图解析器
在原有的SpringMVC的基础上修改我们的application.xml文件,如下:
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd">
<!-- 开启注解. 扫描 -->
<context:annotation-config></context:annotation-config>
<context:component-scan base-package="controller"></context:component-scan>
<!-- 过滤掉js, jpg, png, css, 静态文件 -->
<mvc:default-servlet-handler/>
<!-- 开启mvc -->
<mvc:annotation-driven />
<!-- 地址解析器 -->
<!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
<!--<property name="prefix" value="/WEB-INF/views/"></property>-->
<!--<property name="suffix" value=".jsp"></property>-->
<!--</bean>-->
<!--viewResolver-->
<bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="order" value="1"/>
<property name="characterEncoding" value="UTF-8"/>
<property name="templateEngine" ref="templateEngine"/>
</bean>
<!-- templateEngine -->
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"/>
</bean>
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/WEB-INF/templates/"/>
<property name="suffix" value=".html"/>
<property name="templateMode" value="HTML5"/>
</bean>
</beans>
主要修改跳转的路劲和Thymeleaf相关的配置类
3.在WEB-INF下面建一个templates文件件,放入几个HTML
shouye.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>this is Thymeleaf</h2><br/><br/>
<a th:href="@{/thym/login}">go login</a><br/><br/>
<a th:href="@{/thym/register}">go register</a>
</body>
</html>
login.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
login page
</body>
</html>
register.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
register page
</body>
</html>
4.编辑Controller层的类文件
ThymController:
package controller;
import org.springframework.beans.factory.annotation.Configurable;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/thym")
public class ThymController {
@RequestMapping("/index")
public String index(){
return "shouye";
}
@RequestMapping("/login")
public String login(){
return "login";
}
@RequestMapping("register")
public String register(){
return "register";
}
}
5.启动项目:路径:http://localhost:8080/thym/index
显示的页面如下:
我们可以点击链接文字进行相应的跳转,此时已经完成了一个Thymeleaf页面的编写.
