1. 环境准备:jdk1.7(推荐)以上,tomcat8(推荐)以上,或者使用插件自带。mevan插件3.2以上,eclipse编辑工具
  2. pom文件基本配置如下
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion> <groupId>springboot</groupId>
    <artifactId>weboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging> <name>weboot</name>
    <url>http://maven.apache.org</url> <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties> <parent>
    <!--Spring Boot基础父类,其中包含了很多必要的jar包,如果不使用父类,则需要自己去依赖这些jars -->
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.3.3.RELEASE</version>
    </parent>
    <dependencies>
    <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>3.8.1</version>
    <scope>test</scope>
    </dependency> <!-- web程序的启动项依赖,通过此依赖可引入内嵌的tomcat等web必须的jars -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- spring-boot aop- -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
    </dependency>
    <!-- thymeleaf程序的启动项依赖,spring-boot对thymeleaf模板引擎支持最好,建议模板引擎使用此框架 -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- mysql依赖,使用spring-data-jpa需要指定一个数据库方言,用于连接数据库,即mysql驱动 -->
    <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    </dependency>
    </dependencies> <build>
    <plugins>
    <!-- 通过maven构建的插件 -->
    <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    </plugins>
    </build>
    </project>
  3. 手动添加 config,templates,static 文件夹 分别存放配置文件,模板,静态文件(js,css等)
  4. 模板格式其一详解

    Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用。

    Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。Thymeleaf的可扩展性也非常棒。你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑。这意味着Thymeleaf还可以作为模板引擎框架。

    Thymeleaf的模板还可以用作工作原型,Thymeleaf会在运行期替换掉静态值。例如下面的html文件,当作为静态文件时,product name显示为Red Chair,当运行在容器中并提供product这个对象时,product name的值会自动替换为product.description对应的值。

    1.bean值替换
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 2</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 1: bean values</h1>
    <h2>Product information</h2>
    <dl>
    <dt>Product name</dt>
    <dd th:text="${product.description}">Red Chair</dd> <dt>Product price</dt>
    <dd th:text="${product.price}">350</dd> <dt>Product available from</dt>
    <dd th:text="${product.availableFrom}">2014-12-01</dd>
    </dl>
    </body>
    </html>
    2.简单数据转换(数字,日期)
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 2</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 2: bean values</h1>
    <h2>Product information</h2>
    <dl>
    <dt>Product name</dt>
    <dd th:text="${product.description}">red Chair</dd> <dt>Product price</dt>
    <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd> <dt>Product available from</dt>
    <dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>
    </dl>
    </body>
    </html>
    3.字符串拼接
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 3</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 3: string concatenation</h1>
    <h2>Product information</h2>
    <dl>
    <dt>Product price</dt>
    <dd th:text="${'$'+product.price}">235</dd>
    </dl>
    </body>
    </html>
    4.国际化
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title th:text="#{tutorial.exercise4}">Thymeleaf tutorial: exercise 4</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1 th:text="#{tutorial.exercise4}">Thymeleaf tutorial - Solution for exercise 4: internationalization</h1>
    <h2 th:text="#{product.info}">Product information</h2>
    <dl>
    <dt th:text="#{product.name}">Product name</dt>
    <dd th:text="${product.description}">Red chair</dd> <dt th:text="#{product.price}">Product price</dt>
    <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd> <dt th:text="#{product.available}">Product available from</dt>
    <dd th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</dd>
    </dl>
    </body>
    </html>

    此时html需要相应的配置文件。例如如下配置文件:

    en:

    tutorial.exercise4=Thymeleaf tutorial - exercise 4: internationalization
    product.info=Product information
    product.name=Product name
    product.price=Product price
    product.available=Product available from
    back=Back

    fr

    tutorial.exercise4=Tutorial De Thymeleaf - exercice 4: l'internationalisation
    product.info=Information du produit
    product.name=Nom du produit
    product.price=Prix du produit
    product.available=Produit disponible depuis
    back=Revenir
    5.转义和非转义文本
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 5</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Solution for exercise 5: escaped and unescaped text</h1>
    <div th:text="${html}">
    Some escaped text
    </div>
    <div th:utext="${html}">
    Some unescaped text
    </div>
    </body>
    </html>

    上述两个div分别生成的html代码为

    <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
    <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
    6.迭代
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 6</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 6: iteration</h1>
    <h2>Product list</h2>
    <table>
    <thead>
    <tr>
    <th>Description</th>
    <th>Price</th>
    <th>Available from</th>
    </tr>
    </thead>
    <tbody th:remove="all-but-first">
    <tr th:each="product:${productList}">
    <td th:text="${product.description}">Red Chair</td>
    <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$123</td>
    <td th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</td>
    </tr>
    <tr>
    <td>White table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    <tr>
    <td>Reb table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    <tr>
    <td>Blue table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    7.迭代统计
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 7</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Solution for exercise 7: iteration stats</h1>
    <h2>Product list</h2>
    <table>
    <thead>
    <tr>
    <th>Index</th>
    <th>Description</th>
    <th>Price</th>
    <th>Available from</th>
    </tr>
    </thead>
    <tbody th:remove="all-but-first">
    <tr th:each="product : ${productList}">
    <td th:text="${productStat.count}">1</td>
    <td th:text="${product.description}">Red chair</td>
    <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
    <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
    </tr>
    <tr>
    <td>2</td>
    <td>White table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Reb table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    <tr>
    <td>4</td>
    <td>Blue table</td>
    <td>$200</td>
    <td>15-Jul-2013</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    8.条件判断
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 8</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 8: conditions</h1>
    <h2>Product list</h2>
    <table>
    <thead>
    <tr>
    <th>Description</th>
    <th>Price</th>
    <th>Available from</th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="product : ${productList}">
    <td th:text="${product.description}">Red chair</td>
    <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
    <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
    <td>
    <span th:if="${product.price lt 100}" class="offer">Special offer!</span>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    9.更多条件判断
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 9</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 9: more on conditions</h1>
    <h2>Customer list</h2>
    <table>
    <thead>
    <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>Gender</th>
    <th>Payment method</th>
    <th>Balance</th>
    </tr>
    </thead>
    <tbody th:remove="all-but-first">
    <tr th:each="customer : ${customerList}">
    <td th:text="${customer.firstName}">Peter</td>
    <td th:text="${customer.lastName}">Jackson</td>
    <!--
    Use th:switch for selecting content based on ${customer.gender}.
    As genre can be null if unknown, better use ${customer.gender?.name()}
    for obtaining its name.
    -->
    <td th:switch="${customer.gender?.name()}">
    <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
    <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
    <span th:case="*">Unknown</span>
    </td>
    <td>
    <span th:text="${customer.paymentMethod.description}">Direct debit</span>
    <!-- Show next message only when paymentMethod is not CREDIT_CARD -->
    <span th:unless="${customer.paymentMethod.name() == 'CREDIT_CARD'}" class="warn">
    Payment must be done in the next 4 days
    </span>
    </td>
    <!-- Add class="enhanced" when balance is greater than 10000 -->
    <td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td>
    </tr>
    <tr>
    <td>Mary</td>
    <td>Johanson</td>
    <td><img src="../../../images/female.png" /></td>
    <td><span>Credit card</span></td>
    <td>5000</td>
    </tr>
    <tr>
    <td>Robert</td>
    <td>Allen</td>
    <td><img src="../../../images/male.png" /></td>
    <td>
    <span>Credit card</span>
    <span class="warn">Payment must be done in the next 4 days</span>
    </td>
    <td class="enhanced">50000</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    10.Spring表达式语言
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 10</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Solution for exercise 10: Spring Expression language</h1> <h2>Arithmetic expressions</h2>
    <p class="label">Four multiplied by minus six multiplied by minus two module seven:</p>
    <p class="answer" th:text="${4 * -6 * -2 % 7}">123</p> <h2>Object navigation</h2>
    <p class="label">Description field of paymentMethod field of the third element of customerList bean:</p>
    <p class="answer" th:text="${customerList[2].paymentMethod.description}">Credit card</p> <h2>Object instantiation</h2>
    <p class="label">Current time milliseconds:</p>
    <p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p> <h2>T operator</h2>
    <p class="label">Random number:</p>
    <p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
    </body>
    </html>
    11.超链接
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 11</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Answer for exercise 11: links</h1>
    <h2>Product actions</h2>
    <ul>
    <li><a href="#" th:href="@{/exercise11/product.html(action='view')}">View product</a></li>
    <li><a href="#" th:href="@{/exercise11/product.html(action='edit')}">Edit product</a></li>
    </ul>
    </body>
    </html>
    12.表单
     <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 12</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Solution for exercise 12: forms</h1>
    <h2>Customer edition</h2>
    <form action="saveCustomer.html" th:action="@{/exercise12/saveCustomer.html}" th:object="${customer}" method="post">
    <input type="hidden" th:field="*{id}" /> <label for="firstName">First name:</label>
    <input type="text" th:field="*{firstName}" value="John" /> <label for="lastName">Last name:</label>
    <input type="text" th:field="*{lastName}" value="Wayne" /> Genre:
    <div th:each="gender : ${genders}" class="radio">
    <input type="radio" th:value="${gender}" th:field="*{gender}" />
    <label th:for="${#ids.prev('gender')}" th:text="${gender.description}">Male</label>
    </div>
    <div th:remove="all" class="radio">
    <input type="radio" />
    <label>Female</label>
    </div> <label for="paymentMethod">Payment method:</label>
    <select th:field="*{paymentMethod}" th:remove="all-but-first">
    <option th:each="paymentMethod : ${paymentMethods}"
    33 th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>
    <option>Another payment method</option>
    <option>Another payment method</option>
    </select> <label for="balance">Balance (dollars):</label>
    <input type="text" th:field="*{balance}" size="10" value="2500" /> <input type="submit" />
    </form>
    </body>
    </html>
    13.内联
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>Thymeleaf tutorial: exercise 13</title>
    <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
    <meta charset="utf-8" />
    </head>
    <body>
    <h1>Thymeleaf tutorial - Solution for exercise 13: inlining</h1>
    <h2>Birthday email</h2>
    <form action="#" method="post">
    <label for="body">Message body:</label>
    <textarea id="body" name="body" th:inline="text">
    Dear [[${customerName}]],
    it is our sincere pleasure to congratulate your in your birthday:
    Happy birthday [[${customerName}]]!!!
    See you soon, [[${customerName}]].
    Regards,
    The Thymeleaf team
    </textarea>
    <input type="submit" value="Send mail" />
    </form>
    </body>
    </html>

    --------------------------------------------------------------------------------------------------------------

    以上资料都来自http://itutorial.thymeleaf.org/。如果对Thymeleaf有兴趣,可以试试他们做的交互教程,很是好用。上面的html代码都是来自thymeleaf的交互教程

  

Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。Thymeleaf的可扩展性也非常棒。你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑。这意味着Thymeleaf还可以作为模板引擎框架。

