JavaWeb~模板引擎Thymeleaf总结[通俗易懂]

JavaWeb~模板引擎Thymeleaf总结[通俗易懂]文章目录模板引擎ThymeleafThymeleaf使用流程三级目录模板引擎ThymeleafThymeleaf使用流程1.先编写HTML模板文件,放到指定的目录中2.创建Servlet代码1)先初始化一个TemplateEngine实例2)创建一个ServletContextTemplateResolver实例,并且指定要加载的模板文件的路径以及字符集3)将需要和模板引擎关联的变量使用WebContext来进行表示4)进行渲染TemplateEngine有一个process方法来做这

模板引擎是什么

我们前面已经了解到,一个网页页面分为静态页面和动态页面,静态页面可以就是一个简单的html文件。不能实现和服务器之间的交互,而动态页面可以和服务器之间进行数据交互,而动态页面的实现就用到了模板引擎。
模板引擎是为了使用户界面和数据分离而产生的,从字面意思上理解就是产生一个模板,然后把数据放进去,就可以生成一个html文件展示出来。

对于模板引擎的理解,可以理解为试卷,我们放入的数据就像是答案,每个人放入的数据不一样,也就是每个人填写的答案可能不一样,最终试卷的得分不一样,也就是数据放入后运行展示的效果不一样。
也可以理解为固定的会议室,如果没有会议室,我们去开会可能要自己带着凳子,而在会议室开会,我们不需要带凳子,只需要坐下即可,我们走了别人还可以继续用。

有哪些常见的模板引擎

模板引擎是动态网页发展的产物,Java中的模板引擎数量有很多,在最开始的网页开发中,广泛使用的是JSP,JSP是官方标准的模板,但是由于缺点较多,所以很多人弃用了JSP而选择第三方的引擎,现在广泛使用的模板引擎有Thymeleaf、FreeMaker、Velocity等等。

这里我们介绍的模板引擎是Thymeleaf,这个不仅当下比较流行,也是Spring Boot官方推荐的 。

下面是Thymeleaf的官方链接,点击可下载。

链接:https://www.thymeleaf.org/index.html
官方文档:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

Thymeleaf使用流程

1.先编写HTML模板文件,放到指定的目录中
2.创建Servlet代码
1)先初始化一个TemplateEngine实例
2)创建一个ServletContextTemplateResolver实例,并且指定要加载的模板文件的路径以及字符集
3)将需要和模板引擎关联的变量 使用WebContext来进行表示
4)进行渲染 TemplateEngine 有一个process方法来做这个事情。

0.在maven中央仓库引入依赖
在maven中搜索Thymeleaf
在这里插入图片描述
随便选择一个版本,然后复制依赖,粘贴在pom.xml文件中。
在这里插入图片描述
在这里插入图片描述
1.创建HTML文件模板,放在指定的目录下
所谓的模板文件,就是一个HTML文件,只不过将其中可变的数据给摘出来。
这里我们放在webapp/WEB-INF、template目录下。

代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf 演示</title>
</head>
<body>
这里的内容是可变的:
<!--我们希望h3标签中的内容是可变的,即这里面的内容是Servlet代码计算后得到的-->
    <h3 th:text="${message}"></h3>
</body>
</html>

h3标签中 的th 是thymeleaf的缩写,即这个属性是由thymeleaf提供。而text表示这个类型是个字符串,后面的 ${message}就是具体的变量,在服务器代码中,我们就可以通过计算将这个变量填充。

放到指定目录中:
在这里插入图片描述
2.创建Servlet代码
1)初始化TemplateEngine实例,初始化模板解析器对象,指定路径进行。

private TemplateEngine engine=new TemplateEngine();

TemplateEngine是Thymeleaf中最核心的类,Template是模板,Engine是引擎。这里创建了一个模板引擎对象,我们模板引擎的操作都是围绕这个对象来的,这个对象的功能就是渲染模板(也就是替换动态的数据)

在模板渲染之前,也就是替换模板中的变量之前,我们需要进行初始化,即让模板对象开始加载模板文件,以及告诉模板在哪里加载文件。


        //创建一个模板解析器对象
  ServletContextTemplateResolver resolver=new ServletContextTemplateResolver(this.getServletContext());
  
      //让模板解析器,加载模板文件
   //这里的前缀表示模板文件所在的目录
        //设置前缀和后缀的作用就是 告诉模板引擎,去加载这个目录下的 后缀为.html的文件到内存中,以备后用

        resolver.setPrefix("/WEB-INF/template");
        resolver.setSuffix(".html");

        resolver.setCharacterEncoding("utf-8");
        //把解析器对象,给设置到engine对象中
        engine.setTemplateResolver(resolver);

初始化的时候,需要创建一个模板解析器对象ServletContextTemplateResolver,这个对象的作用就是帮助模板对象TemplateEngine加载文件,在创建时,我们需要传入参数,这个参数就是目录中的Context上下文对象,通过this.getServletContext()方法来获得。

