Thymeleaf学习笔记

要想使用Thhymeleaf，首先要在pom.xml文件中单独添加Thymeleaf依赖。

    org.springframework.boot
    spring-boot-starter-thymeleaf

Spring Boot默认存放模板页面的路径在src/main/view/templates，这个无论是使用什么模板语言都一样，当然默认路径是可以自定义的，不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。

在MVC的开发过程中，我们经常需要通过Controller将数据传递到页面中，让页面进行动态展示。

创建一个Controller对象，在其中进行参数的传递

@Controller
public class ThymeleafController {
    @@RequestMapping(value = "show", method = RequestMethod.GET)
    public String show(Model model){
        model.addAttribute("uid","123456789");
        model.addAttribute("name","Jerry");
        return "show";
    }
}

在SpringBoot默认的页面路径下创建show.html文件，内容如下:

html文件中： xmlns:th=“http://www.thymeleaf.org” 在html标签里必须要进行添加。
可以看到在p标签中有th:text属性，这个就是thymeleaf的语法，它表示显示一个普通的文本信息。

如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容welcome.msg=欢迎{0}光临！。可以在页面中将其显示

另外，在th:utext中还能做一些基础的数学运算

如果我们想要传递到的页面的信息，它本身是带有CSS样式的，这个时候如何在页面中将携带的样式信息也显示出来？此时我们的控制器方法这样写。

@RequestMapping(value = "showStyle", method = RequestMethod.GET)
public String showStyle(Model model){
    model.addAttribute("uid","123456789");
    model.addAttribute("name","Jerry");
    return "show_style";
}

此时页面中需要借助th:utext属性进行显示

通过浏览器查看页面源码可以看出th:utext和th:text的区别是：th:text会对<和>进行转义，而th:utext不会转义。

我们常常需要将一个bean信息展示在前端页面当中。

1、用于前端展示的VO类

public class User implements Serializable {
    private Long uid ;
    private String name ;
    private Integer age ;
    private Date birthday ;
    private Double salary ;
    //省略get/set方法
}

2、控制器方法

@RequestMapping(value = "/message/member_show", method = RequestMethod.GET)
public String memberShow(Model model) {
    User vo = new User();
    vo.setUid(12345678L);
    vo.setName("尼古拉丁.赵四");
    vo.setAge(59);
    vo.setSalary(1000.00);
    vo.setBirthday(new Date());
    model.addAttribute("member", vo);
    return "message/member_show";
}

3、页面展示

上面给出了两种展现方式，一种是通过 属性，另外一种是通过 ∗ 属性。 ∗ ∗ ∗ ∗ 关于“ {属性}，另外一种是通过*{属性}。* ***关于“ 属性，另外一种是通过∗属性。∗∗∗∗关于“{属性}”和“{属性}”的区别？**

$访问完整信息，而访问指定对象中的属性内容， 如果访问的只是普通的内容两者没有区别；

在 thymeleaf 之中提供有相应的集合的处理方法，例如：在使用 List 集合的时候可以考虑采用 get()方法获取指定索引的数据，那么在使用 Set 集合的时候会考虑使用 contains()来判断某个数据是否存在，使用 Map 集合的时候也希望可以使用 containsKey()判断某个 key 是否存在，以及使用get()根据 key 获取对应的 value，而这些功能在之前并不具备，下面来观察如何在页面中使用此类操作

1、控制器方法向页面传递一些数据，以供操作

@RequestMapping(value = "/user/set", method = RequestMethod.GET)
public String set(Model model) {
    Set allNames = new HashSet() ;
    List allIds = new ArrayList() ;
    for (int x = 0 ; x < 5 ; x ++) {
        allNames.add("boot-" + x) ;
        allIds.add(x) ;
    }
    model.addAttribute("names", allNames) ;
    model.addAttribute("ids", allIds) ;
    model.addAttribute("mydate", new java.util.Date()) ;
    return "user_set" ;
}

2、数据处理

1、页面中可以通过“@{路径}”来引用资源

2、页面之间的跳转也能通过“@{路径}”来实现

访问controller方法
访问静态页面

所有的页面模版都存在各种基础逻辑处理，例如：判断、循环处理操作。在 Thymeleaf 之中对于逻辑可以使用如下的一些运算符来完成，例如：and、or、关系比较（>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne）。

通过控制器传递一些属性内容到页面之中：

未成年人！


欢迎小三来访问！

不满足条件的判断

你还不满18岁，不能够看电影！

通过swith进行分支判断

uid为101的员工来了
uid为102的员工来了
没有匹配成功的数据！

在实际开发过程中常常需要对数据进行遍历展示，一般会将数据封装成list或map传递到页面进行遍历操作。

1、定义控制器类，向页面传递List数据和Map数据

@Controller
public class UserController {
    @RequestMapping(value = "/user/map", method = RequestMethod.GET)
    public String map(Model model) {
        Map allMembers = new HashMap();
        for (int x = 0; x < 10; x++) {
            User vo = new User();
            vo.setUid(101L + x);
            vo.setName("赵四 - " + x);
            vo.setAge(9);
            vo.setSalary(99999.99);
            vo.setBirthday(new Date());
            allMembers.put("mldn-" + x, vo);
        }
        model.addAttribute("allUsers", allMembers);
        return "user_map";
    }

    @RequestMapping(value = "/user/list", method = RequestMethod.GET)
    public String list(Model model) {
        List allMembers = new ArrayList();
        for (int x = 0; x < 10; x++) {
            User vo = new User();
            vo.setUid(101L + x);
            vo.setName("赵四 - " + x);
            vo.setAge(9);
            vo.setSalary(99999.99);
            vo.setBirthday(new Date());
            allMembers.add(vo) ;
        }
        model.addAttribute("allUsers", allMembers);
        return "user_list";
    }
}

2、list类型数据遍历

    

        
No.
UID
姓名
年龄
偶数
奇数
        

            

            

            

            

            

            

        
    

3、map类型数据遍历

    

        
No.
KEY
UID
姓名
年龄
偶数
奇数
        

            

            

            

            

            

            

            

        
    

我们常常需要在一个页面当中引入另一个页面，例如，公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。

• th:replace
• th:include
  1、新建需要被引入的页面文件，路径为"src/main/view/templates/commons/footer.html"

可以看到页面当中还存在一个变量projectName，这个变量的值可以在引入页面中通过th:with="projectName=百度"传过来。
2、引入页面中只需要添加如下代码即可

fragment语法：

  ================== fragment语法 =================

    

    

    

    

    

    

================= 加载块 ==========================

    div in this page.

th:include 和 th:replace的区别：

 
the public pagination

================= th:include 和 th:replace ================

1

2

结果如下：

 the public pagination

 the public pagination