【JavaWeb】-- thymeleaf视图模板技术

什么是thymeleaf？

在html页面上加载java内存数据，这个过程称为渲染，thymeleaf是用来帮助我们做视图渲染的一个技术，当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

thymeleaf特点

动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

th属性

Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。

属性

描述

示例

th:id

替换 HTML 的 id 属性

th:text

文本替换，转义特殊字符

hello

th:utext

文本替换，不转义特殊字符

欢迎来到编程帮！'" >欢迎你

th:object

在父标签选择对象，子标签使用 *{…} 选择表达式选取值。
没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。
同时即使选择了对象，子标签仍然可以使用变量表达式。

firstname

th:value

替换 value 属性

th:with

局部变量赋值运算

th:style

设置样式

编程帮 www.biancheng.net

th:onclick

点击事件

th:each

遍历，支持 Iterable、Map、数组等。

th:if

根据条件判断是否需要展示此标签

th:unless

和 th:if 判断相反，满足条件时不显示

th:switch

与 Java 的 switch case语句类似
通常与 th:case 配合使用，根据不同的条件展示不同的内容

编程帮
www.biancheng.net

th:fragment

模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段

插入的内容

th:insert

布局标签；
将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。

th:replace

布局标签；
使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。

th:selected

select 选择框选中

th:src

替换 HTML 中的 src 属性

th:inline

内联属性；
该属性有 text、none、javascript 三种取值，
在

th:action

替换表单提交地址

使用步骤 1、添加thymeleaf的jar包

2、新建Servlet类ViewBaseServlet

package com.myssm.myspringmvc;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class ViewBaseServlet extends HttpServlet {

    private TemplateEngine templateEngine;

    @Override
    public void init() throws ServletException {

        // 1.获取ServletContext对象
        ServletContext servletContext = this.getServletContext();

        // 2.创建Thymeleaf解析器对象
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);

        // 3.给解析器对象设置参数
        // ①HTML是默认模式，明确设置是为了代码更容易理解
        templateResolver.setTemplateMode(TemplateMode.HTML);

        // ②设置前缀
        String viewPrefix = servletContext.getInitParameter("view-prefix");

        templateResolver.setPrefix(viewPrefix);

        // ③设置后缀
        String viewSuffix = servletContext.getInitParameter("view-suffix");

        templateResolver.setSuffix(viewSuffix);

        // ④设置缓存过期时间（毫秒）
        templateResolver.setCacheTTLMs(60000L);

        // ⑤设置是否缓存
        templateResolver.setCacheable(true);

        // ⑥设置服务器端编码方式
        templateResolver.setCharacterEncoding("utf-8");

        // 4.创建模板引擎对象
        templateEngine = new TemplateEngine();

        // 5.给模板引擎对象设置模板解析器
        templateEngine.setTemplateResolver(templateResolver);

    }

    protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 1.设置响应体内容类型和字符集
        resp.setContentType("text/html;charset=UTF-8");

        // 2.创建WebContext对象
        WebContext webContext = new WebContext(req, resp, getServletContext());

        // 3.处理模板数据
        templateEngine.process(templateName, webContext, resp.getWriter());
    }
}

3、在web.xml文件中添加配置

配置前缀 view-prefix

配置后缀 view-suffix

    
    
        view-prefix
        /
    
    
        view-suffix
        .html

4、使Serlvet继承ViewBaseServlet

public class IndexServlet extends ViewBaseServlet{.....}

5、根据逻辑视图名称得到物理视图名称

处理模板:processTemplate("xxx",request,response);

此处视图名称是index；

thymeleaf会将逻辑视图名称对应到物理视图名称上；

逻辑视图名称：index；

物理视图名称：view-prefix + 逻辑视图名称 + view-suffix（前面的xml配置文件中定义前后缀为/和.html）

所以真实视图名称:/index.html

例：

package com.fruit.servlets;
import com.fruit.dao.FruitDAO;
import com.fruit.dao.impl.FruitDAOImpl;
import com.fruit.pojo.Fruit;
import com.myssm.myspringmvc.ViewBaseServlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        FruitDAO fruitDAO = new FruitDAOImpl();
        List fruitList = fruitDAO.getFruitList();
        //保存到session作用域
        HttpSession session = request.getSession();
        session.setAttribute("fruitList",fruitList);
        //处理模板，第一个参数为视图名称，会对应物理视图名称
        super.processTemplate("index",request,response);
    }
}

6、编辑html文件

示例：

欢迎使用水果库存后台管理系统

添加新库存记录

名称1	单价	库存	操作
对不起，库存为空！
苹果	5	20

【JavaWeb】-- thymeleaf视图模板技术

hello

Java相关栏目本月热门文章