初步认识Thymeleaf(一)

您所在的位置:网站首页 HTML里th和td 初步认识Thymeleaf(一)

初步认识Thymeleaf(一)

#初步认识Thymeleaf(一)| 来源: 网络整理| 查看: 265

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

td th:text="${food.name}">noodlestd>

  如上图,后台传出的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}">XXXXspan>.p> div>

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

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

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

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

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

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

   当URL为后台传出的参数时,代码如下: img src="../../static/assets/images/qr-code.jpg" th:src="@{${path}}" alt="二维码" />

  

初步认识Thymeleaf(一)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3