zoukankan      html  css  js  c++  java
  • thymeleaf模板引擎入门

    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);
        }
    
    }
  • 相关阅读:
    echarts图例全选功能实现
    前端面试基础整理(一)
    echarts自定义折线图横坐标时间间隔踩坑总结
    快应用开发总结
    vue3.0学习笔记(一)
    完整开发vue后台管理系统小结
    多状态组件封装有感
    vue容易混淆的点小记
    h5定位geolaction无法调试解决方法
    Mysql数据库主从心得整理
  • 原文地址:https://www.cnblogs.com/ai-developers/p/7395588.html
Copyright © 2011-2022 走看看