02.SpringBoot - Thymeleaf入门

有时候我们需要在页面上显示一些动态的数据,比如,登录失败的时候,我们需要显示为什么失败。 登录成功进入首页,我们需要在右上角显示 登录人的昵称。 又或者我们想查询所有学生的信息,这些数据想要在页面上显示,我们应该如何显示呢?

在以前的时候,有诸如使用jsp , 配合作用域显示 , 也有使用freemarker模板技术,如今我们给大家讲讲SpringBoot 主推的模板技术Thymeleaf. 使用这个Thymeleaf,我们很简单即可在页面上显示一些动态数据。

1. 什么是Thymeleaf

Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎,类似JSP、Velocity、FreeMarker 等模板引擎。 Thymeleaf的主要目的是提供一个优雅和格式良好的方式创建模板。为了实现这一目标,它把预定义的逻辑放在XML的标记和属性上,而不是显式放在XML标记的内容上

2. 如何使用Thymeleaf

  • 添加依赖

    compile("org.thymeleaf:thymeleaf-spring4:2.1.4.RELEASE")
    compile("org.springframework.boot:spring-boot-starter-web:1.5.15.RELEASE")
    
  • controller封装数据

    @requestMapping("test")
    public String test(){
        
        ModelAndView modelAndView = new ModelAndView();
       
        //设置模型数据
        modelAndView.addObject("name" , "林志颖");
    
        //设置跳转的目标是哪里。 list.html
        modelAndView.setViewName("list");
        
        return "index";
    }
    
  • 声明模板页面

    务必要在resources下面新建一个templates文件夹,用于存放模板页面。早前我们说的static 页面是用于存放静态页面,静态页面的内容都是固定好的,不会再改变。而要显示动态数据的页面,需要放置在resources/templates文件夹中。我们一般把这些页面称之为模板页面。

  • 页面显示数据

    <!-- 引入命名空间 -->
    <html xmlns:th="http://www.thymeleaf.org" >
    <body>
       
        <!-- thymeleaf的模板取值显示都是写在标签里面。使用th命名空间来取值 
        
         1.  取值的写法是: ${属性的名称} , 这种写法不能独立存在,
        必须放在th:xxx="${属性名称}"
    
        2. 如果数据要放置到标签的中间形成文本,那么使用th:text,
        如果数据要填充到标签的value属性中,那么使用th:value  -->
        <p th:text="${name}"></p> <br/>
        
        <!--/*@thymesVar id="name" type="java.lang.String"*/-->
        <input type="text" th:value="${name}"/>
          
    </body>  
    

    两个注意:
    1、${name} name底部会有一条红色波浪线,可以使用Alt+Enter 选择添加可解决.

  <!--/*@thymesVar id="name" type="java.lang.String"*/-->

2、html文件中的所有标签一定要有闭合标签,例如:

<meta charset="UTF-8"/>
<title>Title</title>

如果缺少闭合标签会运行报错:

01.png
02.png

3. 存值手法

  • 使用Model参数存值

     @RequestMapping("test")
     public String test(Model model){
    
         model.addAttribute("address","深圳");
    
         return "testpage";
     }
    
  • 使用ModelAndView对象存值

    @RequestMapping("test2")
    public ModelAndView test2(){
    
        ModelAndView modelAndView = new ModelAndView();
    
        //1. 存数据
        modelAndView.addObject("address","北京");
    
        //2. 指定视图
        modelAndView.setViewName("testPage");
    
        return modelAndView;
    }
    

4. 基本用法

​ 这里的基本用法,我们给大家讲两个基本的表达式即可 表达式要求务必写在 th:xxx这样的属性中。而th:xxx这样的属性又必须写在html标签中,不能单独使用。

  • 变量表达式

    用于取值 ${变量名}

  • URL表达式

    用于指定超链接 @{路径}

    如果是需要从model中取值的话,写法为

    th:href="@{${model中的name值}}"。

    有的时候我们不止需要从model中进行取值,还需写字符串与model中的值进行拼接,写法为

    th:href="@{'字符串'+${model中的name值}}"。

推荐阅读更多精彩内容