每一个web应用中都有一个Context对象,一个web应用中可以有多个Servlet,这些Servlet共用一个Context对象。关于Context对象,是Tomcat在加载web应用的时候所创建出来的,在Tomcat的webapps目录下,里面的每一个目录都可以视为一个web应用,在加载这些应用的时候,Tomcat会创建一个Context上下文对象,里面的多个Servlet共用这个一个对象。通过在这个对象,我们可以找到具体的文件目录

setPrefixsetSuffix是分别给解析器对象设置前缀和后缀,通过前缀,解析器就知道要加载的模板文件在哪个目录中,通过后缀,解析器就知道在这个目录中那些是模板文件。

2)进行模板渲染。

模板渲染就是将动态的数据进行替换,也就是将数据填入模板中,填入之前,先将数据和模板该填入的位置关联起来。

这里的举例是将用户输入的查询字符串作为动态数据,和模板进行关联。

      // 1.先从参数中读取出用户要传过来的message的值(从用户输入的查询字符串中读取)
        String message=req.getParameter("message");
        //2.将读取到的数据 和模板中 的数据关联起来。


        
        WebContext webContext=new WebContext(req,resp,this.getServletContext());
        webContext.setVariable("message",message);

WebContext 是一个键值对结构,作用就是将上面的模板变量${message}和动态数据进行关联。

关联完成后,进行渲染,通过process方法完成。

  //3.进行渲染
        String html= engine.process("hello",webContext);
        System.out.println(html);
        resp.getWriter().write(html);

整体代码如下:

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@WebServlet("/helloThymeleaf")
public class HelloThymeleafServlet extends HttpServlet { 
   

    private TemplateEngine engine=new TemplateEngine();


    //所谓的初始化,就是告诉模板引擎,从那些目录中加载那些文件作为模板
    @Override
    public void init() throws ServletException { 
   
       //在这个方法中完成Thymeleaf的初始化操作


        //创建一个模板解析器对象
        ServletContextTemplateResolver resolver=new ServletContextTemplateResolver(this.getServletContext());

      //让模板解析器,加载模板文件
   //这里的前缀表示模板文件所在的目录
        //设置前缀和后缀的作用就是 告诉模板引擎,去加载这个目录下的 后缀为.html的文件到内存中,以备后用

        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");

        resolver.setCharacterEncoding("utf-8");
        //把解析器对象,给设置到engine对象中
        engine.setTemplateResolver(resolver);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
   
        // 0.在模板渲染之前,要先进行初始化(模板渲染就是替换变量
        //初始化操作只需要执行一次即可,放到init方法中来实现

        // 1.先从参数中读取出用户要传过来的message的值(从用户输入的查询字符串中读取)
        String message=req.getParameter("message");
        //2.将读取到的数据 和模板中 的数据关联起来。

        WebContext webContext=new WebContext(req,resp,this.getServletContext());
        webContext.setVariable("message",message);

        //3.进行渲染
        String html= engine.process("hello",webContext);
        System.out.println(html);
        resp.getWriter().write(html);
    }
}

hello.html模板:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf 演示</title>
</head>
<body>
<!--我们希望h3标签中的内容是可变的,即这里面的内容是Servlet代码计算后得到的-->
  <h3 th:text="${message}"></h3>
    <h3 th:text="${message}"></h3>
</body>
</html>

引入的依赖(在maven文件pom.xml中):

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

常用标签

Thymeleaf渲染时,主要通过标签来识别并替换对应位置的内容,thymeleaf有很多很多的标签,下面是一些常用的标签。

标签 作用 举例
th:id 替换id th:id=”${user.id}”
th:text 文本替换 th:text=”${user.name}”>bigsai
th:utext 支持html的文本替换 utext:=”${htmlcontent}”>content
th:object 替换对象 th:object=”${user}”
th:value 替换值 th:value=”${user.name}”
th:each 迭代 th:each=“student:${user}”
th:href 替换超链接 th:href=”@{index.html}”
th:src 替换资源 th:src=”@{index.js}”

链接表达式@{…}

Thymeleaf是一个基于HTML的模板引擎,在使用的时候,我们需要加入特定标签来声明和使用Thymeleaf语法,可以在代码中加入Thymeleaf头部标识:

<html xmlns:th="http://www.thymeleaf.org">

在Thymeleaf中,如果想要引入一些资源链接,就需要使用链接表达式@{...},可以是static目录下的静态资源,也可以是互联网上的资源。

举例:
引入CSS:

<link rel="stylesheet" th:href="@{index.css}">

引入JavaScript:

<script type="text/javascript" th:src="@{index.js}"></script>

引入超链接:

<a th:href="@{index.html}">超链接</a>

变量表达式${…}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>变量表达式</title>
</head>
<body>
    <h2 th:text="${message}"></h2>
</body>
</html>

