SpringBoot—— 整合Thymeleaf

整合 jsp 技术

一.创建 Thymeleaf 的入门项目
1.创建项目:
在这里插入图片描述
2修改 pom 文件添加坐标

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.10.RELEASE</version>
  </parent>
  <groupId>com.bjsxt</groupId>
  <artifactId>10-spring-boot-view-thymeleaf</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
  <java.version>1.7</java.version>
  </properties>
  
  <dependencies>
  	<!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- springBoot的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  </dependencies>
</project>

3创建存放视图的目录
目录位置:src/main/resources/templates templates:该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。
在这里插入图片描述
二.Thymeleaf 的基本使用
1.Thymeleaf特点:
Thymelaef 是通过他特定语法对 html 的标记做渲染。

2.编写 Controller

/*
Thymeleaf 入门案例 
* /
 @Controller 
 public class DemoController {
 
  @RequestMapping("/show") 
  public String showInfo(Model model){
      model.addAttribute("msg", "Thymeleaf 第一个案例"); return "index";
  }
}

3创建视图 .html

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Thymeleaf 入门</title> 
</head>
 <body> 
<span th:text="Hello"></span> 
<hr/> 
<span th:text="${msg}"></span>
</body> 
</html>

4编写启动类

/*
Thymeleaf 入门案例 *
*/ 
@SpringBootApplication 
public class App {
 public static void main(String[] args) {
       SpringApplication.run(App.class, args);
  }
}

三Thymeleaf 语法详解
1.变量输出与字符串操作
1.1th:text

th:text 
在页面中输出值

1.2th:value

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

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)}
截取子串,用户与 jdkString 类下 SubString 方法相同
${#strings.toUpperCase(msg)} 
${#strings.toLowerCase(msg)}
字符串转大小写。

2日期格式化处理

${#dates.format(key)}
格式化日期,默认的以浏览器默认语言为格式化标准
${#dates.format(key,'yyy/MM/dd')}
按照自定义的格式做日期转换
${#dates.year(key)} 
${#dates.month(key)} 
${#dates.day(key)} 
year:取年
Month:取月
Day:取日

数字类型循环处理


3.条件判断
3.1th:if

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

3.2 th: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>

4迭代遍历
4.1th:each

 @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>

4.2ht:each 状态

 @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>
    		<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

4.3th:each 迭代 Map

   @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="maps : ${map}">
			<td th:text="${maps}"></td>
		</tr>
	</table>
	<th/>
	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="maps : ${map}">
			<td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
			<td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
			<td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
		</tr>
	</table>

5域对象操作
5.1HttpServletRequest

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

5.2HttpSession

 request.getSession().setAttribute("sess", "HttpSession"); 
 Session:<span th:text="${session.sess}"></span><br/>

5.3ServletContext

request.getSession().getServletContext().setAttribute("app", "Application"); 
Application:<span th:text="${application.app}"></span>

6URL 表达式
th:href th:src
6.1url 表达式语法
基本语法:@{}
6.2URL 类型
6.2.1绝对路径

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

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

 <a th:href="@{/show}">相对路径</a>
  1. 相对于服务器路径的根

    相对于服务器的根

6.3 在 url 中实现参数传递

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java程序员劝退师

感谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值