三. SpringBoot整合Thymeleaf的详细介绍
三.一 基础信息显示
三.一.一 后端响应
/** * 普通展示 * @param model * @return */ @RequestMapping("/index") public String info(Model model){ return "index"; }
返回到首页
三.一.二 前端页面 index.html
<!doctype html> <!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Welcome <span th:text="'整合Thymeleaf'"/></title> <link rel="StyleSheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css" type="text/css"> </head> <body class="container"> <h1>Welcome <span th:text="'两个蝴蝶飞'"/></h1> <h2>我有一个朋友,她的名字叫: <span th:text="'周小欢'"/></h2> <script type="text/javascript" src="webjars/jquery/3.5.1/jquery.js"></script> <script type="text/javascript" src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script> </body> </html>
引入 thymeleaf 的名称空间
<!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org">
用: th:text 展示基础的文本信息
三.一.三 响应展示
通过前端页面进行响应
通过控制器 进行响应,会将数据展示出来。
三.二 对象信息显示
三.二.一 后端响应
/** * 基本信息展示 * @param model * @return */ @RequestMapping("/basic") public String basic(Model model){ model.addAttribute("title","学习 Thymeleaf的基本标签"); model.addAttribute("name","岳泽霖"); model.addAttribute("girlName","周小欢"); model.addAttribute("id",1); model.addAttribute("utext","<span style='color:red;font-size:20px;'>嘿嘿,总会有人一直记得,岳泽霖和周小欢的故事</span>"); model.addAttribute("age","26"); model.addAttribute("inputValue","一个快乐的程序员"); model.addAttribute("href","https://yuejl.blog.csdn.net/"); return "basic"; }
返回到首页
三.二.二 前端页面 basic.html
<!doctype html> <!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Welcome <span th:text="${title}"/></title> <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css"> </head> <body class="container"> <h1>th:text 展示普通的文本信息</h1> <h2>我的名字是: <span th:text="${name}"/></h2> <h2>我的朋友的名字是: <span th:text="${girlName}"/> </h2> <h3>id的编号是: <span th:id="${id}"/></h3> <h1>展示HTML信息:</h1> <h2>用 text展示HTML文本: <span th:text="${utext}"/></h2> <h2>用 utext 展示HTML文本: <span th:utext="${utext}"/></h2> <h1>展示回显输入框的值: 年龄: <input type="text" th:value="${age}"/> </h1> 我的描述: <textarea> <th:block th:text="${inputValue}"> </th:block> </textarea> <h1>展示链接信息</h1> 我的CSDN网址 <a th:href="@{${href}}"> CSDN网址</a> <h1>展示src的信息</h1> <img th:src="@{static/self.jpg}" th:width="200px" th:height="200px"/> <script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script> </body> </html>
引入 thymeleaf 的名称空间
<!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org">
用: th:text 展示基础的文本信息
用: th:href 进行引入链接 th:utext 放置html形式的文本，可以解析
th:id 放置id值 th:value 放置输入框的值
th:src 引入图片的信息
三.二.三 响应展示
通过控制器 进行响应,会将数据展示出来。
三.三 If 显示
三.三.一 后端响应
/** * If对象展示 * @param model * @return */ @RequestMapping("/if") public String ifModel(Model model){ model.addAttribute("title","学习 Thymeleaf的If标签"); //放置 java bean 对象 User user=new User(); user.setName("岳泽霖"); user.setAge(26); user.setDescription("一个快乐的程序员"); model.addAttribute("user",user); //放置if 语句 model.addAttribute("sex","男"); model.addAttribute("enable","0"); model.addAttribute("score",85); return "if"; }
返回到首页
三.三.二 前端页面 if.html
<!doctype html> <!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Welcome <span th:text="${title}"/></title> <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css"> </head> <body class="container"> <h1>Java Bean 展示信息</h1> 我的名字是: <span th:text="${user.name}"/> 年龄是: <span th:text="${user['age']}"/> 描述是: <textarea th:block th:text="${user.getDescription()}"/> <h1>IF 条件语句</h1> <h2>三目条件表达式</h2> 性别: <span th:text="${sex=='男'}?'男':'女'"/> <h2>th:if 的处理</h2> <span th:if="${sex}=='男'"> 男性 </span> <th:block> <span th:if="${enable}=='1'"> 正常 </span> <span th:unless="${enable}=='1'"> 禁用 </span> </th:block> <h2>th:switch 的处理</h2> <div th:switch="${score}>=0"> <span th:case="${score}>=90"> 优秀 </span> <span th:case="${score}>=80"> 良好 </span> <span th:case="${score}>=70"> 中 </span> <span th:case="${score}>=60"> 及 </span> <span th:case="*"> 差 </span> </div> <script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script> </body> </html>
引入 thymeleaf 的名称空间
<!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org">
th:if th:unless th:switch 进行条件判断语句。
th:case="*" 表示其他剩余的全部情况。
三.三.三 响应展示
通过控制器 进行响应,会将数据展示出来。
