引入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. loadRunner回访脚本时报Error -27987: Requested image not found [MsgId: MERR-27987]

    loadRunner录制:登陆订机票网址->订机票的过程 loadRunner回访脚本时报Error -27987: Requested image not found  [MsgId: MER ...

  2. LDA模型了解及相关知识

    什么是LDA? LDA是基于贝叶斯模型的,涉及到贝叶斯模型离不开“先验分布”,“数据(似然)”和"后验分布"三块.贝叶斯相关知识:先验分布 + 数据(似然)= 后验分布. 贝叶斯模 ...

  3. IDEA相关知识整理

    一.离线下载插件[也可以通过代理的方式下载插件] http://plugins.jetbrains.com/ 下载离线插件 settings -> plugins -> install p ...

  4. localStorage过期策略

    localStorage过期策略 由于html5没有给本地存储设置过期策略,那么在处理数据的过期策略的时候可以编写自己过期策略程序,如下: <!DOCTYPE> <head> ...

  5. js如何获取服务器端时间？

    用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了.以下: 1.依赖jQuery 代码: ...

  6. 自写Jquery插件 Menu

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...

  7. js call 和 apply方法记录

    最近看到一篇很好的讲解apply和call的文章转了过来,若涉及版权问题请联系本人删除 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用 ...

  8. C调用java JNI_CreateJavaVM只能调用成功一次

    https://bbs.csdn.net/topics/392264971 再使用c语言调用java代码的时候,选择使用JNI,根据网上的提示已经能够正常跑了,int mask_name( char* ...

  9. 状态管理之cookie使用及其限制、session会话

    # 1.什么是状态管理? 将浏览器与web服务器之间多次交互当作一个整体来处理,并且将多次交互所涉及的数据(即状态)保存下来.(cookie浏览器所涉及到的访问数据保存下来)# 2.如何进行状态管理? ...

  10. chrome platform

    folder_extension: ---menifest.json ---navigator_change.js manifest.json { "manifest_version&quo ...