Thymeleaf的模板还可以用作工作原型,Thymeleaf会在运行期替换掉静态值。例如下面的html文件,当作为静态文件时,product name显示为Red Chair,当运行在容器中并提供product这个对象时,product name的值会自动替换为product.description对应的值。

1.bean值替换
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 2</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 1: bean values</h1>
<h2>Product information</h2>
<dl>
<dt>Product name</dt>
<dd th:text="${product.description}">Red Chair</dd> <dt>Product price</dt>
<dd th:text="${product.price}">350</dd> <dt>Product available from</dt>
<dd th:text="${product.availableFrom}">2014-12-01</dd>
</dl>
</body>
</html>
2.简单数据转换(数字,日期)
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 2</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 2: bean values</h1>
<h2>Product information</h2>
<dl>
<dt>Product name</dt>
<dd th:text="${product.description}">red Chair</dd> <dt>Product price</dt>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd> <dt>Product available from</dt>
<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>
</dl>
</body>
</html>
3.字符串拼接
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 3</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 3: string concatenation</h1>
<h2>Product information</h2>
<dl>
<dt>Product price</dt>
<dd th:text="${'$'+product.price}">235</dd>
</dl>
</body>
</html>
4.国际化
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{tutorial.exercise4}">Thymeleaf tutorial: exercise 4</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1 th:text="#{tutorial.exercise4}">Thymeleaf tutorial - Solution for exercise 4: internationalization</h1>
<h2 th:text="#{product.info}">Product information</h2>
<dl>
<dt th:text="#{product.name}">Product name</dt>
<dd th:text="${product.description}">Red chair</dd> <dt th:text="#{product.price}">Product price</dt>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd> <dt th:text="#{product.available}">Product available from</dt>
<dd th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</dd>
</dl>
</body>
</html>

