thymeleaf模板引擎入門

時間 2019-11-16

標籤 thymeleaf 模板引擎入門简体版

原文原文鏈接

ThymeLeaf是什麼

Thymeleaf是一個用於服務器端的java模板引擎，它使用簡單但功能強大，目前能夠處理的模板類型包括：HTML、XML、TEXT、JavaScript、CSS等。html

搭建thymeleaf開發環境

首先建立一個Maven web項目，pom文件依賴信息以下：java

<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的依賴並不複雜，它只須要一個庫文件。web

TemplateEngin、ITemplateResolver和IContext

這三個組件構成thymeleaf的核心：apache

ITemplateResolver用於設置模板引擎，例如模板的存放目錄，模板的後綴，是否開啓模板緩存等等。
TemplateEngine用於解析模板。
IContext用於保存模板中須要的一些變量。例如要把變量傳遞到模板中，就能夠先把變量放入IContext的實現類中，而後在模板中獲取該變量的值。

一個簡單的thymeleaf使用例子

爲了讓程序代碼儘量簡單，這裏只使用最基本的servlet處理web請求。api

建立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方式解析模板。可是，模板的保存路徑和後綴是空的，這兩個必須由咱們本身設置。tomcat

@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的其中一個實現類，它的基本做用是保存變量。app

@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);
    }

}

1. Thymeleaf模板引擎入門
2. srpingboot 菜鳥入門 -- 6、Thymeleaf模板引擎，freemarker模板引擎
3. 模板引擎-Thymeleaf
4. Thymeleaf模板引擎
5. Thymeleaf-模板引擎
6. thymeleaf模板引擎
7. thymeleaf 模板引擎
8. SpringBoot引入模板引擎—— Thymeleaf
9. Springboot引入模板引擎thymeleaf
10. Spring Boot——Thymeleaf模板引擎
更多相關文章...
• Maven 項目模板 - Maven教程
• Eclipse 代碼模板 - Eclipse 教程
• YAML 入門教程
• 委託模式

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。