java web之thymeleaf教程(一)----快速入门

Thymeleaf是个XML/XHTML/HTML5模板引擎，可以用于Web与非Web应用。

thymeleaf教程

本教程涵盖了常见的前端操作，比如，判断，循环，引入模板，常用函数（日期格式化，字符串操作）下拉，js和css中使用，基本可以应对一般场景。

怎么使用？

前端html页面标签中引入如下：

表达式

• 简单表达式 

  • 可用值表达式(后台设置): ${…}

  • 所有可用值表达式: *{…}

   

  比如*{name} 从可用值中查找name，如果有上下文，比如上层是object，则查object中的name属性。

• 消息表达式: #{…} 

  国际化时使用，也可以使用内置的对象，比如date格式化数据

• 链接表达式: @{…} 
  用来配合link src href使用的语法
• 片段表达式: ~{…} 
  用来引入公共部分代码片段，并进行传值操作使用的语法。

• 文字

  • 文本： ‘one text’,’another text’,…
  • 数字： 1,2,1.2，…
  • 布尔: true,false
  • 空值：null
  • 单词: something,main,name,…

• 文本操作

  • 链接：+
  • 替换：|The name is ${name}| 
    html 
链接地址： 
//渲染后的结果 
链接地址： 

• 数学操作

  • 二元操作：+, - , * , / , %
  • 一元操作: - （负）

• 布尔操作

  • 一元 : and or
  • 二元 : !,not

• 比较

  • 比较：> , < , >= , <= ( gt , lt , ge , le )
  • 等于：== , != ( eq , ne )

• 条件

  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • Default: (value) ?: (defaultvalue)

• 无操作 
  使用_ 来禁止转义。

支持的操作

html5的操作支持：

th:abbr          th:accept             th:accept-charset
th:accesskey             th:action             th:align
th:alt             th:archive             th:audio
th:autocomplete             th:axis             th:background
th:bgcolor             th:border             th:cellpadding
th:cellspacing             th:challenge             th:charset
th:cite             th:class             th:classid
th:codebase             th:codetype             th:cols
th:colspan             th:compact             th:content
th:contenteditable             th:contextmenu             th:data
th:datetime             th:dir             th:draggable
th:dropzone             th:enctype             th:for
th:form             th:formaction             th:formenctype
th:formmethod             th:formtarget             th:fragment
th:frame             th:frameborder             th:headers
th:height             th:high             th:href
th:hreflang             th:hspace             th:http-equiv

th:icon             th:id             th:inline
th:keytype             th:kind             th:label
th:lang             th:list             th:longdesc
th:low             th:manifest             th:marginheight
th:marginwidth             th:max             th:maxlength
th:media             th:method             th:min
th:name            th:onabort            th:onafterprint
th:onbeforeprint            th:onbeforeunload            th:onblur
th:oncanplay            th:oncanplaythrough            th:onchange
th:onclick            th:oncontextmenu            th:ondblclick
th:ondrag            th:ondragend            th:ondragenter
th:ondragleave            th:ondragover            th:ondragstart
th:ondrop            th:ondurationchange            th:onemptied
th:onended            th:onerror            th:onfocus
th:onformchange            th:onforminput            th:onhashchange
th:oninput            th:oninvalid            th:onkeydown
th:onkeypress            th:onkeyup            th:onload
th:onloadeddata            th:onloadedmetadata            th:onloadstart
th:onmessage            th:onmousedown            th:onmousemove
th:onmouseout            th:onmouseover            th:onmouseup
th:onmousewheel            th:onoffline            th:ononline
th:onpause            th:onplay            th:onplaying
th:onpopstate            th:onprogress            th:onratechange
th:onreadystatechange            th:onredo            th:onreset
th:onresize            th:onscroll            th:onseeked
th:onseeking            th:onselect            th:onshow
th:onstalled            th:onstorage            th:onsubmit
th:onsuspend            th:ontimeupdate            th:onundo
th:onunload            th:onvolumechange            th:onwaiting
th:optimum            th:pattern            th:placeholder
th:poster            th:preload            th:radiogroup
th:rel            th:rev            th:rows
th:rowspan            th:rules            th:sandbox
th:scheme            th:scope            th:scrolling
th:size            th:sizes            th:span
th:spellcheck            th:src            th:srclang
th:standby            th:start            th:step
th:style            th:summary            th:tabindex
th:target            th:title            th:type
th:usemap            th:value            th:valuetype
th:vspace            th:width            th:wrap

th:vspace            th:width            th:wrap
th:xmlbase            th:xmllang            th:xmlspace

布尔类型

th:async th:autofocus th:autoplay
th:checked th:controls th:declare
th:default th:defer th:disabled
th:formnovalidate th:hidden th:ismap
th:loop th:multiple th:novalidate
th:nowrap th:open th:pubdate
th:readonly th:required th:reversed
th:scoped th:seamless th:selected

判断操作

thymeleaf提供了几种判断，if、switch

• 后台数据

public class TestVo {
    private String name;
    private  Integer Score;
    private  Integer male;
    private Date birthday;

    public TestVo(String name, Integer score, Date birthday, Integer male) {
        this.name = name;
        Score = score;
        this.male = male;
        this.birthday = birthday;
    }

@RequestMapping("/test01")
    public String thymeleaf(ModelMap map){
        List testVos=new ArrayList<>();
        testVos.add(new TestVo("数学",10,new Date(),1));
        testVos.add(new TestVo("数学0001",70,new Date(),2));
        testVos.add(new TestVo("数学01",100,new Date(),3));
        map.put("test",testVos);
        return "/back/import/test";
    }

• 前端语法

  

       

           

       
       

            

                
                
差
                
中
                
良
                
优
                
超级优秀
            
            
            

                
                
差
                
                
及格
            
            

                

                    男
                    女
                    
                    未知
                
            

       
   

• 结果

差 
中 
超级优秀

差 
及格 
及格

男 
女

模板操作

主要引入公共头部和底部相关代码使用 ，当然也可以其他地方使用 
- 示例

底部模板代码

    © 2016 xxx

Springboot整合引入模块

文本和带格式文本

用来输入内容到标签内部，而不是attr中。分为th:text和th:utext两种，后者可以渲染文本中的标签。 
- th:utext

    map.put("msgutext","1111");

结果：被渲染了

• th:text

结果:原样输出到页面。

外围包裹–block

有时候需要在代码外部加层条件，但写div之类的又影响样式，此情况下你可以用下面这种方式:

    
        及格啦
    

循环

遍历元素

• 示例：

循环下标判断

 List list=new ArrayList();
        list.add("1s");
        list.add("2s");
        list.add("3s");
        map.put("list",list);

    111
    
        
            
        

常用操作

• 日期格式化

• 字符截取长度

• 下拉选择

 
            请选择
            
        

js取值

有时候需要传递参数到js中，按如下方式：

• 进阶 
  ps: 下面涉及到thymeleaf的语法出，可以替换成其他thymeleaf的语法来用

css取值

首先需要后台设置classname、align的值，之后按如下方式：