此时html需要相应的配置文件。例如如下配置文件:

en:

tutorial.exercise4=Thymeleaf tutorial - exercise 4: internationalization
product.info=Product information
product.name=Product name
product.price=Product price
product.available=Product available from
back=Back

fr

tutorial.exercise4=Tutorial De Thymeleaf - exercice 4: l'internationalisation
product.info=Information du produit
product.name=Nom du produit
product.price=Prix du produit
product.available=Produit disponible depuis
back=Revenir
5.转义和非转义文本
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 5</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 5: escaped and unescaped text</h1>
<div th:text="${html}">
Some escaped text
</div>
<div th:utext="${html}">
Some unescaped text
</div>
</body>
</html>

上述两个div分别生成的html代码为

<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
6.迭代
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 6</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 6: iteration</h1>
<h2>Product list</h2>
<table>
<thead>
<tr>
<th>Description</th>
<th>Price</th>
<th>Available from</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="product:${productList}">
<td th:text="${product.description}">Red Chair</td>
<td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$123</td>
<td th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</td>
</tr>
<tr>
<td>White table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
<tr>
<td>Reb table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
<tr>
<td>Blue table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
</tbody>
</table>
</body>
</html>
7.迭代统计
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 7</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 7: iteration stats</h1>
<h2>Product list</h2>
<table>
<thead>
<tr>
<th>Index</th>
<th>Description</th>
<th>Price</th>
<th>Available from</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="product : ${productList}">
<td th:text="${productStat.count}">1</td>
<td th:text="${product.description}">Red chair</td>
<td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
<td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
</tr>
<tr>
<td>2</td>
<td>White table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
<tr>
<td>3</td>
<td>Reb table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
<tr>
<td>4</td>
<td>Blue table</td>
<td>$200</td>
<td>15-Jul-2013</td>
</tr>
</tbody>
</table>
</body>
</html>
8.条件判断
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 8</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 8: conditions</h1>
<h2>Product list</h2>
<table>
<thead>
<tr>
<th>Description</th>
<th>Price</th>
<th>Available from</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${productList}">
<td th:text="${product.description}">Red chair</td>
<td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
<td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
<td>
<span th:if="${product.price lt 100}" class="offer">Special offer!</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
9.更多条件判断
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 9</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 9: more on conditions</h1>
<h2>Customer list</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Payment method</th>
<th>Balance</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="customer : ${customerList}">
<td th:text="${customer.firstName}">Peter</td>
<td th:text="${customer.lastName}">Jackson</td>
<!--
Use th:switch for selecting content based on ${customer.gender}.
As genre can be null if unknown, better use ${customer.gender?.name()}
for obtaining its name.
-->
<td th:switch="${customer.gender?.name()}">
<img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
<img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
<span th:case="*">Unknown</span>
</td>
<td>
<span th:text="${customer.paymentMethod.description}">Direct debit</span>
<!-- Show next message only when paymentMethod is not CREDIT_CARD -->
<span th:unless="${customer.paymentMethod.name() == 'CREDIT_CARD'}" class="warn">
Payment must be done in the next 4 days
</span>
</td>
<!-- Add class="enhanced" when balance is greater than 10000 -->
<td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td>
</tr>
<tr>
<td>Mary</td>
<td>Johanson</td>
<td><img src="../../../images/female.png" /></td>
<td><span>Credit card</span></td>
<td>5000</td>
</tr>
<tr>
<td>Robert</td>
<td>Allen</td>
<td><img src="../../../images/male.png" /></td>
<td>
<span>Credit card</span>
<span class="warn">Payment must be done in the next 4 days</span>
</td>
<td class="enhanced">50000</td>
</tr>
</tbody>
</table>
</body>
</html>
10.Spring表达式语言
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 10</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 10: Spring Expression language</h1> <h2>Arithmetic expressions</h2>
<p class="label">Four multiplied by minus six multiplied by minus two module seven:</p>
<p class="answer" th:text="${4 * -6 * -2 % 7}">123</p> <h2>Object navigation</h2>
<p class="label">Description field of paymentMethod field of the third element of customerList bean:</p>
<p class="answer" th:text="${customerList[2].paymentMethod.description}">Credit card</p> <h2>Object instantiation</h2>
<p class="label">Current time milliseconds:</p>
<p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p> <h2>T operator</h2>
<p class="label">Random number:</p>
<p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
</body>
</html>
11.超链接
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 11</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 11: links</h1>
<h2>Product actions</h2>
<ul>
<li><a href="#" th:href="@{/exercise11/product.html(action='view')}">View product</a></li>
<li><a href="#" th:href="@{/exercise11/product.html(action='edit')}">Edit product</a></li>
</ul>
</body>
</html>
12.表单
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 12</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 12: forms</h1>
<h2>Customer edition</h2>
<form action="saveCustomer.html" th:action="@{/exercise12/saveCustomer.html}" th:object="${customer}" method="post">
<input type="hidden" th:field="*{id}" /> <label for="firstName">First name:</label>
<input type="text" th:field="*{firstName}" value="John" /> <label for="lastName">Last name:</label>
<input type="text" th:field="*{lastName}" value="Wayne" /> Genre:
<div th:each="gender : ${genders}" class="radio">
<input type="radio" th:value="${gender}" th:field="*{gender}" />
<label th:for="${#ids.prev('gender')}" th:text="${gender.description}">Male</label>
</div>
<div th:remove="all" class="radio">
<input type="radio" />
<label>Female</label>
</div> <label for="paymentMethod">Payment method:</label>
<select th:field="*{paymentMethod}" th:remove="all-but-first">
<option th:each="paymentMethod : ${paymentMethods}"
33 th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>
<option>Another payment method</option>
<option>Another payment method</option>
</select> <label for="balance">Balance (dollars):</label>
<input type="text" th:field="*{balance}" size="10" value="2500" /> <input type="submit" />
</form>
</body>
</html>
13.内联
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 13</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 13: inlining</h1>
<h2>Birthday email</h2>
<form action="#" method="post">
<label for="body">Message body:</label>
<textarea id="body" name="body" th:inline="text">
Dear [[${customerName}]],
it is our sincere pleasure to congratulate your in your birthday:
Happy birthday [[${customerName}]]!!!
See you soon, [[${customerName}]].
Regards,
The Thymeleaf team
</textarea>
<input type="submit" value="Send mail" />
</form>
</body>
</html>

