thymeleaf模板引擎入门

时间：2022-11-17 18:26:58

ThymeLeaf是什么

Thymeleaf是一个用于服务器端的java模板引擎，它使用简单但功能强大，目前可以处理的模板类型包括：HTML、XML、TEXT、JavaScript、CSS等。

搭建thymeleaf开发环境

首先创建一个Maven web项目，pom文件依赖信息如下：

<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>

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

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

 

可见，thymeleaf的依赖并不复杂，它只需要一个库文件。

TemplateEngin、ITemplateResolver和IContext

这三个组件构成thymeleaf的核心：

  • ITemplateResolver用于设置模板引擎，例如模板的存放目录，模板的后缀，是否开启模板缓存等等。
  • TemplateEngine用于解析模板。
  • IContext用于保存模板中需要的一些变量。例如要把变量传递到模板中，就可以先把变量放入IContext的实现类中，然后在模板中获取该变量的值。

一个简单的thymeleaf使用例子

为了让程序代码尽可能简单，这里只使用最基本的servlet处理web请求。

创建Servlet

servlet代码如下，它只是一个简单的servlet，没有什么功能：

@WebServlet(urlPatterns="/index")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

    @Override
public void init() throws ServletException {
super.init();
    }

    @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    }

    @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        doGet(request, response);
    }

}

 

引入模板引擎属性

要使模板引擎可以工作，至少需要创建TemplateEngine类和ITemplateResolver接口的实例，因此在刚才创建的servlet中创建两个类属性， 如下：

@WebServlet(urlPatterns="/index")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

    TemplateEngine templateEngine;
    ServletContextTemplateResolver templateResolver;

//其他servlet方法
}

 

初始化模板引擎

这一步可以在servlet的init方法中初始化上面加入的两个属性。一般情况下，模板解析器有一些默认值，例如它默认以html方式解析模板。但是，模板的保存路径和后缀是空的，这两个必须由我们自己设置。

@Override
public void init() throws ServletException {
super.init();

    templateEngine = new TemplateEngine();
    templateResolver = new ServletContextTemplateResolver(getServletContext());
    templateResolver.setPrefix("/WEB-INF/templates"); //模板位置
    templateResolver.setSuffix(".html");   //模板扩展名

    templateEngine.setTemplateResolver(templateResolver);
}

 

其中prefix就是模板保存的路径，suffix就是模板的扩展名（后缀）。

使用WebContext

WebContext是IContext的其中一个实现类，它的基本作用是保存变量。

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

    WebContext context = new WebContext(request, response, getServletContext());

//添加变量message到context
    context.setVariable("message", "hello thymeleaf");

//解析模板并显示到浏览器
    templateEngine.process("home", context, response.getWriter());
}

 

当请求到来的时候，我们创建一个上下文对象用于保存变量，将来可以在模板中获取变量的值。

TemplateEngine的process方法用于解析模板并利用当前response对象的writer把模板输出到浏览器。

整个过程是非常简单清晰的。

在模板中获取变量的值

home.html文件内容：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3 th:text="${message}">this is a greeting</h3>
</body>
</html>

 

代码中的核心是th:text标签和${message}占位符，它们用于把从上下文中获取到的变量值替换掉当前标签的文本，这里是：this is a greeting

完整代码：

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.sharpcode</groupId>
<artifactId>learnthymeleaf</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>learnthymeleaf Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>

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

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

<build>
<finalName>learnthymeleaf</finalName>

<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
</plugins>
</build>

</project>

 

IndexServlet

@WebServlet(urlPatterns = "/home")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

    TemplateEngine templateEngine;
    ServletContextTemplateResolver templateResolver;

    @Override
public void init() throws ServletException {
super.init();

        templateEngine = new TemplateEngine();

        templateResolver = new ServletContextTemplateResolver(getServletContext());
        templateResolver.setPrefix("/WEB-INF/templates/");
        templateResolver.setSuffix(".html");

        templateEngine.setTemplateResolver(templateResolver);
    }

    @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

        WebContext context = new WebContext(request, response, getServletContext());

// 添加变量message到context
        context.setVariable("message", "hello thymeleaf");

// 解析模板并显示到浏览器
        templateEngine.process("home", context, response.getWriter());
    }

    @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        doGet(request, response);
    }

}

 

标签：

相关文章