学院评估+++网站建设整改,昌平区手机网站制作服务,软件开发工具属于,做网站和管理系统参考网址: https://blog.csdn.net/mlin_123/article/details/51816533 1.1 Thymeleaf 在有网络和无网络的环境下皆可运行#xff0c;而且完全不需启动WEB应用#xff0c;即它可以让美工在浏览器查看页面的静态效果#xff0c;也可以让程序员在服务器查看带数据的动态页面效果…参考网址: https://blog.csdn.net/mlin_123/article/details/51816533 1.1 Thymeleaf 在有网络和无网络的环境下皆可运行而且完全不需启动WEB应用即它可以让美工在浏览器查看页面的静态效果也可以让程序员在服务器查看带数据的动态页面效果。 这是由于它支持 html 原型然后在 html 标签里增加额外的属性来达到模板数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性所以 thymeleaf 的模板可以静态地运行 当有数据返回到页面时Thymeleaf 标签会动态地替换掉静态内容使页面动态显示。
1.2 Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言可以直接套用模板实现JSTL、 OGNL表达式效果避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
1.3 Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块可以快速的实现表单绑定、属性编辑器、国际化等功能。 相比于其他的模板引擎Thymeleaf最大的特点是通过HTML的标签属性渲染标签内容以下是一个Thymeleaf模板例子
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.orgheadtitleGood Thymes Virtual Grocery/titlemeta http-equivContent-Type contenttext/html; charsetUTF-8 /link relstylesheet typetext/css mediaall href../../css/gtvg.css th:href{/css/gtvg.css} //headbodyp th:text#{home.welcome}Welcome to our grocery store!/p/body
/html 这是一段标准的HTML代码这也就意味着通过浏览器直接打开它是可以正确解析它的结构并看到页面的样子。相比于其他的模板引擎在指定的位置通过 ${} 等表达式进行渲染Thymeleaf则是一种针对HTML/XML定制的模板语言当然它可以被扩展它通过标签中的th:text属性来填充该标签的一段内容。上例中 p th:text#home.welcome} Welcome to our grocery store!/p意味着p标签中的内容会被表达式 #{home.welcome} 的值所替代无论模板中它的内容是什么之所以在模板中“多此一举“地填充它的内容完全是为了它能够作为原型在浏览器中直接显示出来。 标准表达式语法 变量
Thymeleaf模板引擎在进行模板渲染时还会附带一个Context存放进行模板渲染的变量在模板中定义的表达式本质上就是从Context中获取对应的变量的值
pToday is: span th:text${today}13 february 2011/span./p假设today的值为2016年7月14日那么渲染结果为pToday is: 2016年7月14日./p。可见Thymeleaf的基本变量和JSP一样都使用${.}表示获取变量的值。 url 处理
URL在Web应用模板中占据着十分重要的地位需要特别注意的是Thymeleaf对于URL的处理是通过语法{…}来处理的。
Thymeleaf支持绝对路径URL
a th:href{http://www.thymeleaf.org}Thymeleaf/a
同时也能够支持相对路径URL1. 当前页面相对路径URL——user/login.html通常不推荐这样写。2. Context相关URL——/static/css/style.css
另外如果需要Thymeleaf对URL进行渲染那么务必使用th:hrefth:src等属性下面是一个例子:!-- Will produce http://localhost:8080/gtvg/order/details?orderId3 (plus rewriting) --
a hrefdetails.html th:href{http://localhost:8080/gtvg/order/details(orderId${o.id})}view/a
下面两种url写法是比较推荐使用的,
!-- Will produce /order/details?orderId3 (plus rewriting) --
a hrefdetails.html th:href{/order/details(orderId${o.id})}view/a
!-- Will produce /order/3/details (plus rewriting) --
a hrefdetails.html th:href{/order/{orderId}/details(orderId${o.id})}view/a几点说明
上例中URL最后的(orderId${o.id})表示将括号内的内容作为URL参数处理该语法避免使用字符串拼接大大提高了可读性, {...}表达式中可以通过{orderId}访问Context中的orderId变量,{/order}是Context相关的相对路径在渲染时会自动添加上当前Web应用的Context名字假设context名字为app那么结果应该是/app/order 字符串替换
很多时候可能我们只需要对一大段文字中的某一处地方进行替换可以通过字符串拼接操作完成span th:textWelcome to our application, ${user.name} !一种更简洁的方式是span th:text|Welcome to our application, ${user.name}!|, 当然这种形式限制比较多|…|中只能包含变量表达式${…}不能包含其他常量、条件表达式等。 运算符
在表达式中可以使用各类算术运算符例如, -, *, /, %
th:withisEven(${prodStat.count} % 2 0)
逻辑运算符, , ,,!都可以使用, , , (gt, lt, ge, le) , ! ( eq , ne ) gtgreat than大于 gegreat equal大于等于 eqequal等于 ltless than小于 leless equal小于等于 nenot equal不等于! 唯一需要注意的是使用,时需要用它的HTML转义符
th:if${prodStat.count} gt 1
th:textExecution mode is ( (${execMode} dev)? Development : Production) 循环渲染列表数据是一种非常常见的场景例如现在有n条记录需要渲染成一个表格table该数据集合必须是可以遍历的使用th:each标签
bodyh1Product list/h1tabletrthNAME/ththPRICE/ththIN STOCK/th/trtr th:eachprod : ${prods}td th:text${prod.name}Onions/tdtd th:text${prod.price}2.41/tdtd th:text${prod.inStock}? #{true} : #{false}yes/td/tr/tablepa href../home.html th:href{/}Return to home/a/p
/body
可以看到需要在被循环渲染的元素这里是中加入th:each标签其中th:eachprod : ${prods}意味着对集合变量prods进行遍历循环变量是prod在循环体中可以通过表达式访问 条件求值
If/Unless
Thymeleaf中使用th:if和th:unless属性进行条件判断下面的例子中a标签只有在th:if中条件成立时才显示a th:href{/login} th:if${session.user ! null}Login/a
th:unless于th:if恰好相反只有表达式中的条件不成立才会显示其内容。Switch
Thymeleaf同样支持多路选择Switch结构
div th:switch${user.role}p th:caseadminUser is an administrator/pp th:case#{roles.manager}User is a manager/p
/div默认属性default可以用*表示
div th:switch${user.role}p th:caseadminUser is an administrator/pp th:case#{roles.manager}User is a manager/pp th:case*User is some other thing/p
/div Utilities
为了模板更加易用Thymeleaf还提供了一系列Utility对象内置于Context中可以通过#直接访问
- #dates
- #calendars
- #numbers
- #strings
- arrays
- 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)} 综合实例 (参考网址: https://blog.csdn.net/pdw2009/article/details/44700897) (thymeleaf手册参考网址https://blog.csdn.net/zrk1000/article/details/72667478)迭代!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 1/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 1: iteration/h1h2Product list/h2tabletheadtrthDescription/ththPrice/ththAvailable from/th/tr/theadtbody th:removeall-but-first tr th:eachproduct:${productList}td th:text${product.description}Red Chair/tdtd th:text${$ #numbers.formatDecimal(product.price, 1, 2)}$123/tdtd th:text${#dates.format(product.availableFrom, yyyy-MM-dd)}2014-12-01/td/trtrtdWhite table/tdtd$200/tdtd15-Jul-2013/td/trtrtdReb table/tdtd$200/tdtd15-Jul-2013/td/trtrtdBlue table/tdtd$200/tdtd15-Jul-2013/td/tr/tbody/table/body/html 迭代统计!DOCTYPE html html xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 2/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Solution for exercise 2: iteration stats/h1h2Product list/h2tabletheadtrthIndex/ththDescription/ththPrice/ththAvailable from/th/tr/theadtbody th:removeall-but-first !-- index: 当前的索引从0开始 count: 当前的索引从1开始 size总数 current: even/odd: first last --tr th:eachproduct, productStat: ${productList}td th:text${productStat.count}1/td !--注意这里和上面的差别--td th:text${product.description}Red chair/tdtd th:text${$ #numbers.formatDecimal(product.price, 1, 2)}$350/tdtd th:text${#dates.format(product.availableFrom, dd-MMM-yyyy)}28-Jun-2013/td/trtrtd2/tdtdWhite table/tdtd$200/tdtd15-Jul-2013/td/trtrtd3/tdtdReb table/tdtd$200/tdtd15-Jul-2013/td/trtrtd4/tdtdBlue table/tdtd$200/tdtd15-Jul-2013/td/tr/tbody/table/body/html 条件判断 !DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 3/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 3: conditions/h1h2Product list/h2tabletheadtrthDescription/ththPrice/ththAvailable from/thth/th/tr/theadtbodytr th:eachproduct : ${productList}td th:text${product.description}Red chair/tdtd th:text${$ #numbers.formatDecimal(product.price, 1, 2)}$350/tdtd th:text${#dates.format(product.availableFrom, dd-MMM-yyyy)}28-Jun-2013/tdtdspan th:if${product.price lt 100} classofferSpecial offer!/span/td/tr/tbody/table/body/html 更多条件判断 !DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 4/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 4: more on conditions/h1h2Customer list/h2tabletheadtrthFirst name/ththLast name/ththGender/ththPayment method/ththBalance/th/tr/theadtbody th:removeall-but-firsttr th:eachcustomer : ${customerList}td th:text${customer.firstName}Peter/tdtd th:text${customer.lastName}Jackson/td!-- Use th:switch for selecting content based on ${customer.gender}.As genre can be null if unknown, better use ${customer.gender?.name()}for obtaining its name.--td th:switch${customer.gender?.name()}img th:caseMALE src../../../images/male.png th:src{/images/male.png} altMale / !-- Use /images/male.png image --img th:caseFEMALE src../../../images/female.png th:src{/images/female.png} altFemale / !-- Use /images/female.png image --span th:case*Unknown/span/tdtdspan th:text${customer.paymentMethod.description}Direct debit/span!-- Show next message only when paymentMethod is not CREDIT_CARD --span th:unless${customer.paymentMethod.name() CREDIT_CARD} classwarnPayment must be done in the next 4 days/span/td!-- Add classenhanced when balance is greater than 10000 --td th:class${customer.balance gt 10000} ? enhanced th:text${customer.balance}350/td/trtrtdMary/tdtdJohanson/tdtdimg src../../../images/female.png //tdtdspanCredit card/span/tdtd5000/td/trtrtdRobert/tdtdAllen/tdtdimg src../../../images/male.png //tdtdspanCredit card/spanspan classwarnPayment must be done in the next 4 days/span/tdtd classenhanced50000/td/tr/tbody/table/body/html Spring表达式语言 !DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 5/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Solution for exercise 5: Spring Expression language/h1h2Arithmetic expressions/h2p classlabelFour multiplied by minus six multiplied by minus two module seven:/pp classanswer th:text${4 * -6 * -2 % 7}123/ph2Object navigation/h2p classlabelDescription field of paymentMethod field of the third element of customerList bean:/pp classanswer th:text${customerList[2].paymentMethod.description}Credit card/ph2Object instantiation/h2p classlabelCurrent time milliseconds:/pp classanswer th:text${new java.util.Date().getTime()}22-Jun-2013/ph2T operator/h2p classlabelRandom number:/pp classanswer th:text${T(java.lang.Math).random()}123456/p/body/html 超链接!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 6/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 6: links/h1h2Product actions/h2ullia href# th:href{/exercise11/product.html(actionview)}View product/a/lilia href# th:href{/exercise11/product.html(actionedit)}Edit product/a/li/ul/body/html 表单!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 7/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Solution for exercise 7: forms/h1h2Customer edition/h2form actionsaveCustomer.html th:action{/exercise12/saveCustomer.html} th:object${customer} methodpostinput typehidden th:field*{id} /label forfirstNameFirst name:/labelinput typetext th:field*{firstName} valueJohn /label forlastNameLast name:/labelinput typetext th:field*{lastName} valueWayne /Genre:div th:eachgender : ${genders} classradioinput typeradio th:value${gender} th:field*{gender} /label th:for${#ids.prev(gender)} th:text${gender.description}Male/label/divdiv th:removeall classradioinput typeradio /labelFemale/label/divlabel forpaymentMethodPayment method:/labelselect th:field*{paymentMethod} th:removeall-but-firstoption th:eachpaymentMethod : ${paymentMethods}th:value${paymentMethod} th:text${paymentMethod.description}Credit card/optionoptionAnother payment method/optionoptionAnother payment method/option/selectlabel forbalanceBalance (dollars):/labelinput typetext th:field*{balance} size10 value2500 /input typesubmit //form/body/html 内联
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 8/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Solution for exercise 8: inlining/h1h2Birthday email/h2form action# methodpostlabel forbodyMessage body:/label
textarea idbody namebody th:inlinetext
Dear [[${customerName}]],
it is our sincere pleasure to congratulate your in your birthday:Happy birthday [[${customerName}]]!!!
See you soon, [[${customerName}]].
Regards,The Thymeleaf team
/textareainput typesubmit valueSend mail //form/body
/html 转义和非转义文本!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 9/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Solution for exercise 9: escaped and unescaped text/h1div th:text${html}Some escaped text/divdiv th:utext${html}Some unescaped text/div/body/html 国际化!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitle th:text#{tutorial.exercise10}Thymeleaf tutorial: exercise 10/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1 th:text#{tutorial.exercise4}Thymeleaf tutorial - Solution for exercise 10: internationalization/h1h2 th:text#{product.info}Product information/h2dldt th:text#{product.name}Product name/dtdd th:text${product.description}Red chair/dddt th:text#{product.price}Product price/dtdd th:text${#numbers.formatDecimal(product.price, 1, 2)}350/dddt th:text#{product.available}Product available from/dtdd th:text${#dates.format(product.availableFrom, dd-MMM-yyyy)}28-Jun-2013/dd/dl/body/html
此时html需要相应的配置文件。例如如下配置文件
en
tutorial.exercise4Thymeleaf tutorial - exercise 10: internationalization
product.infoProduct information
product.nameProduct name
product.priceProduct price
product.availableProduct available from
backBack
fr
tutorial.exercise4Tutorial De Thymeleaf - exercice 10: linternationalisation
product.infoInformation du produit
product.nameNom du produit
product.pricePrix du produit
product.availableProduit disponible depuis
backRevenir 字符串拼接!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 11/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 11: string concatenation/h1h2Product information/h2dldtProduct price/dtdd th:text${$product.price}235/dd/dl/body/html 简单数据转换数字日期!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 12/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 12: bean values/h1h2Product information/h2dldtProduct name/dtdd th:text${product.description}red Chair/dddtProduct price/dtdd th:text${#numbers.formatDecimal(product.price, 1, 2)}180/dddtProduct available from/dtdd th:text${#dates.format(product.availableFrom, yyyy-MM-dd)}2014-12-01/dd/dl/body/html bean值替换!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orgheadtitleThymeleaf tutorial: exercise 13/titlelink relstylesheet href../../../css/main-static.css th:href{/css/main.css} /meta charsetutf-8 //headbodyh1Thymeleaf tutorial - Answer for exercise 13: bean values/h1h2Product information/h2dldtProduct name/dtdd th:text${product.description}Red Chair/dddtProduct price/dtdd th:text${product.price}350/dddtProduct available from/dtdd th:text${product.availableFrom}2014-12-01/dd/dl/body/html https://www.cnblogs.com/asdop/p/6093599.html https://www.thymeleaf.org/转载于:https://www.cnblogs.com/xumBlog/p/8716164.html
