arttemplate.js（弃用JSP，全新Thymeleaf页面模板引擎，整合SSM）
时间：2023-04-29 21:00:17
点击次数：18
进行JavaWeb开发时主要用到的是JSP，传统的JSP需要在页面中加入大量的JSTL标签，这些标签只能运行在服务器中，前端开发人员维护这些页面比较困难，页面加载速度也比较慢。 Thymeleaf是一种全新的页面模板引擎，在Thymeleaf中使用的标签都是基本的HTML标签，可以脱离服务器独立运行，这样前端开发人员可以维护静态页面，后台开发人员将数据绑定上去，利于分工合作，Thymeleaf的语法也比较简洁优雅，比较容易使用。
1. 什么是Thymeleaf
Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择-尽管它还有很多工作要做。
前端常使用模板引擎，主要有FreeMarker和Thymeleaf，它们都是用Java语言编写的，渲染模板并输出相应文本，使得界面的设计与应用的逻辑分离，同时前端开发还会使用到Bootstrap、AngularJS、JQuery等。
2. 创建Thymeleaf的入门项目
2.1 添加pom文件依赖
<!-- thymeleaf基础依赖 -->
<dependency>
<groupId>org.thymeleaf
</groupId>
<artifactId>thymeleaf
</artifactId>
<version>3.0.11.RELEASE
</version>
</dependency>
<!-- thymeleaf-spring4整合spring4 -->
<dependency>
<groupId>org.thymeleaf
</groupId>
<artifactId>thymeleaf-spring4
</artifactId>
<version>3.0.11.RELEASE
</version>
</dependency>2.2 spring_mvc.xml中添加
<!--thymeleaf模板解析器-->
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<!--前缀配置-->
<property name="prefix" value="/WEB-INF/"></property>
<!--后缀配置-->
<property name="suffix" value=".html"></property>
<!--模板类型-->
<property name="templateMode" value="HTML"></property>
<!--不使用缓存-->
<property name="cacheable" value="false"></property>
<!--编码类型-->
<property name="characterEncoding" value="UTF-8"></property>
</bean>
<!--模板引擎配置-->
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"></property>
</bean>
<!--视图处理器-->
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"></property>
<property name="characterEncoding" value="UTF-8"></property>
</bean>
注意：如果配置jsp的视图解析器，则需要先删除。
3. Thymeleaf 的基本使用
3.1 Thymeleaf特点
Thymelaef 是通过他特定语法对 html 的标记做渲染。
3.2 创建视图.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf入门
</title>
</head>
<body>
<span th:text="${ename}"></span>
</body>
</html> 注意：用ssm整合Thymeleaf时，页面中一定要引入xmlns:th="http://www.thymeleaf.org"
3.3 编写Ccontroller
@Controller
public class EmpController {
@RequestMapping(value = "emp",method = RequestMethod.GET)
public String emp(Model model){
model.addAttribute(
"ename",
"smith");
return "templates/emp";
}
}
4. Thymeleaf语法详解
4.1 变量输出与字符串操作
th:text 在页面中输出值
<!--在页面中输出值-->
<span th:text="${ename}"></span>
th:value 可以将一个值放入到 input 标签的 value 中
<!--将值放入input的value中-->
<input type="text" th:value="${ename}" />
判断字符串是否为空
Thymeleaf 内置对象 注意语法：
1：调用内置对象一定要用#
2：大部分的内置对象都以 s 结尾 strings、numbers、dates
${#strings.isEmpty(key)} 判断字符串是否为空，如果为空返回
true，否则返回
false
<!--
${#strings.isEmpty(key)}判断字符串是否为空，如果为空返回
true，否则返回
false-->
<span th:text=
"${#strings.isEmpty(ename)}"></span>
${#strings.isEmpty(key)} 判断字符串是否为空，如果为空返回
true，否则返回
false
${#strings.contains(msg,T)} 判断字符串是否包含指定的子串，如果包含返回
true，否则返回
false
${#strings.startsWith(msg,a)} 判断当前字符串是否以子串开头，如果是返回
true，否则返回
false
${#strings.endsWith(msg,a)} 判断当前字符串是否以子串结尾，如果是返回
true，否则返回
false
${#strings.length(msg)}
返回字符串的长度
${#strings.indexOf(msg,h)} 查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,13)} ${#strings.substring(msg,13,15)} 截取子串，用户与 jdkString 类下 SubString 方法相同
${#strings.toUpperCase(msg)} ${#strings.toLowerCase(msg)}
字符串转大小写。
4.2 日期格式化处理
<span th:text=
"${#dates.format(createDate)}"></span>
<span th:text=
"${#dates.format(createDate,yyyy/MM/dd)}"></span>
${#dates.format(key)}
格式化日期，默认的以浏览器默认语言为格式化标准
2019年11月12日 下午03时05分32秒
${#dates.format(key,yyy/MM/dd)}
2019/11/12
按照自定义的格式做日期转换
${#dates.year(key)} ${#dates.month(key)} ${#dates.day(key)}
year：取年 Month：取月 Day：取日
4.3 条件判断
th:if 判断语句<span th:if="${sex} == 男">
男孩儿
</span>
<span th:if="${age} == 30">
年龄为30
</span>th:switch多分支语句<div th:
switch=
"${score}">
<span th:case="60">成绩为60</span>
<span th:case="70">成绩为70</span>
<span th:case="80">成绩为80</span>
<span th:case="90">成绩为90</span>
<!--等同于defualt-->
<span th:case="*">其他成绩</span>
</div>4.4 迭代遍历
th:each 循环遍历<table border=
"1" cellpadding=
"8" cellspacing=
"0">
<tr>
<td>雇员编号</td>
<td>雇员姓名</td>
<td>雇员工作</td>
<td>雇员工资</td>
</tr>
<tr th:each="list : ${empList}">
<td th:text="${list.empno}"></td>
<td th:text="${list.ename}"></td>
<td th:text="${list.job}"></td>
<td th:text="${list.sal}"></td>
</tr>
</table>
@RequestMapping(value =
"empList",method = RequestMethod.GET)
public
String listEmp(Model model){
List<Emp> empList =
new ArrayList<>();
empList.add(
new Emp(
7369,
"smith",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empList.add(
new Emp(
7499,
"allen",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empList.add(
new Emp(
7521,
"ward",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empList.add(
new Emp(
7566,
"jones",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
model.addAttribute(
"empList",empList);
return "templates/empList";
}
th:each 状态变量<table border=
"1" cellpadding=
"8" cellspacing=
"0">
<tr>
<td>雇员编号</td>
<td>雇员姓名</td>
<td>雇员工作</td>
<td>雇员工资</td>
<td>序号0开始</td>
<td>序号1开始</td>
<td>总的条数</td>
<td>偶数行</td>
<td>奇数行</td>
<td>第一行</td>
<td>最后一行</td>
</tr>
<tr th:each="list,var : ${empList}">
<td th:text="${list.empno}"></td>
<td th:text="${list.ename}"></td>
<td th:text="${list.job}"></td>
<td th:text="${list.sal}"></td>
<td th:text="${var.index}"></td>
<td th:text="${var.count}"></td>
<td th:text="${var.size}"></td>
<td th:text="${var.even}"></td>
<td th:text="${var.odd}"></td>
<td th:text="${var.first}"></td>
<td th:text="${var.last}"></td>
</tr>
</table>
状态变量属性
1,
index:当前迭代器的索引 从
0 开始
2,
count:当前迭代对象的计数 从
1 开始
3,
size:被迭代对象的长度
4,even/odd:布尔值，当前循环是否是偶数/奇数 从
0 开始
5,
first:布尔值，当前循环的是否是第一条，如果是返回
true 否则返回
false
6,
last:布尔值，当前循环的是否是最后一条，如果是则返回
true 否则返回
false4.5 th:each 迭代 Map
<table border=
"1" cellpadding=
"8" cellspacing=
"0">
<tr>
<td>雇员编号</td>
<td>雇员姓名</td>
<td>雇员工作</td>
</tr>
<tr th:each="maps : ${empMap}">
<td th:text="${maps}"></td>
</tr>
<tr th:each="maps : ${empMap}">
<td th:each="entry:${maps}" th:text="${entry.value.empno}"></td>
<td th:each="entry:${maps}" th:text="${entry.value.ename}"></td>
<td th:each="entry:${maps}" th:text="${entry.value.job}"></td>
</tr>
</table>
@RequestMapping(value =
"empMap",method = RequestMethod.GET)
public
String empMap(Model model){
Map<
String,Emp> empMap =
new HashMap<>();
empMap.put(
"e1",
new Emp(
7369,
"smith",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empMap.put(
"e2",
new Emp(
7499,
"allen",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empMap.put(
"e3",
new Emp(
7521,
"ward",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
empMap.put(
"e4",
new Emp(
7566,
"jones",
"clerk",
7902,
null,
new BigDecimal(
"800.00"),
null,
20));
model.addAttribute(
"empMap",empMap);
return "templates/empMap";
}
HttpServletRequestrequest.setAttribute(
"key",
"request");
HttpSession session = request.getSession();
Request域:
<span th:text="${#httpServletRequest.getAttribute(key)}"></span><br/>HttpSessionHttpSession session = request.getSession();
session.setAttribute(
"key",
"session");
Session域:
<span th:text="${session.key}"></span><br/>ServletContextServletContext application = request.getSession().getServletContext();
application.setAttribute(
"key",
"application");
Application域:
<span th:text="${application.key}"></span>4.7 URL 表达式
th:href
th:src
url 表达式语法基本语法：@{}
绝对路径：
@RequestMapping("/{page}")
public String page(
@PathVariable String page){
System.
out.println(page);
return "templates/"+page;
}
<a th:href=
"@{http://www.baidu.com}">绝对路径</a><br/>相对路径：1． 相对于当前项目的根 相对于项目的上下文的相对路径
<a th:href="@{/show}">相对路径
</a>
2． 相对于服务器路径的根
<a th:href="@{~/project2/resourcename}">相对于服务器的根
</a>在 url 中实现参数传递
<a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参
</a>
在 url 中通过 restful 风格进行参数传递
<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相 对 路 径 - 传 参 -restful
</a>学会了吗？谁在最需要的时候轻轻拍着我肩膀，谁在最快乐的时候愿意和我分享。我是一个包夜敲代码，想靠技术苟且的程序员。如果觉得有点用的话，请毫不留情地关注、点赞、转发。这将是我写出更多优质文章的最强动力！
上一篇:
mvc框架特点（一个易学易用高效便捷的MVC和ORM框架）
下一篇:
spring boot configuration annotation（Spring Boot 2.x基础教程：使用 Thymeleaf开发Web页面）
