流程：
##### 流程
######  1：pom添加依赖   
<dependency>

                              <groupId>org.springframework.boot</groupId>

                              <artifactId>spring-boot-starter-thymeleaf</artifactId>

                              <version>1.0.2.RELEASE</version>

                          </dependency>

                          <properties>

                                  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

                                  <!--引入thymeleaf-->

                                  <thymeleaf.version> 3.0.2.RELEASE </thymeleaf.version>

                                  <thymeleaf-layout-dialect.version> 2.1.1 </thymeleaf-layout-dialect.version>

                          </properties> 
######  2：配置thymeleaf参数 
server:

                              port: 8009

                            spring:

                              thymeleaf:

                                mode: HTML5

                                cache: false #不开启缓存 这样可以修改html模版文件直接刷新页面看结果

                                suffix: .html #模板文件后缀

                                content-type: text/html #模板文件类型

                                prefix: classpath:/templates/ #模板路径 Controller层返回文件路径在此路径之后
######  3：页面引入thymeleaf
   <!DOCTYPE HTML>

                     <html xmlns:th="http://www.thymeleaf.org"
#####  细则
    1.引入URL  <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/> <a th:href="@{/dispatcher}">model</a>
    2.获取变量值 <span th:text="${singlePerson.name}"></span>
    3.JS获取对象值（会被格式化为JSON字符串） var person = [[${people}]];
    4.条件判断：<span class="label label-danger" th:if ="${person.age} le 17" >未成年</span>
               <span class="label label-warning" th:if ="${person.age} le 22 and ${person.age} gt 18" >已成年</span>
               <span class="label label-warning" th:if ="${person.age} le 32 and ${person.age} gt 22" >青壮年</span>
               <span class="label label-warning" th:if ="${person.age} le 40 and ${person.age} gt 32" >老年初期</span>
    5.dom元素传值给JS 
        单个值：<button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">获得名字</button>
        多个值：<button class="btn" th:onclick="'say(\''+${person.name}+'\',\''+${person.age}+'\');'">简单介绍</button>
    6.迭代
        <li class="list-group-item" th:each="person : ${people}">
                            <span th:text="${person.name}"></span>
                            <span th:text="${person.age}" ></span>
                            <button class="btn" th:text="${person.sex}"></button>
                            <button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">获得名字</button>
                            <button class="btn" th:onclick="'say(\''+${person.name}+'\',\''+${person.age}+'\');'">简单介绍</button>
        </li>
git地址：https://github.com/ChengXIaohong/thymeleaf

thymelead入门 git地址在文档最后的更多相关文章

  1. VS2010/MFC编程入门之四十一（文档、视图和框架：分割窗口）

    上一节中鸡啄米讲了文档.视图和框架结构中各对象之间的关系,本节主要讲讲在MFC中如何分割窗口. 分割窗口概述       分割窗口,顾名思义,就是将一个窗口分割成多个窗格,在每个窗格中都包含有视图,或 ...

  2. 使用Git Wiki 管理文档时，文档编写的基本用法

    自己初次接触GitLab,通过百度和自己查找资料,了解了一部分.在自己的工作中,主要用到GitLab的Wiki文档版本管理能力.我总结了一小部分文本编辑需要用到的东西. 一.文本的排版 为了让文本/文 ...

  3. Java入门 - 高级教程 - 09.文档注释

    原文地址:http://www.work100.net/training/java-documentation.html 更多教程:光束云 - 免费课程 文档注释 序号 文内章节 视频 1 概述 2 ...

  4. Jenkins入门系列之——03PDF文档下载

    啥都不说了,网页看着蛋疼的,自己下载pdf文档吧. 点击下载文档 http://files.cnblogs.com/zz0412/jenkins%E5%85%A5%E9%97%A8%E6%89%8B% ...

  5. VS2010/MFC编程入门之四十（文档、视图和框架：各对象之间的关系）

    前面一节中鸡啄米进行了文档.视图和框架的概述,本节主要讲解文档.视图.框架结构中各对象之间的关系. 各个对象之间的关系 文档.视图.框架结构中涉及到的对象主要有:应用程序对象.文档模板对象.文档对象. ...

  6. MongoDB入门教程一［文档与集合］

    MongoDB 是面向集合存储的文档型数据库,其涉及到的基本概念与关系型数据库相比有所不同.举个例子,在关系型数据库中,我们记录一个订单的信息,通常是这样设计表结构的: 设计一个订单基本信息表和一个订 ...

  7. Solr.NET快速入门(九)【二进制文档上传】【完】

    二进制文档上传 SolrNet支持Solr"提取"功能(a.k.a. Solr"Cell")从二进制文档格式(如Word,PDF等)索引数据. 这里有一个简单的 ...

  8. HTML5入门：HTML5的文档声明和基本代码

    HTML5的文档声明: HTML5的文档声明,不同于HTML4.0和XHTML,它精简了许多代码,只保留<!DOCTYPE html>开头,必须位于HTML5文档的第一行,它可以用来告诉浏 ...

  9. Elasticsearch从入门到放弃：文档CRUD要牢记

    在Elasticsearch中,文档(document)是所有可搜索数据的最小单位.它被序列化成JSON存储在Elasticsearch中.每个文档都会有一个唯一ID,这个ID你可以自己指定或者交给E ...

