成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

工具集核心教程 | 第三篇: Thymeleaf模板引擎入門到進(jìn)階

abson / 960人閱讀

摘要:介紹簡單說,是一個(gè)跟類似的模板引擎,它可以完全替代。不包含標(biāo)記刪除但刪除其所有的孩子。公眾號(hào)回復(fù)全棧,領(lǐng)取前端,,產(chǎn)品經(jīng)理,微信小程序,等資源合集大放送。公眾號(hào)回復(fù)面試,領(lǐng)取面試實(shí)戰(zhàn)學(xué)習(xí)資源。

thymeleaf介紹

簡單說, Thymeleaf 是一個(gè)跟 Velocity、FreeMarker 類似的模板引擎,它可以完全替代 JSP。相較與其他的模板引擎,它有如下三個(gè)極吸引人的特點(diǎn):

1.Thymeleaf 在有網(wǎng)絡(luò)和無網(wǎng)絡(luò)的環(huán)境下皆可運(yùn)行,即它可以讓美工在瀏覽器查看頁面的靜態(tài)效果,也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動(dòng)態(tài)頁面效果。這是由于它支持 html 原型,然后在 html 標(biāo)簽里增加額外的屬性來達(dá)到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時(shí)會(huì)忽略未定義的標(biāo)簽屬性,所以 thymeleaf 的模板可以靜態(tài)地運(yùn)行;當(dāng)有數(shù)據(jù)返回到頁面時(shí),Thymeleaf 標(biāo)簽會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容,使頁面動(dòng)態(tài)顯示。

2.Thymeleaf 開箱即用的特性。它提供標(biāo)準(zhǔn)和spring標(biāo)準(zhǔn)兩種方言,可以直接套用模板實(shí)現(xiàn)JSTL、 OGNL表達(dá)式效果,避免每天套模板、該jstl、改標(biāo)簽的困擾。同時(shí)開發(fā)人員也可以擴(kuò)展和創(chuàng)建自定義的方言。

3.Thymeleaf 提供spring標(biāo)準(zhǔn)方言和一個(gè)與 SpringMVC 完美集成的可選模塊,可以快速的實(shí)現(xiàn)表單綁定、屬性編輯器、國際化等功能。

標(biāo)準(zhǔn)表達(dá)式語法

它們分為四類:

1.變量表達(dá)式
2.選擇或星號(hào)表達(dá)式
3.文字國際化表達(dá)式
4.URL表達(dá)式

變量表達(dá)式

變量表達(dá)式即OGNL表達(dá)式或Spring EL表達(dá)式(在Spring術(shù)語中也叫model attributes)。如下所示:
${session.user.name}