在标签中如果想要修改一个变量,通过${…}写入变量名即可修改。

选择变量表达*{…}

变量表达式不仅可以写成 . . . , 而 且 还 可 以 写 成 ∗ . . . 但 是 , 有 一 个 重 要 的 区 别 : 星 号 语 法 是 对 选 定 的 对 象 评 估 表 达 式 , 而 不 是 整 个 上 下 文 。 也 就 是 说 , 只 要 没 有 选 定 的 对 象 , {…},而且还可以写成*{…} 但是,有一个重要的区别:星号语法是对选定的对象评估表达式,而不是整个上下文。 也就是说,只要没有选定的对象, ......{…}和*{…}的语法就完全一样。

那么如何选定对象?
通过th:object就可以选定对象。
举例:

<div th:object="${user}">
    <p>Name: <span th:text="*{name}">张三</span>.</p>
    <p>Age: <span th:text="*{age}">18</span>.</p>
    <p>Detail: <span th:text="*{detail}">好好学习</span>.</p>
</div>

上面就是选定了对象,如果没有选定对象,上面的代码完全等价于:

<div >
    <p>Name: <span th:text="*{user.name}">张三</span>.</p>
    <p>Age: <span th:text="${user.age}">18</span>.</p>
    <p>Detail: <span th:text="${user.detail}">好好学习</span>.</p>
</div>

消息表达式#{…}(了解)

消息表达式用于从消息源中提取消息内容,在大多数情况下,消息源是*.properties文件,同时也可以自定义其他的消息源。
表达语法:

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

消息属性可以是静态值:

home.welcome=message

也可以是带有参数声明的值:

home.welcome=message wall, {0};

多个参数之间用分割.

#{messageKey(param1=value1, param2=value2)}

回顾:几个核心的类:

1.TemplateEngine 负责进行渲染,渲染指的是把动态的数据替换到HTML模板中指定的位置。
2.WebContext 负责把HTML 模板中的“变量”和Java代码中的“变量”给关联起来,直接简单的把这个对象理解成键值对结构。
把映射关系描述出来之后,交给上面的engine对象进行渲染
3.ServletContextTemplateResolver 模板解析器对象,把之前写好的HTML模板给加载过来,并告知engine.

代码举例:web版猜数字

运行效果:
在这里插入图片描述

后端用Servlet生成随机数字,并判断大小返回结果。

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Random;

@WebServlet("/guessNum")
public class GuessNumberServlet extends HttpServlet { 
   
    private TemplateEngine engine=new TemplateEngine();

    //toGuess 表示要猜的数字
    private int toGuess=0;
    //count 表示要猜的次数
    private int count=0;

    @Override
    public void init() throws ServletException { 
   
        //对模板引擎进行初始化
        ServletContextTemplateResolver resolver=new ServletContextTemplateResolver(this.getServletContext());
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        resolver.setCharacterEncoding("utf-8");
        engine.setTemplateResolver(resolver);
    }

    //获取到页面的初始情况,并且初始化,生成一个带猜测的数字

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
   
        resp.setContentType("text/html;charset=utf-8");
        //1.生成一个待猜的数字
        Random random=new Random();
        toGuess=random.nextInt(100)+1;
        count=0;
        //2.返回页面
        WebContext webContext=new WebContext(req,resp,getServletContext());
        webContext.setVariable("newGame",true);
        engine.process("guessNum",webContext,resp.getWriter());
    }

     //处理一次猜的过程


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
   
        resp.setContentType("text/html;charset=utf-8");
        //1.从请求中,读取出用户提交的数字的内容
        String parameter =req.getParameter("num");
        int num=Integer.parseInt(parameter);
        String result=" ";
        //2.和toGuess 进行比较
        if(num<toGuess){ 
   
            result="猜低了";
        }else if(num>toGuess){ 
   
            result="猜高了";
        }else{ 
   
            result="猜对了";
        }
        //自增猜的次数
        count++;
        //4.构造一个结果页面,能够显示当前猜的结果
        WebContext webContext=new WebContext(req,resp,getServletContext());
        webContext.setVariable("newGame",false);
        webContext.setVariable("result",result);
        webContext.setVariable("count",count);
        engine.process("guessNum",webContext,resp.getWriter());
    }
}

前端生成模板:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>GuessNumber</title>
</head>
<body>
<form action="guessNum" method="POST">
    <input type="text" name="num">
    <input type="submit" value="猜数字">
</form>
<!--这个 th:if 是条件显式的逻辑, 如果if后为真,就显示改标签,如果为假,就不显示-->
<div th:if="${!newGame}">
<!-- 这两个代码,是输入了猜测结果后才会显式,开始新游戏时不显示 -->
    <div th:text="${result}"></div>
    <div th:text="${count}"></div>
</div>

<div></div>
</body>
</html>

参考文章:
https://developer.aliyun.com/article/769977

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10688.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注