简介
目前Java Web开发推荐使用模板模板引擎,不建议使用jsp页面
- jsp 缺点L本质上就是servlet,需要后台编译,耗时,效率低
- 模板引擎,不需要编译,速度快。
常用的模板引擎:Freemarker、Veloctiy、Thymeleaf等
SpringBoot推荐使用Thymeleaf,且默认不支持jsp页面,因为jsp必须打包。
常用属性
th:text,th:utext
- 设置元素中的文本内容。
th:text对特俗字符进行转义,等价于[[${ }]]
th:utext 对特俗字符不进行转义 。等价于[(${})]
设置html的原生属性
- th:html
用来替换指定的html原生属性
条件判断
- th:if
年龄大于10显示这个div
<p th:if="${age>=18}">成年</p>
- th:unless
年龄不大于24显示这个div
<p th:unless="${age>=24}">成年</p>
- th:switch th:case
<p th:switch="${role}">
<span th:case="admin">管理员</span>
<span th:case="teacher">教师</span>
<span th:case="student">学生</span>
<span th:case="*">其他</span>
</p>
- th:each
<ul>
<li th:each="name:${students}" th:text="${name}"></li>
</ul>
- th:object
用于表单对象的绑定,将表单绑定到Controller的一个JavaBean参数,常与th:field一起使用,需要和*()表达式配合使用
<form action="/modify" method="post" th:object="${user}">
编号:<input type="text" th:field="*{id}" readonly><br>
姓名:<input type="text" th:field="*{name}"><br>
年龄: <input type="text" th:field="*{age}"><br>
<input type="submit" value="修改">
</form>
- th:fragment
生命代码片段,常用语页面的头部和尾部的引用 - th:include、th:insert、th:replace
th:include 保留自己的标签,不要th:frament的标签(Thymeleaf 3.0不推荐使用)
th:insert 保留自己的标签,保留th:frament的标签
th:replace 不要自己的标签,保留th:frament的标签
<div th:include="/include/header::head"></div>
中间部分
<div th:include="/include/foot::copy"></div>
<div th:insert="/include/foot::copy"></div>
<div th:replace="/include/header::head"></div>
foot
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="copy">
这是页面的底部
</footer>
</html>
header
<!DOCTYPE html>
<!---导入thymeleaf命名空间 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="head">
这是页面的头部
</header>
</html>
表达式
${}变量表达式
- 获取对象的属性、方法
*使用内置的基本对象,如session、application等 - 使用内置的工具对象,如#strings、#data、#arrays、@list、#maps
*{}选择表达式
需要和th:object配合使用,简化了对象属性的获取
@{} url表达式
定义url
<!DOCTYPE html>
<!---导入thymeleaf命名空间 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="${name}"></div>
<div>th:tex和th:utext区别</div>
<div>utext</div>
<div th:utext="${html}"></div>
<div>text</div>
<div th:text="${html}"></div>
<div>[[${html}]]aa</div>
<div>[(${html})]bb</div>
<!---替换html的原生属性 -->
<div th:id="${id}" th:title="${title}">这是一个div</div>
<p th:if="${age>=18}">成年</p>
<p th:unless="${age>=24}">成年</p>
<p th:switch="${role}">
<span th:case="admin">管理员</span>
<span th:case="teacher">教师</span>
<span th:case="student">学生</span>
<span th:case="*">其他</span>
</p>
<ul>
<li th:each="name:${students}" th:text="${name}"></li>
</ul>
<h3>修改用户信息</h3>
<form action="/modify" method="post" th:object="${user}">
编号:<input type="text" th:field="*{id}" readonly><br>
姓名:<input type="text" th:field="*{name}"><br>
年龄: <input type="text" th:field="*{age}"><br>
<input type="submit" value="修改">
</form>
<!---${} 获取对象或属性的方法 -->
<div th:text="${user.getName()}"></div>
<div th:text="${user['age']}"></div>
<!---获取集合 -->
<div th:text="${users.size()}"></div>
<div th:text="${users[1].getName()}"></div>
<div th:text="${users[1].getName()}"></div>
<div >元素个数[[${users.size()}]]</div>
<div th:text="${users.get(1).name}"></div>
<!---使用内置基本对象 -->
<div th:text="${session.sex}"></div>
<div th:text="${application.hbody}"></div>
<!---使用内置的工具对象 -->
<div th:text="${#strings.startsWith(user.name,'t')}"></div>
<div>是否包含t [[${#strings.startsWith(user.name,'t')}]]</div>
<div th:text="${#strings.substring(user.name,1,2)}"></div>
<div th:text="${#strings.length(user.name)}"></div>
<div th:text="${#dates.createNow()}"></div>
<div th:text="${#dates.create(2018,1,2)}"></div>
<div th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd')}"></div>
<!---*{}选择表达式 -->
<div>--------------------------------*{}选择表达式 ------------------------------------------------</div>
<div th:object="${user}">
<div th:text="*{id}"></div>
<div th:text="*{name}"></div>
<div th:text="*{age}"></div>
</div>
<!---@{} url表达式 -->
<a th:href="@{/finduser/(username=${user.name})}">查询指定的用户信息</a>
<!---运算符 -->
性别: <input type="radio" name="sex" th:value="male" th:checked="${session.sex eq 'male'}">男
<input type="radio" name="sex" th:value="male" th:checked="${session.sex eq 'fmale'}">女
<div th:if="${address==null}">未找到信息</div>
<div th:text="${users.size()>=2? '大于等于2' : '小于等于2'}"></div>
<div></div>
</body>
</html>
controller
model.addAttribute("name","toms");
model.addAttribute("html","<mark>您好,\您好啊</mark>");
model.addAttribute("id","mydiv");
model.addAttribute("title","this is mytitle");
model.addAttribute("age",21);
model.addAttribute("role","teacher");
model.addAttribute("students", Arrays.asList("tom","张三","李四"));
User user = new User(1001, "tom", 21);
model.addAttribute("user",user);
List<User> users=new ArrayList<>();
users.add(new User(10002,"lihai",20));
users.add(new User(10003,"tom",30));
users.add(new User(10004,"cat",40));
model.addAttribute("users",users);
session.setAttribute("sex","male");
session.getServletContext().setAttribute("hbody","gname");
return "success"; //使用thymeleaf 会自动拼写前缀和后缀