项目中一直用jsp，但是spring从很早开始就推荐使用thymeleaf，springboot更是默认推荐thymeleaf，在我看来thymeleaf相比jsp最大的优势在于修改样式的时候不需要启动服务器， 在有网络和无网络的环境下皆可运行，而且完全不需启动WEB应用，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。那么在ssm框架中如何配置呢？
一、pom.xml中引入thymeleaf所需的依赖jar包
在原来Spring SpringMVC Mybatis框架的基础上引入thymeleaf-spring依赖，因为我的spring版本是5的版本所以这里引入了hymeleaf-spring5，具体可以去maven仓库网站（https://mvnrepository.com/
）自行搜索相应版本
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
因为引入了thymeleaf-spring5之后maven工具会自动下载以下相应依赖 所以此处不必再单独引入thymeleaf依赖
深度截图_选择区域_20191023212423.png
二、修改原来spring-mvc.xml 配置thymeleaf模板解析器
<?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:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:jee="http://www.springframework.org/schema/jee"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/jee
http://www.springframework.org/schema/jee/spring-jee-2.0.xsd">
<!-- 扫描Controller所在的包 -->
<context:component-scan base-package="com.ways.app.common.web.controller"/>
<!-- 注解驱动 -->
<mvc:annotation-driven></mvc:annotation-driven>
<!-- 视图解析器：简化在Controller类编写的视图路径 -->
<!-- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
前缀
<property name="prefix" value="/WEB-INF/pages/"/>
后缀
<property name="suffix" value=".jsp"/>
</bean> -->
<!-- 模板解析器 -->
<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/templates/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="cacheable" value="false" />
<property name="characterEncoding" value="UTF-8"/>
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="characterEncoding" value="UTF-8" />
</bean>
</beans>
注释部分是原来配置jsp的部分
三、在/WEB-INF/templates/下面新建hello.html做测试使用
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="/js/jquery-3.4.1/jquery-3.4.1.js" th:src="@{/js/jquery-3.4.1/jquery-3.4.1.js}" ></script>
<script th:inline="javascript">
$(function(){
var _ctx = [[${application.ctx}]];
alert("Project ContextPath:"+_ctx);
alert("路径:"+$("#ctx").val());
});
</script>
<title>Spring MVC + Thymeleaf Example</title>
</head>
<body>
<!-- Project ContextPath -->
<input type="hidden" id="ctx" th:value="${application.ctx}" /> Hello,
<span th:text="${name}" />!
<a th:href="@{/commonController/test.do?name=_aref}" th:text="${name}"> query</a>
<br />
<form th:action="@{/commonController/test.do}">
<input type="text" name="name" />
<button type="submit">submit</button>
</form>
</body>
</html>
四、写一个controller方法做测试
@RequestMapping("/commonController/test")
public String test(HttpServletRequest request, HttpServletResponse response) {
request.setAttribute("name", request.getParameter("name"));
return "hello";
}
五、ApplicationContext.java
package com.ways.app.common.utils;
import javax.servlet.ServletContext;
import org.springframework.stereotype.Component;
import org.springframework.web.context.ServletContextAware;
/**
* 将ContextPath写入application中，给静态文件引用时用、及URL链接地址用
*/
@Component
public class ApplicationContext implements ServletContextAware {
@Override
public void setServletContext(ServletContext servletContext) {
String ctx = servletContext.getContextPath();
System.out.println("ctx=" + ctx);
servletContext.setAttribute("ctx", ctx);
}
}
六、web.xml里的welcome-file指向新建的index.html
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
七、新建的index.html（做项目启动转发后台接口用）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="./js/jquery-3.4.1/jquery-3.4.1.js" th:src="./js/jquery-3.4.1/jquery-3.4.1.js}" ></script>
<script th:inline="javascript">
$(function(){
window.location= "./commonController/test.do?name=hi"
});
</script>
<title>Spring MVC + Thymeleaf Example</title>
</head>
<body>
</body>
</html>
整体的项目结构如下两图所示
深度截图_选择区域_20191023213756.png
深度截图_选择区域_20191023213833.png
启动项目打入项目地址运行自动跳转到如图页面，thymeleaf生效配置成功
深度截图_选择区域_20191023214026.png
源代码已上传github:https://github.com/haiyong6/haiyongsRepository/tree/master/code/ssmTyemeleaf
网友评论