Spring MVC 整合 Thymeleaf 实验手册(一)

Thymeleaf 是流行的模板引擎,在 Spring MVC 可以用来代替默认的 jsp 视图。 本实验手册带学员如何在 Sprng MVC 中集成 Thymeleaf,并通过简单的用例介绍 Thymeleaf 的使用。

实验环境

本手册使用
JDK: 1.8
IDE: IDEA Community
Spring MVC: 4.3.8.RELEASE
Thymeleaf: 3.0.11.RELEASE

新建 Maven 项目

打开 IDEA Community, 选择新建项目,然后选择 maven 项目, 在右边的列表中选择 “org.apache.maven.archetypes:maven-archetype-webapp”。然后点击 “Next”。

在接下来的对话框中,填入项目名和项目保存的目录。(在这里,我使用 “springmvc-thymeleaf-getstart” 作为项目名) 然后 “Next”.

在接下来的对话框中,简单的选择 “Finish”。

项目生成后,我们打开 IDEA 中的 “Project” 视图,可以看到如下的项目结构(在这里,只列出关键的目录和文件):

1
2
3
4
5
6
7
8
springmvc-thymeleaf-getstart
+ src
+ main
+ webapp
+ WEB-INF
web.xml
index.jsp
pom.xml

可以看到,该模板生成的文件夹少了 java 文件夹,我们手动添加进去。

先用鼠标选择 src/main 目录,点击右键,选择建立目录(Directory), 在弹出框的输入框中输入: java 作为目录名,在弹出框的下半部分的选择框中选择 java 类型。

完成后的目录结构如下:

1
2
3
4
5
6
7
8
9
springmvc-thymeleaf-getstart
+ src
+ main
+ java
+ webapp
+ WEB-INF
web.xml
index.jsp
pom.xml

加入依赖库

因为是 maven 项目,所有依赖的声明都包含在 pom.xml 文件中,打开 pom.xml 文件,加入如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 <properties>
<spring.version>4.3.8.RELEASE</spring.version>
<thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
<slf4j.version>1.7.7</slf4j.version>
<log4j.version>1.2.17</log4j.version>
</properties>

<dependencies>

<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-oxm</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- End: Spring -->

<!-- Thymeleaf -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>${thymeleaf.version}</version>
</dependency>
<!-- End: Thymeleaf -->

<!-- Log -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>

<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>

<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<!-- End: Log -->

<!-- Other -->
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
</dependency>

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.6.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.6.3</version>
</dependency>
<!-- End: Other -->

</dependencies>

另外,我们还需要在 pom.xml 文件中加入一些编译、构建选项。 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<build>
<finalName>springmvc-thymeleaf-getstart</finalName>
<resources>
<resource>
<directory>src/main/java</directory>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.*</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>8080</port>
<path>/</path>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.7.0</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
</plugin>
</plugins>
</build>

其中,tomcat7-maven-plugin 是为了在开发阶段能使用 tomcat7 来运行项目。

最后,为了加快依赖库的下载,指名项目使用国内的 maven 仓库:

1
2
3
4
5
6
7
8
9
10
11
12
13
<repositories>
<repository>
<id>alimaven</id>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>

修改完成后,保存 pom.xml,如果 IDEA Community 没有开始下载依赖,则需要手动选择: 鼠标右键选择项目(springmvc-thymeleaf-getstart) ,然后在弹出菜单中选择 maven -> reload project。

配置 web.xml 文件

作为 Java Web Application, web.xml 是项目的核心配置文件,我们需要在这里加入Spring MVC 的入口点:

打开 web.xml 文件,加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>SpringMVC thymeleaf Starter Web Application</display-name>

<!-- Spring和mybatis的配置文件 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-app.xml</param-value>
</context-param>

<!-- 编码过滤器 -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<async-supported>true</async-supported>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- Spring监听器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

