- A+
所属分类：Web前端
本人关于thymeleaf的学习源自：
https://www.bilibili.com/video/BV1qy4y117qi
1、thymeleaf的项目搭建
首先创建springboot项目，相关博客有详细的创建教程，下方仅本人推荐示例（视频中也有相关项目创建教程）：
IDEA创建项目教程 :https://www.jianshu.com/p/40422d484475
eclipse创建项目教程 :https://blog.csdn.net/qq_35170365/article/details/80688484
项目搭建完成后,配置application.properties，配置如下，端口号只要不和本机当前口号冲突即可，本人用的是8001
server.port=8001 spring.thymeleaf.cache=false
创建thymeleaf网页模板，相关代码如下:
<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
2、第一个程序
项目结构如图：
第一个程序（基本使用），实现前端标题的数据渲染，先上代码：
后台 创建包controller以及类IndexController：
package com.thym.thymdemo.controller; import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.ArrayList; import java.util.Arrays; import java.util.Date; /** * @author June * @date 2021/12/25 15:35 */ @Controller public class IndexController { @GetMapping("/index") public String index(Model model){ model.addAttribute("title","传递的title"); model.addAttribute("keywords","传递的keywords"); model.addAttribute("description","传递的description"); return "index"; } }
前端创建html网页，index.html，代码如下：
<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title th:text="|localhost-${title}|">默认的Title</title> <meta th:content="${description}" name="description" content="默认的description"> <meta th:content="${keywords}" name="keywords" content="默认的keywords"> </head> <body> </body> </html>
结果实现如下：
3、常用方法
实现后台数据的前端实现，有关对象与类的数据传递：
后台 创建实体类 User.java，代码如下：
package com.thym.thymdemo.view; import lombok.Data; import java.util.Date; import java.util.List; /** * @author June * @date 2021/12/25 15:46 */ @Data public class User {
//其中lombok插件可实现创建get、set方法，所以此处并未创建get、set方法 private String username; private Integer age; private Integer sex; private Boolean isVip; private Date createTime; private List<String> tags; }
IndexController.java 有关代码修改如下;
package com.thym.thymdemo.controller; import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.ArrayList; import java.util.Arrays; import java.util.Date; /** * @author June * @date 2021/12/25 15:35 */ @Controller public class IndexController { @GetMapping("/index") public String index(Model model){ model.addAttribute("title","传递的title"); model.addAttribute("keywords","传递的keywords"); model.addAttribute("description","传递的description"); return "index"; } @GetMapping("/basic") public String basic(Model model){//此处即为javaweb项目中的前后端传值行为 User user = new User(); user.setUsername("lookroot"); user.setAge(32); user.setSex(1); user.setIsVip(false); user.setCreateTime(new Date()); user.setTags(Arrays.asList("PHP","Java")); model.addAttribute("user",user); return "basic"; } }
前端创建html页面，basic.html 代码如下;
<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<h2 th:text="${user.username}"></h2> <h2 th:text="${user.age}"></h2> <h2 th:text="${user.sex}"></h2> <h2 th:text="${user.isVip}"></h2> <h2 th:if="${user.isVip}">会员</h2> <h2 th:text="${user.createTime}"></h2> <h2 th:text="${user.tags}"></h2>--> <div th:object="${user}"> <h2 th:text="*{username}"></h2> <h2 th:text="*{age}"></h2> <h2 th:text="*{sex}"></h2> <h2 th:text="*{isVip}"></h2> <!--这里运用if标签判断该属性是否为真，如果为真则显示标题内容，如果为否则不显示相关内容--> <h2 th:if="*{isVip}">会员</h2> <h2 th:text="*{createTime}"></h2> <h2 th:text="*{tags}"></h2> </div> <!--规范话日期格式--> <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p> <ul> <!--以列表形式显示List集合的各项--> <li th:each="tag:${user.tags}" th:text="${tag}"></li> </ul> <!--选择结构实现数据的前端显示--> <div th:switch="${user.sex}"> <p th:case="1">男</p> <p th:case="2">女</p> <p th:case="*">默认</p> </div> <!--replace com1--> <div th:replace="~{component::com1}"></div> <!--insert com1--> <div th:insert="~{component::com1}"></div> <!--id com2--> <div th:insert="~{component::#com2}"></div> <div th:insert="~{component::com3('传递的数据')}"></div> <div th:insert="~{component::com4(~{::#message})}"> <p id="message">替换的模块</p> </div> </body> </html>
实现结果如下;
4、thymeleaf中JavaScript、css的应用
thymeleaf+css，首先在srcmainresourcesstatic目录下，创建css文件，写入如下代码：
.app{ height: 300px; width: 300px; background-color: blue; }
前端basic页面中代码添加如下（由于所引用的css文件在根目录下，所以可以直接引用）：
<div class="app"></div>
显示效果如下：
在html页面内部直接写入css有关代码
前端添加代码如下：
<ul> <li th:each="tag,stat:${user.tags}" th:text="${tag}" th:classappend="${stat.last}?active"></li> </ul>
结果显示如下：
5、thymeleaf中组件的使用
创建component.html页面，写入如下代码：
<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <footer th:fragment="com1"> <!--/*@thymesVar id="user" type="com.thym.thymdemo.view.User"*/--> <h2 th:text="${user.username}"></h2> com1 </footer> <div id="com2"> com2 </div> <div th:fragment="com3(message)"> <p th:text="${message}"></p> </div> <div th:fragment="com4(message)"> <p th:replace="${message}"></p> </div> </body> </html>
前端页面basic页面代码修改如下;
<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" th:href="@{app.css}"> <style> .active{ color: red; } </style> </head> <body> <!--规范话日期格式--> <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p> <ul> <!--以列表形式显示List集合的各项--> <li th:each="tag:${user.tags}" th:text="${tag}"></li> </ul> <ul> <li th:each="tag,stat:${user.tags}" th:text="${tag}" th:classappend="${stat.last}?active"></li> </ul> <!--replace com1--> <div th:replace="~{component::com1}"></div> <!--insert com1--> <div th:insert="~{component::com1}"></div> <!--id com2--> <div th:insert="~{component::#com2}"></div> <div th:insert="~{component::com3('传递的数据')}"></div> <div th:insert="~{component::com4(~{::#message})}"> <p id="message">替换的模块</p> </div> </body> <script th:inline="javascript"> const user = /*[[${user}]]*/{} console.log(user) </script> </html>
实现结果如下：
