thymeleaf简单表达式二

本文只适用于不会Java对HTML语言有基础的程序员们，是浏览了各大博客后收集整理，重新编辑的一篇文章，希望能对大家有所帮助。最后本文如果有哪里写错的，希望各位大神们能够批评指正，谢谢大家！

　　对于Thymeleaf，网上特别官方的解释无非就是：网站或者独立应用程序的新式的服务端java模板引擎，可以执行HTML，XML，JavaScript，CSS甚至纯文本模板。这个解释没有任何问题，它确实是建立在Java的基础之上的，但是像我这种只会前端不懂Java的人，其实也可以运用它。了解angular的人在看到Thymeleaf就会感到惊喜，它们在形式上其实是比较相似的。那么，Thymeleaf需要从那里看起？作为Java小白，刚开始看了网上那么多Thymeleaf文章也看不出个所以然，今天好不容易才整理出头绪，接下来就开始切入正题：

<td th:text="${food.name}">noodles</td>

　　如上图，后台传出的food.name会将静态数据“noodles”替换掉，若访问静态页面，则显示数据“noodles”。是不是和angular很像？下面我们就来换一种方式，不同于其他博客上的方式来介绍Thymeleaf。

　　当然，首先大家要先知道th简单表达式：

　　一、th简单表达式：

　　　   ①  ${...}  变量表达式：

<input type="text" name="userName" value="Beyrl" th:value="${user.name}" />

　　　　上述代码为引用user对象的name属性值。

　　　　② *{...}  选择表达式:

<div th:object="${session.user}">                                                                       
     <p>Nationality: <span th:text="*{nationality}">XXXX</span>.</p> </div>

 　　　　选择表达式一般跟在th:object后，直接选择object中的属性。

　　　　③ #{...}  消息文字表达式：

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

　　　　④ @{...}  链接url表达式：

<a href="details.html" th:href="@{/webPage/details(orderId=${o.id})}">view</a>

　　　　@{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用（//code.jquery.com/jquery-2.0.3.min.js）。

　　　当URL为后台传出的参数时，代码如下：

<img src="../../webPage/food/images/pizza.jpg" th:src="@{${path}}" alt="披萨" />

 　　　　当理解了这四个表达式后，我就信心满满的去向下看文档，然后我发现我看不懂了。。。因为我不理解什么是th:field='';th:action='';诸如此类的好多好多，后来在一个博客上看到这一类的是所谓的Thymeleaf的属性，或者是常用的th:标签，下面我们就来整理学习一下这些标签：

　　　　这是在一个博客上看到的整理的较全的图片，还有一个更全的，那个太多了，会吓到初学者，不知道你们会不会，反正我是被吓到了。。。

　　　　

　　　　下面我们会详细介绍一些常用的标签：

　　　　二、th常用标签：

　　　　1.th:id:

　　　　类似html标签中的id属性。

<div class="student" th:id = "food+(${pizza.index}+1)"></div>

　　　　2.th:text:与th:utext:

　　　　即文本显示，可对表达式或变量求值，并将结果显示在其被包含的HTML标签内，替换原有HTML文本。这里需要与th:utext:区分开，th:text:例子如下：

　　　　若  restraunt.welcome=welcome to our <b>delicious</b>restaurant!  那么，用 <p h:text="#{ restaurantt.welcome}"></p> 解析的结果为： welcome to our <b>delicious</b