它們將以HTML標(biāo)簽的一個(gè)屬性來表示:

  
  • 選擇(星號(hào))表達(dá)式

    選擇表達(dá)式很像變量表達(dá)式,不過它們用一個(gè)預(yù)先選擇的對(duì)象來代替上下文變量容器(map)來執(zhí)行,如下:
    *{customer.name}

    被指定的objectth:object屬性定義:

     
    ... ... ...
    文字國際化表達(dá)式

    文字國際化表達(dá)式允許我們從一個(gè)外部文件獲取區(qū)域文字信息(.properties),用Key索引Value,還可以提供一組參數(shù)(可選).

      #{main.title}  
      #{message.entrycreated(${entryId})}  

    可以在模板文件中找到這樣的表達(dá)式代碼:

       
        ...  
         
       ...  
     
    ... ...
    URL表達(dá)式

    URL表達(dá)式指的是把一個(gè)有用的上下文或回話信息添加到URL,這個(gè)過程經(jīng)常被叫做URL重寫。

    @{/order/list}

    URL還可以設(shè)置參數(shù):

    @{/order/details(id=${orderId})}

    相對(duì)路徑:

    @{../documents/report}

    讓我們看這些表達(dá)式:

       
    變量表達(dá)式和星號(hào)表達(dá)有什么區(qū)別嗎?

    如果不考慮上下文的情況下,兩者沒有區(qū)別;星號(hào)語法評(píng)估在選定對(duì)象上表達(dá),而不是整個(gè)上下文
    什么是選定對(duì)象?就是父標(biāo)簽的值,如下:

      

    Name: Sebastian.

    Surname: Pepper.

    Nationality: Saturn.

    這是完全等價(jià)于:

      

    Name: Sebastian.

    Surname: Pepper.

    Nationality: Saturn.

    當(dāng)然,美元符號(hào)和星號(hào)語法可以混合使用:

      

    Name: Sebastian.

    Surname: Pepper.

    Nationality: Saturn.

    表達(dá)式支持的語法 字面(Literals)
    文本文字(Text literals): "one text", "Another one!",…
    數(shù)字文本(Number literals): 0, 34, 3.0, 12.3,…
    布爾文本(Boolean literals): true, false
    空(Null literal): null
    文字標(biāo)記(Literal tokens): one, sometext, main,…
    
    文本操作(Text operations)
    字符串連接(String concatenation): +
    文本替換(Literal substitutions): |The name is ${name}|
    
    算術(shù)運(yùn)算(Arithmetic operations)
    二元運(yùn)算符(Binary operators): +, -, *, /, %
    減號(hào)(單目運(yùn)算符)Minus sign (unary operator): -
    
    布爾操作(Boolean operations)
    二元運(yùn)算符(Binary operators):and, or
    布爾否定(一元運(yùn)算符)Boolean negation (unary operator):!, not
    
    比較和等價(jià)(Comparisons and equality)
    比較(Comparators): >, <, >=, <= (gt, lt, ge, le)
    等值運(yùn)算符(Equality operators):==, != (eq, ne)
    
    條件運(yùn)算符(Conditional operators)
    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)
    

    所有這些特征可以被組合并嵌套:

    "User is of type " + (${user.isAdmin()} ? "Administrator" : (${user.type} ?: "Unknown"))
    常用th標(biāo)簽都有那些?

                <
                關(guān)鍵字 功能介紹 案例
                th:id 替換id
                th:text 文本替換

                description

                th:utext 支持html的文本替換

                conten

                th:object 替換對(duì)象
                th:value 屬性賦值
                th:with 變量賦值運(yùn)算
                th:style 設(shè)置樣式 th:style=""display:" + @{(${sitrue} ? "none" : "inline-block")} + """
                th:onclick 點(diǎn)擊事件 th:onclick=""getCollect()""
                th:each 屬性賦值 tr th:each="user,userStat:${users}">
                th:if 判斷條件
                th:unless th:if判斷相反 Login
                th:href 鏈接地址 Login />
                th:switch 多路選擇 配合th:case 使用
                th:case th:switch的一個(gè)分支

                User is an administrator

                th:fragment 布局標(biāo)簽,定義一個(gè)代碼片段,方便其它地方引用
                th:include 布局標(biāo)簽,替換內(nèi)容到引入的文件 />
                th:replace 布局標(biāo)簽,替換整個(gè)標(biāo)簽到引入的文件
                th:selected selected選擇框 選中 th:selected="(${xxx.id} == ${configObj.dd})"
                th:src 圖片類地址引入
                th:inline 定義js腳本可以使用變量

                js附加代碼:

                /*[+
                var msg = "This is a working application";
                +]*/

                js移除代碼:

                /*[- */
                var msg = "This is a non-working template";
                /* -]*/
                6、內(nèi)嵌變量

                為了模板更加易用,Thymeleaf還提供了一系列Utility對(duì)象(內(nèi)置于Context中),可以通過#直接訪問:

                 `dates` : `java.util.Date`的功能方法類。
                 `calendars` : 類似`#dates`,面向`java.util.Calendar`
                 `numbers` : 格式化數(shù)字的功能方法類
                 `strings` : 字符串對(duì)象的功能類,`contains,startWiths,prepending/appending`等等。
                 `objects`: 對(duì)`objects`的功能類操作。
                 `bools`: 對(duì)布爾值求值的功能方法。
                 `arrays`:對(duì)數(shù)組的功能類方法。
                 `lists`: 對(duì)`lists`功能類方法
                 `sets`
                 `maps`
                 `...`
                

                下面用一段代碼來舉例一些常用的方法:

                dates
                /*
                 * Format date with the specified pattern
                 * Also works with arrays, lists or sets
                 */
                ${#dates.format(date, "dd/MMM/yyyy HH:mm")}
                ${#dates.arrayFormat(datesArray, "dd/MMM/yyyy HH:mm")}
                ${#dates.listFormat(datesList, "dd/MMM/yyyy HH:mm")}
                ${#dates.setFormat(datesSet, "dd/MMM/yyyy HH:mm")}
                
                /*
                 * Create a date (java.util.Date) object for the current date and time
                 */
                ${#dates.createNow()}
                
                /*
                 * Create a date (java.util.Date) object for the current date (time set to 00:00)
                 */
                ${#dates.createToday()}
                strings
                /*
                 * Check whether a String is empty (or null). Performs a trim() operation before check
                 * Also works with arrays, lists or sets
                 */
                ${#strings.isEmpty(name)}
                ${#strings.arrayIsEmpty(nameArr)}
                ${#strings.listIsEmpty(nameList)}
                ${#strings.setIsEmpty(nameSet)}
                
                /*
                 * Check whether a String starts or ends with a fragment
                 * Also works with arrays, lists or sets
                 */
                ${#strings.startsWith(name,"Don")}                  // also array*, list* and set*
                ${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*
                
                /*
                 * Compute length
                 * Also works with arrays, lists or sets
                 */
                ${#strings.length(str)}
                
                /*
                 * Null-safe comparison and concatenation
                 */
                ${#strings.equals(str)}
                ${#strings.equalsIgnoreCase(str)}
                ${#strings.concat(str)}
                ${#strings.concatReplaceNulls(str)}
                
                /*
                 * Random
                 */
                ${#strings.randomAlphanumeric(count)}
                使用thymeleaf布局

                使用thymeleaf布局非常的方便

                定義代碼片段:

                © 2016

                在頁面任何地方引入:

                 
                  

                th:includeth:replace區(qū)別,include只是加載,replace是替換

                返回的HTML如下:

                 
                   
                © 2016
                © 2016

                下面是一個(gè)常用的后臺(tái)頁面布局,將整個(gè)頁面分為頭部,尾部、菜單欄、隱藏欄,點(diǎn)擊菜單只改變content區(qū)域的頁面

                
                  
                

                任何頁面想使用這樣的布局值只需要替換中見的 content模塊即可

                 
                   
                      
                ...

                也可以在引用模版的時(shí)候傳參

                
                

                layout 是文件地址,如果有文件夾可以這樣寫 fileName/layout:htmlhead
                htmlhead 是指定義的代碼片段 如th:fragment="copy"

                參考

                新一代Java模板引擎Thymeleaf
                Thymeleaf基本知識(shí)
                thymeleaf總結(jié)文章
                Thymeleaf 模板的使用
                thymeleaf 學(xué)習(xí)筆記

                寫在最后

                歡迎關(guān)注、喜歡、和點(diǎn)贊后續(xù)將推出更多的工具集教程,敬請(qǐng)期待。
                歡迎關(guān)注我的微信公眾號(hào)獲取更多更全的學(xué)習(xí)資源,視頻資料,技術(shù)干貨!

                公眾號(hào)回復(fù)“學(xué)習(xí)”,拉你進(jìn)程序員技術(shù)討論群干貨資源第一時(shí)間分享。

                公眾號(hào)回復(fù)“視頻”,領(lǐng)取800GJava視頻學(xué)習(xí)資源。

                公眾號(hào)回復(fù)“全棧”,領(lǐng)取1T前端,Java,產(chǎn)品經(jīng)理,微信小程序,Python等資源合集大放送。





                公眾號(hào)回復(fù)“慕課”,領(lǐng)取1T慕課實(shí)戰(zhàn)學(xué)習(xí)資源。








                公眾號(hào)回復(fù)“實(shí)戰(zhàn)”,領(lǐng)取750G項(xiàng)目實(shí)戰(zhàn)學(xué)習(xí)資源。

                公眾號(hào)回復(fù)“面試”,領(lǐng)取8G面試實(shí)戰(zhàn)學(xué)習(xí)資源。



                文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

                轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/77592.html

                相關(guān)文章

                • 具集核心教程 | 第四篇: Velocity模板引擎入門進(jìn)階

                  摘要:是一個(gè)基于的模板引擎。模板中未被定義的變量將被認(rèn)為是一個(gè)字符串。公眾號(hào)回復(fù)全棧,領(lǐng)取前端,,產(chǎn)品經(jīng)理,微信小程序,等資源合集大放送。公眾號(hào)回復(fù)面試,領(lǐng)取面試實(shí)戰(zhàn)學(xué)習(xí)資源。 Velocity是一個(gè)基于java的模板引擎(template engine)。它允許任何人僅僅簡單的使用模板語言(template language)來引用由java代碼定義的對(duì)象。 當(dāng)Velocity應(yīng)用于web...

                  leon 評(píng)論0 收藏0
                • Spring Boot 2 快速教程:WebFlux 集成 Thymeleaf(五)

                  摘要:數(shù)據(jù)和信息是不可分離的,數(shù)據(jù)是信息的表達(dá),信息是數(shù)據(jù)的內(nèi)涵。數(shù)據(jù)本身沒有意義,數(shù)據(jù)只有對(duì)實(shí)體行為產(chǎn)生影響時(shí)才成為信息。主要目標(biāo)是為開發(fā)提供天然的模板,并且能在里面準(zhǔn)確的顯示。目前是自然更加推薦。 這是泥瓦匠的第105篇原創(chuàng) 文章工程: JDK 1.8 Maven 3.5.2 Spring Boot 2.1.3.RELEASE 工程名:springboot-webflux-4-thym...

                  姘存按 評(píng)論0 收藏0
                • Spring Boot 的簡單教程(二) web頁面開發(fā)(Thymeleaf篇)

                  摘要:頁面內(nèi)容展示在之前的示例中,我們都是通過來處理請(qǐng)求,所以返回的內(nèi)容為對(duì)象。啟動(dòng)程序后,訪問。運(yùn)行項(xiàng)目,輸入項(xiàng)目地址再次查看頁面顯示內(nèi)容,內(nèi)容被替換了。默認(rèn)情況下,它排第一位。 Web頁面內(nèi)容展示 在之前的示例中,我們都是通過@RestController來處理請(qǐng)求,所以返回的內(nèi)容為json對(duì)象。我們現(xiàn)在需要實(shí)現(xiàn)更復(fù)雜的頁面顯示,就需要用到模板引擎來幫我實(shí)現(xiàn)了。 Spring Boot默...

                  dreamtecher 評(píng)論0 收藏0

                發(fā)表評(píng)論

                0條評(píng)論

                abson

                |高級(jí)講師

                TA的文章

                閱讀更多
                最新活動(dòng)
                閱讀需要支付1元查看