引入Thymeleaf:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>Index</title>
</head>
<body>
Welcome!
</body>
</html>

引用Web静态资源:

<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>

访问model(${}):

<div class="panel-body">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</div>

model迭代访问(th:each指令进行迭代,person为迭代元素,${people}访问people这个model):

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">访问model列表</h3>
</div>
<div class="panel-body">
<ul class="panel-group">
<li class="list-group-item" th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</li>
</ul>
</div>
</div>

数据判断(th:if指令进行判断,支持如 >、< 等类型的比较条件,同时支持SpringEL):

<div th:if="${not #lists.isEmpty(people)}">内容</div>

在JavaScript中访问model有些不同,形如 [[${}]]。通过th:inline,才可以访问model):

<script th:inline="javascript">
$(function () {
var person = [[${person}]];
console.log(person.name + "/" + person.age);
});
</script>

Thymeleaf 模板引擎技术的更多相关文章

  1. Spring Boot2(五):使用Spring Boot结合Thymeleaf模板引擎使用总结

    一.Thymeleaf概述 一般来说,常用的模板引擎有JSP.Velocity.Freemarker.Thymeleaf . SpringBoot推荐的 Thymeleaf – 语法更简单,功能更强大 ...

  2. Smarty模板引擎技术二

    Smarty模板引擎技术 内建函数 include_php内建函数 作用:载入一个php文件,将载入的文件的内容赋值给一个变量   注意:该内建函数只能在2.0中使用,如果使用的话,必须得实例化Sma ...

  3. Smarty模板引擎技术

    Smarty模板引擎技术 什么是模板引擎? 什么是Smarty模板引擎? 为何选择Smarty模板引擎? 如何使用Smarty模板引擎? 一.历史背景 场景一:回顾之前编写PHP项目的方式 //链接数 ...

  4. (二)SpringBoot基础篇- 静态资源的访问及Thymeleaf模板引擎的使用

    一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...

  5. 【Springboot】Springboot整合Thymeleaf模板引擎

    Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...

  6. 三、thymeleaf模板引擎构建前台html, 后台使用 ModelAndView 和 Model 模型

    项目源码:https://github.com/y369q369/springBoot.git      ->     thymeleaf 私聊QQ: 1486866853 1.pom.xml中 ...

  7. SpringBoot使用thymeleaf模板引擎

    (1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  8. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...

  9. Thymeleaf模板引擎的初步使用

    在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中, ...

随机推荐

  1. c# ref和out参数

    向方法传递参的时候,对应的参数通常会用实参的拷贝来初始化.就是说随便在方法内部进行怎样的修改,都不会影响作为参数传递的变量的原始值. 通过上面的例子我们可以看出来,如果一个方法的参数是引用类型,那么使 ...

  2. sass中的循环判断条件语句

    @if $lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; @mixin inline-b ...

  3. Django框架----命名空间模式

    命名空间模式 即使不同的APP使用相同的URL名称,URL的命名空间模式也可以让你唯一反转命名的URL. 举个例子: project中的urls.py from django.conf.urls im ...

  4. The Little Prince-12/17

    The Little Prince-12/17 今年四六级吐槽,说到做到!!!文思泉涌了兄弟们! “这就是你自己的错了,我本来并不想给你带来任何痛苦的,可你却要我驯服你……可你要哭了,可你什么好处也没 ...

  5. i2c调试碰到的问题

    i2c eeprom i2cget两次结果不一致 i2cset没成功. device里只看到50,却冒出了51地址. i2ctools是针对8bit地址的,而我们的eeprom都是用16bit add ...

  6. SVN的标准目录结构

    SVN目录规范 在visualSVN中创建仓库时,可以选择svn目录结构 Trunk主干目录,此目录下的文件为基准文件. Brancher 用于开发的分支目录 Tags用于发布的版本目录 假设有一个项 ...

  7. linux下nginx整合php

    在nginx中药使用php可不像apache那样,因为apache是把php当做自己的一个模块来启动的, 而我们的nginx是把http请求转发给php程序,也就是说,php和nginx是相互独立的的 ...

  8. Prometheus监控学习笔记之prometheus的远端存储

    0x00 概述 prometheus在容器云的领域实力毋庸置疑,越来越多的云原生组件直接提供prometheus的metrics接口,无需额外的exporter.所以采用prometheus作为整个集 ...

  9. JavaScript之BOM对象

    JavaScript bom对象 BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: wi ...

  10. linux centos6.8搭建 jdk 环境

    1. 上官网下载jdk1.8的包 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...