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常用语法传送门

  • 相关阅读:
    代码控制数据流量开关
    用wifi来调试应用程序
    详细解读LruCache类
    修改博客园默认的代码字体大小
    通过Gson解析Json数据
    Docker、Kubernetes的 CICD实现思路
    React中路由传参及接收参数的方式
    微信小程序开发工具调试没问题,真机调试Provisional headers are shown
    物联网卡三码
    【微信开发】-- 企业转账到用户
  • 原文地址:https://www.cnblogs.com/yulianggo/p/10460987.html
Copyright © 2011-2022 走看看