【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 属性	<input id="html-id" th:id="thymeleaf-id" />
th:text	文本替换，转义特殊字符	<h1 th:text="hello，bianchengbang" >hello</h1>
th:utext	文本替换，不转义特殊字符	<div th:utext="'<h1>欢迎来到编程帮！</h1>'" >欢迎你</div>
th:object	在父标签选择对象，子标签使用 *{…} 选择表达式选取值。没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。同时即使选择了对象，子标签仍然可以使用变量表达式。	<div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p> </div>
th:value	替换 value 属性	<input th:value = "${}" />
th:with	局部变量赋值运算	<div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style	设置样式	<div th:>编程帮 </div>
th:onclick	点击事件	<td th:onclick = "'getInfo()'"></td>
th:each	遍历，支持 Iterable、Map、数组等。	<table> <tr th:each="m:${session.map}"> <td th:text="${m.getKey()}"></td> <td th:text="${m.getValue()}"></td> </tr> </table>
th:if	根据条件判断是否需要展示此标签	<a th:if ="${userId == collect.userId}">
th:unless	和 th:if 判断相反，满足条件时不显示	<div th:unless="${m.getKey()=='name'}" ></div>
th:switch	与 Java 的 switch case语句类似通常与 th:case 配合使用，根据不同的条件展示不同的内容	<div th:switch="${name}"> <span th:case="a">编程帮</span> <span th:case="b"></span> </div>
th:fragment	模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段	<footer th:fragment="footer">插入的内容</footer>
th:insert	布局标签；将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。	<div th:insert="commons/bar::footer"></div>
th:replace	布局标签；使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。	<div th:replace="commons/bar::footer"></div>
th:selected	select 选择框选中	<select> <option>---</option> <option th:selected="${name=='a'}"> 编程帮 </option> <option th:selected="${name=='b'}"> </option> </select>
th:src	替换 HTML 中的 src 属性	<img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:inline	内联属性；该属性有 text、none、javascript 三种取值，在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。	<script type="text/javascript" th:inline="javascript"> var name = /[[${name}]]/ 'bianchengbang'; alert(name) </script>
th:action	替换表单提交地址	<form th:action="@{/user/login}" th:method="post"></form>

使用步骤

1、添加thymeleaf的jar包

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

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

    <!-- 配置上下文参数 -->
    <context-param>
        <param-name>view-prefix</param-name>
        <param-value>/</param-value>
    </context-param>
    <context-param>
        <param-name>view-suffix</param-name>
        <param-value>.html</param-value>
    </context-param>

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<Fruit> fruitList = fruitDAO.getFruitList();
        //保存到session作用域
        HttpSession session = request.getSession();
        session.setAttribute("fruitList",fruitList);
        //处理模板，第一个参数为视图名称，会对应物理视图名称
        super.processTemplate("index",request,response);
    }
}

6、编辑html文件

示例：

<html xmlns:th="http://">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/index.css">
        <script language="JavaScript" src="js/index.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<p class="center f30">欢迎使用水果库存后台管理系统</p>
				<div >
					<a th:href="@{/add.html}" >添加新库存记录</a>
				</div>
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称1</th>
						<th class="w20">单价</th>
						<th class="w20">库存</th>
						<th>操作</th>
					</tr>
					<tr th:if="${#lists.isEmpty(session.fruitList)}">
						<td colspan="4">对不起，库存为空！</td>
					</tr>
					<tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}">
						<!-- <td><a th:text="${fruit.fname}" th:href="@{'/edit.do?fid='+${fruit.fid}}">苹果</a></td> -->
						<td><a th:text="${fruit.fname}" th:href="@{/edit.do(fid=${fruit.fid})}">苹果</a></td>
						<td th:text="${fruit.price}">5</td>
						<td th:text="${fruit.fcount}">20</td>
						<!-- <td><img src="imgs/del.jpg" class="delImg" th:onclick="'delFruit('+${fruit.fid}+')'"/></td> -->
                        <td><img src="imgs/del.jpg" class="delImg" th:onclick="|delFruit(${fruit.fid})|"/></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

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

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

什么是thymeleaf？

thymeleaf特点

th属性

使用步骤

1、添加thymeleaf的jar包

2、新建Servlet类ViewBaseServlet

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

4、使Serlvet继承ViewBaseServlet

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

6、编辑html文件

相关文章

时间代码的编写技巧与常见问题

JAVA继承实例

大话设计模式——享元

MacOS切换JDK版本

Base64解码时Illegal base64 character 20问题解决

idea解决“源根之外的java文件“的问题

No static resource favicon.ico.问题解决

PM2 常用的操作指南

不多见但是实用的部分C函数（2）

C实现杨辉三角

作者介绍

最新文章

时间代码的编写技巧与常见问题

不多见但是实用的部分C函数（2）

算法：实现进制转换类题目

C实现杨辉三角

内存函数及实现

轮转数组（元素位置对调、数据的左旋、右旋）

热门文章

JAVA__接口的作用

Java学习之算术运算符两只老虎

排序算法Java版-归并排序算法

JAVA多线程学习笔记

java构建一个格式稍微复杂点的JSON对象附查看json格式的小工具

try...catch...finally java

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

学习笔记jira项目7-清除对象对象属性为空 且不等于0

IntelliJ IDEA Java 中如何快速插入 try / catch

如何理解：普通代码块、构造块、静态块？有什么关系？

java实现Saga模式代码示例

python数据容器之字典相关的操作

一个Java实现的工具,能下载Github issue里包含的图片到本地

学习笔记jira项目7-清除对象对象属性为空且不等于0