--------------------------------------------------------------------------------------------------------------

以上资料都来自http://itutorial.thymeleaf.org/。如果对Thymeleaf有兴趣,可以试试他们做的交互教程,很是好用。上面的html代码都是来自thymeleaf的交互教程

SpringBoot入门 一 构建简单工程的更多相关文章

  1. springboot学习之构建简单项目搭建

    概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这 ...

  2. SpringBoot入门学习看这一篇就够了

    1.SpringBoot是什么? SpringBoot是一套基于Spring框架的微服务框架. 2.为什么需要SpringBoot 由于Spring是一个轻量级的企业开发框架,主要的功能就是用于整合和 ...

  3. springboot入门之简单demo

    项目构建 我们采用maven构建SpringBoot工程,首先创建一个maven工程,对应的pom文件如下: <properties> <java.version>1.8< ...

  4. springboot入门神器 -http://start.spring.io/(在线项目构建)

    参考并直接引用:http://www.sousou.io/article/1506656459859 最近在学习spring boot,看的书是<JavaEE开发的颠覆者 Spring Boot ...

  5. 构建简单的Maven工程,使用测试驱动的方式开发项目

    构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2. ...

  6. springboot入门简单,深入难

    18年1月份的时候在腾讯课堂学习springboot.springcloud搭建微服务,老师告诉我们,springboot入门容易,深入难. 因为你必须东西SpringMVC.Spring.Mybat ...

  7. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  8. Spring全家桶系列–[SpringBoot入门到跑路]

    //本文作者:cuifuan Spring全家桶————[SpringBoot入门到跑路] 对于之前的Spring框架的使用,各种配置文件XML.properties一旦出错之后错误难寻,这也是为什么 ...

  9. SpringBoot入门(一)——开箱即用

    本文来自网易云社区 Spring Boot是什么 从根本上来讲Spring Boot就是一些库的集合,是一个基于"约定优于配置"的原则,快速搭建应用的框架.本质上依然Spring, ...