<!-- Spring MVC servlet -->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!-- 此处可以可以配置成*.do,对应struts的后缀习惯 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 配置SESSION超时,单位是分钟 -->
<session-config>
<session-timeout>15</session-timeout>
</session-config>

</web-app>

配置 Spring MVC

在上面的 web.xml 文件中,我们指名了 Spring MVC 的配置文件是: spring-mvc.xml, 现在,我们就来建立该文件。

在 src/main/resources 目录中新建名为: spring-mvc.xml, 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

<mvc:annotation-driven/>

<mvc:resources mapping="/static/**" location="/static/"/>

<!-- 自动扫描该包,使SpringMVC认为包下用了@controller注解的类是控制器 -->
<context:component-scan base-package="cn.com.hohistar.training.petstore.web" />

<!-- 启动SpringMVC的注解功能,完成请求和注解POJO的映射 -->
<bean
class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
<bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter"/>
<bean class="org.springframework.http.converter.xml.SourceHttpMessageConverter"/>
<bean class="org.springframework.http.converter.FormHttpMessageConverter"/>
<bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
</list>
</property>
</bean>

<!-- 定义跳转的文件的前后缀 ,视图模式配置-->
<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="characterEncoding" value="UTF-8"/>
</bean>

<bean id="templateEngine"
class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>

<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="characterEncoding" value="UTF-8"/>
</bean>

</beans>

配置 Spring

在 web.xml 中,我们指名 Spring 的配置文件为 spring-app.xml, 现在就来建立该文件。

在 src/main/resources 目录中新建名为: spring-app.xml, 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
<!-- 自动扫描 -->
<context:component-scan base-package="cn.com.hohistar.training.petstore" />

</beans>

建立 Controller

在 src/main/java 中建立名为: cn.com.hohistar.training.petstore.web 的java包。

右键选择 src/main/java, 在菜单中选择 package, 然后在弹出框中输入: cn.com.hohistar.training.petstore.web

再右键选择新建好的 cn.com.hohistar.training.petstore.web 包,在菜单中选择 Class, 输入名: IndexController。

打开新建的 IndexController.java 文件,填入如下内容:

1
2
3
4
5
6
7
8
@Controller
public class IndexController {

@GetMapping({"/", "/index"})
public String index() {
return "index";
}
}

建立首页

因为在 spring-mvc.xml 中,我们配置 Thymeleaf 视图的位置为:views, 所以需要首先在 WEB-INF 中建立一个名为 views 的目录。后续建立的所有视图文件都放在该目录下, 建立以后的项目结构如下:

1
2
3
4
5
6
7
8
9
+ src
+ main
+ java
+ webapp
+ WEB-INF
+ views
web.xml
index.jsp
pom.xml

然后在 views 中新建一个名为: index.html 的文件,内容如下:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title th:text="'Hello Thymeleaf !'"></title>
</head>
<body>
<h2 class="hello-title" th:text="'Hello Thymeleaf !'"></h2>
</body>
</html>

删除原来 WEB-INF 目录下的 index.jsp 文件。

运行程序

在 IDEA Community 中选择 Maven 视图,然后找到: “Plugins” -> “Tomcat7” -> “tomcat7:run-war”, 双击该选择以运行程序。

如果启动争取,可以在输出中看到类似如下的内容:

1
信息: Starting ProtocolHandler ["http-bio-8080"]

表明程序已经运行在本机的 8080 端口了。

现在,打开一个浏览器,访问:

1
http://localhost:8080

就可以看到页面上输出 “Hello Thymeleaf !” 。

下一步

下一步 中,我们将学习一些 Thymeleaf 的基本使用。

本文标题:Spring MVC 整合 Thymeleaf 实验手册(一)

文章作者:晨星

发布时间:2020年09月12日 - 09:09

最后更新:2020年09月18日 - 07:09

原始链接:https://www.mls-tech.info/java/springmvc-thymeleaf-mannual-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。