Thymeleaf模板引擎学习

开发传统Java WEB项目时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了。从而Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。它的语法与我们以前使用的EL表达式和JSTL标签库十分类似。接下来我们进行学习使用Thymeleaf!

一、新建一个Spring Boot项目添加Thymeleaf依赖:创建Spring Boot可以参考一下这篇博文

1   
2      org.springframework.boot
3      spring-boot-starter-thymeleaf
4        

 二、在SpringBoot的.yml配置文件中添加以下配置:

1 server:
2   port: 8097
3 spring:
4   thymeleaf:
5     prefix: classpath:/templates/ #获取页面路径
6     mode: HTML5
7     encoding: UTF-8
8     content-type: text/html
9     cache: false  

三、新建一个Controller进行请求拦截,最后返回一个页面:

 1 @Controller //此处必须是@Controller注解,@RestController注解不进行解析,则返回页面返回JSON字符串
 2 public class ThymeleafController {
 3 
 4     //传输简单文字,Model对象,进行信息存储返回到index页面
 5     @RequestMapping("/hello")
 6     public String hello(Model model){
 7         model.addAttribute("name","李小龙");
 8         model.addAttribute("age","15");
 9         model.addAttribute("text","那小子真帅");
10         return  "index";
11     }
12 
13 }  

四、在resources/templates/新建一个index.html页面,代码如下:

DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Thymeleaftitle>
head>
<body>

    
    <p style="color:red">hello worldp>
    <p th:text="'姓名:'+${name}">p>
    <p th:text="'年龄:'+${age}">p>
    <p th:text="'介绍:'+${text}">p>

body>  

至此我们启动项目,访问:http://localhost:8097/hello查看以下效果说明:使用Thymeleaf模板进行简单字段传输并渲染到页面成功 !

Thymeleaf模板引擎学习_第1张图片

 接下来可以在页面中进行条件判断:if、unless、switch,页面效果大家可以试验一番。

  
    <div th:if="${age} == 16">... do something ...div>

    
    <div th:unless="${age} == 16">...  something ...div>

    
    <span th:switch="${age}">
        <p th:case="15">李小龙是15岁p>
        <p th:case="16">李小龙是16岁p>
        <p th:case="*">没有匹配成功的数据!p>
    span>

在Thymeleaf模板中传输对象:1.Controller层、2.HTML层、

 1   //传输对象
 2     @RequestMapping("/queryuser")
 3     public String queryuser(Model model){
 4         User user = new User();
 5         user.setName("李小龙");
 6         user.setAge("16岁");
 7         user.setText("他对我说:那小子真帅");
 8         user.setSuccess("并拍了拍了我的肩膀");
 9         model.addAttribute("myuser",user);
10         return "user";
11     }
    
    <div style="border: 1px solid red;width: 200px;height: 160px;text-align: center; ">
        <p th:text="'尊姓大名:'+${myuser.name}">p>
        <p th:text="'芳龄:'+${myuser.age}">p>
        <p th:text="'简介:'+${myuser.text}">p>
        <p th:text="'动作:'+${myuser.success}">p>
    div>

    
    <div style="border: 1px solid blue;width: 200px;height: 160px;text-align: center; ">
        <div th:object="${myuser}">
            <p th:text="'尊姓大名:'+ *{name}">p>
            <p th:text="'芳龄:'+ *{age}">p>
            <p th:text="'简介:'+ *{text}">p>
            <p th:text="'动作:'+ *{success}">p>
        div>
    div>

效果如下:

Thymeleaf模板引擎学习_第2张图片

 在Thymeleaf模板中传输List、Map集合:1.Controller层、2.HTML层、

 1     //传输List
 2     @RequestMapping("/finAllList")
 3     public String finAllList(Model model){
 4         List listuser = new ArrayList();
 5         for (int i=0;i<6;i++){
 6             User user = new User();
 7             user.setName("阿里云成立第"+i+"年");
 8             user.setAge("阿里云第"+i+"岁");
 9             user.setText("阿里云第"+i+"岁时做了"+i+"件事情");
10             user.setSuccess("并拍了"+i+"次我的肩膀");
11             listuser.add(user);
12         }
13         model.addAttribute("ListUser",listuser);
14         return "userarry";
15     }
16 
17 
18     //传输Map
19     @RequestMapping("/finAllMap")
20     public String finAllMap(Model model){
21         Map mapuser = new HashMap();
22         for (int i=0;i<6;i++){
23             User user = new User();
24             user.setName("阿里云成立第"+i+"年");
25             user.setAge("阿里云第"+i+"岁");
26             user.setText("阿里云第"+i+"岁时做了"+i+"件事情");
27             user.setSuccess("并拍了"+i+"次我的肩膀");
28             mapuser.put("mapuser"+i,user);
29         }
30         model.addAttribute("Mapuser",mapuser);
31         return "userarry";
32     }
 
    <table th:if="${not #lists.isEmpty(ListUser)}">
        <tr><td>List序号td><td>姓名td><td>年龄td><td>事件td><td>动作td><td>偶数td><td>奇数td>tr>
        <tr th:each="user,memberStat:${ListUser}">
            <td th:text="${memberStat.index + 1}">td>
            <td th:text="${user.name}">td>
            <td th:text="${user.age}">td>
            <td th:text="${user.text}">td>
            <td th:text="${user.success}">td>
            <td th:text="${memberStat.even}">td>
            <td th:text="${memberStat.odd}">td>
        tr>
    table>

    
   <table th:if="${not #maps.isEmpty(Mapuser)}">
        <tr><td>Map集合序号td><td>keytd><td>姓名td><td>年龄td><td>事件td><td>动作td><td>偶数td><td>奇数td>tr>
        <tr th:each="mapuser,memberStat:${Mapuser}">
            <td th:text="${memberStat.index + 1}">td>
            <td th:text="${mapuser.key}"/>
            <td th:text="${mapuser.value.name}">td>
            <td th:text="${mapuser.value.age}">td>
            <td th:text="${mapuser.value.text}">td>
            <td th:text="${mapuser.value.success}">td>
            <td th:text="${memberStat.even}">td>
            <td th:text="${memberStat.odd}">td>
        tr>
    table>

效果如下:

Thymeleaf模板引擎学习_第3张图片

 个人总结:

在此个人只是做了一个小例子,各大网友可自行扩展功能业务,学习是永无止境的!

 参考博文:

https://www.jianshu.com/p/a842e5b5012e

https://www.cnblogs.com/jiangbei/p/8462294.html

 

你可能感兴趣的:(Thymeleaf模板引擎学习)