随机推荐

  1. HTML——<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    没有添加这句话的编码方式的话,很容易就乱码了 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&g ...

  2. sql server 查询字符串指定字符出现的次数

    这里提取指定符串"A"在字段中的出现次数SQL为: select len(keyword)-len(replace(keyword, 'A', ' ')) from 表 原理:用r ...

  3. ### 学习《C++ Primer》- 8

    Part 8: 面向对象(第15章) // @author: gr // @date: 2015-01-09 // @email: forgerui@gmail.com 一.OOP 面向对象程序设计的 ...

  4. 解决div布局中第一个div的margin-top在浏览器中显示无效果问题。

    原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/ 垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是 ...

  5. ajax跨域请求的解决方案

    一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...

  6. Mysql 流程控制

    流程控制 分支结构 if分支结构 语法:     if 条件then         -- 语句体     else         -- 缺省语句体     end if; 示例: 循环结构 whi ...

  7. Java多线程同步代码块

    /*多线程的安全问题1.为什么会出现安全问题?因为程序在运行时,会出现一个线程在判断条件满足后,具备了执行资格,但没有运行代码后一个线程也判断了条件,也具备了执行资格,后一个线程运行了代码,但这时候, ...

  8. CSU-ACM2016暑假集训训练2-DFS(C - Network Saboteur)

    C - Network Saboteur Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu ...

  9. VC++代码的汇编分析(一)

    VC++代码是最接近汇编指令的高级语言,为了更加准确和深刻理解VC++编码中所涉及的很多技术概念和编译器参数的含义,从汇编指令层面进行剖析和解读,有助于开发者更加准确.直观.深刻理解高级语言中很多概念 ...

  10. 第12条:考虑实现Comparable接口

    CompareTo方法没有在Object中声明,它是Comparable接口中的唯一的方法,不但允许进行简单的等同性比较,而且允许执行顺序比较.类实现了Comparable接口,就表明它的实例具有内在 ...