zoukankan      html  css  js  c++  java
  • Thymeleaf初体验

    由于spring boot取消了对velocity模板语言的支持,因此只能换成其他语言了,现在我选择Thymeleaf,毕竟官方推荐。

    一上手Thymeleaf非常不习惯,它跟常用的Java语法格式相差甚远。甚至跟HTML语言非常相似。

    下面是Java项目常用的Thymeleaf语法,我一一做了实验:

    Thymeleaf语言风格

      在进行一些简单的操作,例如,分支,循环等。Thymeleaf会作为一种标签的属性,在属性中取值并显示。这就是它的风格。

      例如:

        Controller包中的文件:

    1 @Controller
    2 public class deal {
    3     @RequestMapping(path = {"/hello"})
    4     public String Hello_World(Model model) {
    5         model.addAttribute("aaa", "naive");
    6         model.addAttribute("l", "<br/>");
    7         return "Hello";
    8     }

        Templates包中的模板:

     1 <html>
     2 <head>
     3     <title>Welcome!</title>
     4 </head>
     5 <body>
     6 <!--/*
     7     fdsfd
     8     <h1>Welcome</h1>
     9 */-->
    10     <p th:text=${aaa}></p>
    11     <p>th:utext=${aaa}</p>
    12     <p th:utext=${aaa}>th:utext=${aaa}</p>
    13     //
    14     <p th:text=${aaa}></p>
    15     <p th:utext=${aaa}></p>
    16     <p th:utext=${l}></p>
    17 </body>
    18 </html>

       显示结果:

     

      总结:只有把一些标签属性,例如th:text,th:utext等放到像<p>这样的标签内,网页才能正常显示Controller文件定义好的变量值。因此,要学好Thymeleaf,需要把标签学好,需要把HTML学好。。。

    注释

      建议用<!--/*    *-->这个,可以注释多行。

    1 <!--/*
    2     fdsfd
    3     <h1>Welcome</h1>
    4 */-->

       同时取消注释也简单。

    1 <!--/*/
    2     fdsfd
    3     <h1>Welcome</h1>
    4 /*/-->

    显示文本

      th:text或者th:utext

    1 <p th:text=${aaa}></p>
    2 <p>th:utext=${aaa}</p>
    3 <p th:utext=${aaa}>th:utext=${aaa}</p>

      显示结果:

      

       总结:th:text都可以显示文本,把属性放到<p></p>标签里面,可以显示C层变量(第一行)。放到<p></p>中间夹住,不能取值(第二行)。同时标签中的值会取消夹住地方的值。(第三行)

      th:text不能解析标签,但是th:utext能。如下:

    1 model.addAttribute("l", "<br/>");

      使用l变量:

    1 <p th:text=&{l}></p>

      出错:There was an unexpected error (type=Internal Server Error, status=500).Could not parse as expression: "&{l}" (template: "Hello" - line 13, col 6)。它表示th:text无法解析l变量中的标签。

      换一种写法:

    1     <!--/*-->
    2         <p th:text=&{l}></p>
    3     <!--*/-->
    4     <p th:utext=${l}></p>
    5   <p>th:utext=${aaa}</p>

      显示结果:

      

    分支结构

      传送门

       注:4.6节后面,全是干货。

    单分支1

        若if成立,则显示<div></div>中间的文本。否则不显示。th:unless是不成立显示。

    1     <div th:if="${aaa} == false"> 
    2         new block
    3     </div>

      由于aaa不为false,因此new block不会显示出来。

      如果将false改为'naive'?

    1     <div th:if="${aaa} == 'naive'"> 
    2         new block
    3     </div>

      结果显示new block文字。

    单分支2

    <p th:text="${aaa}" th:if="${not #strings.isEmpty(aaa)}"></p>

      若if为true,显示text部分,否则不显示。

    多分支

      多分支跟其他语言一样。使用:?三目运算符。(condition)?(then):(else)

        <p th:text="${aaa}? 'even' : 'odd'"></p>

      当aaa为真,""里面是even,否则""里面是odd。

    循环结构

      th:each逐个取出liststring中的值,放到n中,最后再一次显示每个n。代码如下:

      Controller包:

    1     List<String> ls = Arrays.asList(new String[] {"1","111", "2323a"});
    2     model.addAttribute("liststring", ls);

      向Templates包传递ls变量。

      Templates包:

    1     <div>
    2         <p th:text="${n}" th:each="n : ${liststring}"> </p>
    3     </div>

       结果显示:

      

     

    Thymeleaf调用方法

      单分支中有行代码:

    <p th:text="${aaa}" th:if="${not #strings.isEmpty(aaa)}"></p>

       strings.isEmpty()方法是Thymeleaf中自己实现的方法。

      有时候在模板中需要进行一些复杂的操作,手写不太现实,Thymeleaf早就给我们想好了。文档第19章讲的就是Thymeleaf的一些类,可以使用它们调用需要的方法。

     调用自定义类方法

      在新建的包model中建一个类:

     1 package cn.scu.toutiao.model;
     2 
     3 public class User {
     4     
     5     public User(String name) {
     6         this.name = name;    
     7         }
     8     
     9     public String name;
    10     public String setName(String name) {
    11         this.name = name;
    12         return this.name;
    13     }
    14 }

      在controller包中传入这个类的对象:

    model.addAttribute("user", new User("aw12"));

      在Templates包中显示:

    1  <p th:text="${user.name}"> </p>
    2  <p th:text="${user.setName('fire on fire')}"> </p>

      显示结果:

      

       总结:参数不能用双引号,要用单引号。方法前不加#。

    调用已有类的方法

      类在文档中,记住在方法前加上#。

    引入其它文件

      有时候,每个页面的头尾都是一样的。这时候创建另一个文件,存放头部或者尾部,再引入即可。

      例如:在Templates包中新建一个页面footer.html。

    1 <div th:fragment="copy">
    2 i am strong man manman hahahah~~~
    3 </div>

      在hello.html中引入:

    <div th:insert="footer :: copy"> </div>

      就可以将footer.html文件作为hello.html文件的一部分显示了。

      显示结果:

      

      技术总结:

      1.在被引入的文件中用th:fragment标明可以被应用的那一部分的名字。

       2.在引入的文件用th:insert表示引入哪个文件的哪一部分。"文件名 :: 部分名"。

      其它的内容与上同理,现在已经可以在Thymeleaf中放飞自我了。同时,继续学习HTML吧。

      o(╯□╰)o ╯▂╰ ╯0╰ ╯︿╰ ╯ω╰ ╯﹏╰ ╯△╰ ╯▽╰ +▂+ +0+ +︿+ +ω+ +﹏+ +△+ +▽+ ˋ▂ˊ

      Thymeleaf常用语法传送门

  • 相关阅读:
    中国石油昆仑加油卡
    157 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 02 异常内容简介
    156 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 01 Java常用工具类简介
    155 01 Android 零基础入门 02 Java面向对象 07 Java多态 07 多态知识总结 01 多态总结
    154 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 05 匿名内部类
    153 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 04 方法内部类
    152 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 03 静态内部类
    151 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 02 成员内部类
    150 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类概述 01 内部类概述
    149 01 Android 零基础入门 02 Java面向对象 07 Java多态 05 接口(重点)07 接口的继承
  • 原文地址:https://www.cnblogs.com/yulianggo/p/10460987.html
Copyright © 2011-2022 走看看