SpringBoot视图层:(4)thymeleaf标签详解

目录

1.springboot引入thymeleaf的依赖

2.Thymeleaf 语法详解

2.1 变量输出与字符串操作

2.1.1th:text

2.1.2th:value

2.1.3 字符串对象

2.2日期格式化处理

2.3条件判断

2.3.1th:if

2.3.2th:switch

2.4迭代遍历

2.4.1th:each遍历list

2.4.2th:each遍历list 状态变量

2.4.3th:each 遍历迭代 Map

2.5域对象操作

2.5.1HttpServletRequest

2.5.2HttpSession

2.5.3ServletContext

2.6URL 表达式

2.6.1url 表达式语法

2.6.2URL 类型

2.6.3 在 url 中实现参数传递用括号()

2.6.4 在 url 中通过 restful 风格进行参数传递


注意:在springboot里面使用thymeleaf时,必须在src/main/resources下建立templates文件夹thymeleaf文件都放在该templates文件下

如果不想使用templates作为访问路径可以在application.properties中添加配置:

指定访问模板路径 为根路径
spring.thymeleaf.prefix=classpath:/

1.springboot引入thymeleaf的依赖

    <!-- thymeleaf的坐标-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

2.Thymeleaf 语法详解

声明:要首先在页面内引入解析th标签的链接

<html lang="zh" xmlns:th="https://www.thymeleaf.org">

2.1 变量输出与字符串操作

后台代码:

    @RequestMapping("/show")
	public String showInfo(HttpServletRequest request,Model model){
		model.addAttribute("msg", "Thymeleaf 第一个案例");
		model.addAttribute("key", new Date());
		return "index";
	}

2.1.1th:text

th:text
在页面中输出值

2.1.2th:value

th:value
可以将一个值放入到 input 标签的 value 中

th:field和th:value的小结:

thymeleaf里的th:field等同于th:name和th:value,浏览器在解析th:field的时候,会解析成name="${th:field}"的值。

然后后台就可以接收到从前台传过来的值。而th:value可以接受到后台的的值,后台则可以根据name获取到前台的值。

2.1.3 字符串对象

使用Thymeleaf 内置对象时:
注意语法:
1, 调用内置对象一定要用#
2, 大部分的内置对象都以 s 结尾 strings、 numbers、 dates

${#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)}
截取子串, 用户与 jdk String 类下 SubString 方法相同

${#strings.toUpperCase(msg)}
${#strings.toLowerCase(msg)}
字符串转大小写。

2.2日期格式化处理

${#dates.format(key)}//此处的key是后台返回的new Date()
格式化日期, 默认的以浏览器默认语言为格式化标准

${#dates.format(key,'yyy/MM/dd')}
按照自定义的格式做日期转换

${#dates.year(key)}
${#dates.month(key)}
${#dates.day(key)}
year: 取年
Month: 取月
Day: 取日

2.3条件判断

后台编码:

@RequestMapping("/show2")
	public String showInfo2(Model model){
		model.addAttribute("sex", "女");
		model.addAttribute("id","1");
		return "index2";
	}

2.3.1th:if

<span th:if="${sex} == '男'">
性别: 男
</span>
<span th:if="${sex} == '女'">
性别: 女
</spa

2.3.2th:switch

<div th:switch="${id}">
<span th:case="1">ID 为 1</span>
<span th:case="2">ID 为 2</span>
<span th:case="3">ID 为 3</span>
</div>

2.4迭代遍历

2.4.1th:each遍历list

后台编码:

@RequestMapping("/show3")
public String showInfo3(Model model){
List<Users> list = new ArrayList<>();
list.add(new Users(1,"张三",20));
list.add(new Users(2,"李四",22));
list.add(new Users(3,"王五",24));
model.addAttribute("list", list);
return "index3";
}

前台编码: 


<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr th:each="u : ${list}">
<td th:text="${u.userid}"></td>
<td th:text="${u.username}"></td>
<td th:text="${u.userage}"></td>
</tr>
</table>

2.4.2th:each遍历list 状态变量

后台代码:

@RequestMapping("/show3")
public String showInfo3(Model model){
List<Users> list = new ArrayList<>();
list.add(new Users(1,"张三",20));
list.add(new Users(2,"李四",22));
list.add(new Users(3,"王五",24));
model.addAttribute("list", list);
return "index3";}

前台代码:状态变量 


<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Index</th>
<th>Count</th>
<th>Size</th>
<th>Even</th>
<th>Odd</th>
<th>First</th>
<th>lase</th>
</tr>
<!-- u是迭代的临时变量,var是状态变量-->
<tr th:each="u,var : ${list}">
<td th:text="${u.userid}"></td>
<td th:text="${u.username}"></td>
<td th:text="${u.userage}"></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 否则返回 false

2.4.3th:each 遍历迭代 Map

 后台代码:

@RequestMapping("/show4")
public String showInfo4(Model model){
Map<String, Users> map = new HashMap<>();
map.put("u1", new Users(1,"张三",20));
map.put("u2", new Users(2,"李四",22));map.put("u3", new Users(3,"王五",24));
model.addAttribute("map", map);
return "index4";
}

前台代码:th:each="maps : ${map}" 里面的map就已经是单个对象了,此时需要取值的话,需要用maps.key取键或者maps.value取值

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="maps : ${map}">
    <!-- 此时的maps就是单个的对象不需要再次遍历-->
       
        <td th:text="${maps.value.userid}" ></td>
        <td th:text="${maps.value.username}"></td>
        <td th:text="${maps.value.userage}"></td>
    </tr>
</table>

2.5域对象操作

2.5.1HttpServletRequest

后台代码:

request.setAttribute("req", "HttpServletRequest");

前台代码:注意:request必须从内置对象httpServletReqeust里面获得

Request:
<span th:text="${#httpServletRequest.getAttribute('req')}"></span>
<br/>

2.5.2HttpSession

session可以不用从内置对象取而直接session.属性

后台
request.getSession().setAttribute("sess", "HttpSession");

前台
Session:<span th:text="${session.sess}"></span><br/>

2.5.3ServletContext

application可以不必使用内置对象而直接application.属性

后台
request.getSession().getServletContext().setAttribute("app","Application");


前台
Application:<span th:text="${application.app}"></span>

2.6URL 表达式

语法格式:th:href="@{}"
th:src="
@{}"

2.6.1url 表达式语法

基本语法: @{}

2.6.2URL 类型

2.6.2.1 绝对路径

<a th:href="@{http://www.baidu.com}">绝对路径</a><br/>

2.6.2.2 相对路径

1)相对于当前项目的根
相对于项目的上下文的相对路径   相对于当前项目的根"/"

<a th:href="@{/show}">相对路径</a>

2) 相对于服务器路径的根  ~相对于当前服务器的跟 ,接下来要么是项目名,要么是需要访问的页面或者请求

<a th:href="@{~/project2/resourcename}">相对于服务器的根</a>

2.6.3 在 url 中实现参数传递用括号()

<a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

2.6.4 在 url 中通过 restful 风格进行参数传递

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相 对 路 径 - 传 参-restful</a>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值