SpringBoot页面展示Thymeleaf

比眉伴天荒 2023-06-30 04:28 1阅读 0赞

官方网站：[Thymeleaf][]

开发传统的javaWeb工程时，我们可以使用jsp页面模板语言，但是在springboot中已经不推荐使用了。springBoot支持如下页面模板语言

*  Thymeleaf 【官方推荐】
 *  FreeMarker

*  Velocity

*  Groovy
 *  JSP
 *  …  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]

# Thymeleaf特点 #

*  动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查询带数据的动态页面效果。这是由于它支持html原型，然后在html标签增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
 *  开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
 *  多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
 *  与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

# Thymeleaf入门 #

## 创建一个模块 ##

1、[创建一个springBoot程序][springBoot]  
2、pom.xml中引入Thymeleaf

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

# 数据展示 #

在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文件，内容如下

<!DOCTYPE HTML>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
 <title>SpringBoot模版渲染</title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 </head>
 <body>
 
 
 </body>
 </html>

可以看到在`p`标签中有`th:text`属性，这个就是`thymeleaf`的语法，它表示显示一个普通的文本信息。

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

## 显示带有样式的普通文本 ##

@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`不会转义。 
![在这里插入图片描述][20200115123150964.png]

## 显示对象 ##

我们常常需要将一个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、页面展示

上面给出了两种展现方式，一种是通过$\{属性\}，另外一种是通过\{属性\}。

**关于“$\{属性\}”和“\{属性\}”的区别？**

*  $访问完整信息，而访问指定对象中的属性内容， 如果访问的只是普通的内容两者没有区别；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 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<String> allNames = new HashSet<String>() ;
 List<Integer> allIds = new ArrayList<Integer>() ;
 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、数据处理

[Thymeleaf]: https://www.thymeleaf.org/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115110219937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[springBoot]: https://blog.csdn.net/zhizhengguan/article/details/103350388
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200115112641203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200115113208932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20200115123150964.png]: https://img-blog.csdnimg.cn/20200115123150964.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200115123906425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70