随机推荐

  1. 在虚拟机上的ubuntu 1.6 系统中sudo apt-get失败的问题

    在虚拟机上sudo apt-get update 失败.可能是网络dns问题,把nameserver \设为你路由器的内网ip地址就没事了; 详细: 1/打开sudo gedit /etc/resol ...

  2. zookeeper、solrcloud、rediscluster集群解决方案

        集群解决方案 课程目标 目标1:说出什么是集群以及与分布式的区别 目标2:能够搭建Zookeeper集群 目标3:能够搭建SolrCloud集群 目标4:能够搭建RedisCluster集群 ...

  3. python_11 装饰器,闭包

    装饰器:本质就是函数,功能是为其他函数添加附加功能 原则: 1.不修改被修饰函数的源代码 2.不修改被修饰函数的调用方式 装饰器的知识储备 装饰器=高阶函数+函数嵌套+闭包 #装饰器: def tim ...

  4. 在CentOS7中安装scala-2.11.12

    从官网下载scala的相关版本 https://www.scala-lang.org/download/2.11.12.html 解压安装包 tar zxf scala-.tgz -C /usr/sc ...

  5. PHP提交订单,信息的传递

    今天被之前的同事问到订单这一块(他用的是Laraver)..."多个商品在同一个订单里,怎么将相同的商品放进一个分组"... 当时我和他的反应都是,array_push, arra ...

  6. css：伪类和伪元素

    一:伪类 1.   :active   想被激活的元素添加样式 2.   :focus   向拥有键盘输入焦点的元素添加样式 3.   :hover   当鼠标悬浮在元素上方时,向元素添加样式 4.  ...

  7. Sql Server数据库之触发器

    阅读目录 一:触发器的优点 二:触发器的作用 三:触发器的分类 四:触发器的工作原理 五:创建触发器 六:管理触发器 概念:   触发器(trigger)是SQL server 提供给程序员和数据分析 ...

  8. python1.返回一个字符串中出现次数第二多的单词 2.字符串中可能有英文单词、标点、空格 3.字符串中的英文字符全部是小写

    import re from collections import Counter def second_count_word(s): # # 利用正则按标点和空格切割,有其他标点可以添加到[]内 # ...

  9. 微信小程序 app.json文件配置

    https://developers.weixin.qq.com/miniprogram/dev/index.html  起步 https://developers.weixin.qq.com/min ...

  10. python入门（十二）：面向对象

    1.场景:玩过游戏.主人公,进入了一个场景,有10个小怪物是一样的.有攻击力,血(100格).如果小怪物有多个数值需要管理,小怪物的血量.小怪物出现在屏幕的地点. 可以使用字典来进行记录: {&quo ...