JavaEE開發之SpringBoot整合MyBatis以及Thymeleaf模板引擎

時間  2019-11-17
標籤 javaee 開發 springboot 整合 mybatis 以及 thymeleaf 模板 引擎 欄目 Java 简体版
原文   原文鏈接

 

使用thymeleaf佈局css

使用thymeleaf佈局很是的方便html

<footer th:fragment="copy"> 
&copy; 2016
</footer>

 

在頁面任何地方引入：前端

<body> 
  <div th:include="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
</body>

th:include 和 th:replace區別，include只是加載，replace是替換java

返回的HTML以下：mysql

<body> 
   <div> &copy; 2016 </div> 
  <footer>&copy; 2016 </footer> 
</body>

下面是一個經常使用的後臺頁面佈局，將整個頁面分爲頭部，尾部、菜單欄、隱藏欄，點擊菜單隻改變content區域的頁面git

<body class="layout-fixed">
  <div th:fragment="navbar"  class="wrapper"  role="navigation">
    <div th:replace="fragments/header :: header">Header</div>
    <div th:replace="fragments/left :: left">left</div>
    <div th:replace="fragments/sidebar :: sidebar">sidebar</div>
    <div layout:fragment="content" id="content" ></div>
    <div th:replace="fragments/footer :: footer">footer</div>
  </div>
</body>

任何頁面想使用這樣的佈局值只須要替換中見的 content模塊便可github

 <html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
   <body>
      <section layout:fragment="content">
    ...

也能夠在引用模版的時候傳參web

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

layout 是文件地址，若是有文件夾能夠這樣寫 fileName/layout:htmlhead
htmlhead 是指定義的代碼片斷 如 th:fragment="copy"spring

https://github.com/cloudfavorites/favorites-websql

http://blog.csdn.net/quuqu/article/details/52511933

 

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 &lt;em&gt;HTML&lt;/em&gt; text. &lt;b&gt;Enjoy yourself!&lt;/b&gt;</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}"
                        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的交互教程

 http://www.cnblogs.com/dreamfree/p/4158557.html

 

 

 

 

 

 

上篇博客咱們聊了《JavaEE開發之SpringBoot工程的建立、運行與配置》，從上篇博客的內容咱們不難看出SpringBoot的便捷。本篇博客咱們繼續在上篇博客的基礎上來看一下SpringBoot是如何引入和使用MyBatis和Thymeleaf的。在以前的博客中咱們提到過Hibernate，今天博客所引入的Mybatis所扮演的角色與Hibernate相似，都是一套ORM框架，主要負責持久化的，也是將數據庫中的數據直接映射爲Model的框架。

而Thymeleaf就是一個模板引擎了，與以前咱們聊得PHP中的Smarty模板引擎相似。若是大家的Web工程是先後端分離的，那麼就用不着Thymeleaf等模板引擎了。本篇博客要作的事情就是在SpringBoot工程中引入MyBatis，而後經過MyBatis所提供的映射方法以及註解來讀取數據庫中的信息。而後使用Thymeleaf模板在前端進行數據的展現。

咱們以前在聊Swift開發服務端的內容，也就是Perfect框架時，用到了MySQL相關的東西。本篇博客咱們就使用Perfect框架以前所操做的數據庫就好了。關於Swift的Perfect框架的相關內容，請移步於《Swift中的服務端框架---Perfect》系列博客。由於以前聊過MySQL相關的東西了，本篇博客就不作過多贅述了。關於MySQL的安裝，請參見以前發佈的博客《macOS Sierra安裝Apache2.4+PHP7.0+MySQL5.7.16》。本篇博客，咱們就把重點放到Spring Boot中的MyBatis和Thymeleaf上。

 

1、MyBatis的引入與使用

1.配置pom文件

首先咱們來看一下如何在Spring Boot中引入MyBatis。首先咱們在http://mvnrepository.com/中找到Mybatis Spring Boot Starter相關的Mvn倉庫鏈接。以下所示，從下方截圖中，咱們不難看出，目前MyBatis Spring Boot Starter的最新版本是1.2.0。不過本篇博客中咱們使用的是1.1.1版本，由於我引入1.2.0後，個人SpringBoot工程根本啓動不了，因而換成1.1.1版本就OK了。

　　

在pom.xml添加上下方的配置項，引入mybatis-spring-boot-starter和mysql-connector-java相關配置。mysql-connector-java顧明思議，就是鏈接MySQL數據庫使用的依賴包。pom.xml中的配置以下。

複製代碼 
        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.38</version>
        </dependency>
複製代碼

 

 

二、配置MySQL數據庫鏈接

由於咱們使用的是Spring Boot引入的MyBatis, Mybatis Spring Boot Starter會爲咱們作好多自動化的配置，好比SqlSessionFactory的建立等等。須要咱們作的就是在application.properties文件中進行數據庫鏈接的相關配置便可。下方就是咱們在配置文件中添加的鏈接數據庫的相關信息。主要配置了數據庫鏈接的路徑，數據庫的用戶名以及密碼，數據庫的驅動。

#Config MySQL Connect Info
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/perfect_note
spring.datasource.username=root
spring.datasource.password=admin!@#
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

 

 

三、建立Model類

接下來咱們就來建立數據庫中的相應數據所要映射的數據Model類。接下來咱們就來操做perfect_note數據庫中的content表，以下所示。下方數據庫及數據庫中的數據是咱們以前在聊Perfect框架時所使用的數據，本篇博客咱們依然對該數據進行操做。

　　

根據上述cotent表中的字段，咱們來建立該表所對應的model類。下方這個Content類就是咱們所建立的content表所對應的Model。具體以下所示。

　　

 

 

4.建立映射接口

接下來咱們來建立數據庫表與Model直接的映射接口。在該接口中提供了數據與Model直接的映射關係，而且提供了相關的SQL操做。下方的ContentMapper接口就是咱們建立的content表與ContentModel之間的映射關係。而且在該接口中的方法所對應的註解中，提供了相應的SQL操做。

在ContentMapper接口的query()方法中，該方法所對應的SQL語句是「select * from content」，也就是查詢全部content中的數據。@Results註解提供了數據庫表的字段與Model的屬性的映射關係。下方指定了表字段"id"與"contentId"對應，字段名"create_time"與「createTime」屬性相對應，而未指定的就是字段名與屬性名一致。

queryById()就是帶有條件的查詢方法了。其參數就是查詢的條件。經過@Param註解進行條件與參數的綁定。具體代碼以下所示。

　　

 

 

五、建立測試用的Controller

爲了簡便期間，咱們就不建立DAO層了，就直接在Controller中來調用上述接口中的方法便可。下方這個MyBatisTestController就是咱們建立的用來測試上述操做的測試控制器。固然咱們將該控制器聲明爲@RestController以便咱們對其進行測試。而後使用@Autowired註解注入ContentMapper類型的對象，咱們能夠經過該對象來操做上述接口中所對應的方法。queryContentById()方法，對應的是contentMapper中的queryById()方法，queryAll()方法對應的是Mapper中的query()方法，具體代碼以下所示。

下方咱們直接將獲取到的Model或者Model數組進行返回，在Spring Boot中，直接返回的Model會被映射成相應的JSON格式的數據的，這個稍後咱們會直觀的看到。

　　

 

六、訪問上述路由

咱們先訪問/queryContentById這個路由，再訪問這個路由時，咱們要提供一個參數contentId。也就是用來查詢數據的條件。下方截圖中的結果就是咱們對contentId=6的條件查詢的結果。

　　

接下來咱們來查詢一下全部的數據，也就是訪問queryAll路由。具體結果以下所示。

　　

 

 

2、Thymeleaf模板的引入與使用

上面引入MyBatis算是妥了，之後的博客中還會繼續對MyBatis的相關東西進行介紹。接下來咱們就引入Thymeleaf模板，而後顯示咱們使用MyBatis讀取到的相關數據。下方咱們就來看一下在Spring Boot中是如何整合Thymeleaf模板的

 

一、配置pom.xml文件

在pom.xml中添加Thymeleaf在Spring Boot中相關的庫，具體以下所示：

複製代碼 
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>1.5.2.RELEASE</version>
        </dependency>
複製代碼

 

二、建立模板使用的Controller

緊接着，咱們就來建立模板所對應的Controller，以下所示。下方咱們依然使用注入的ContentMapper對象來獲取數據。而後將獲取的數據添加到model對象中，在添加時，咱們會爲該數據對象指定一個參數名稱，以下方的"contents"。而後返回模板頁面便可，下方的「display」就是咱們模板頁面所在的文件名稱。

　　

 

三、建立模板頁面

而後咱們就該建立模板頁面了，也就是此處的display.html。下方就是display.html頁面的全部內容。其中咱們爲數據的顯示添加了一些css樣式，並使用CDN引入了目前最新版本的Bootstrap。下方帶有「th:」前綴的屬性就是Thymeleaf模板的標籤。

首先使用「th:if="${not #lists.isEmpty(contents)}"」來判斷contents屬性所對應的值是否爲空，若是不爲空，則執行標籤中的內容。而後使用th:if="${not #lists.isEmpty(contents)}"來遍歷contents中的內容，相似於while循環。經過th:each="content:${contents}"取出每一項的數據。經過th:text="${content.contentId}"取出某個屬性的值。具體內容以下所示。

複製代碼 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta content="text/html;charset=UTF-8"/>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Content</title>
</head>
<body>
    <div class="center-block" style="width:800px" th:if="${not #lists.isEmpty(contents)}">
        <div class="row"  style="height:50px;  color: #ffffff">
          <div class="col-md-1">CotentId</div>
          <div class="col-md-2">Title</div>
          <div class="col-md-5">Cotent</div>
          <div class="col-md-1">UserId</div>
          <div class="col-md-2">CreateTime</div>
        </div>
        <div th:if="${not #lists.isEmpty(contents)}">
            <div class="row" th:each="content:${contents}" style="height:40px; margin-top: 1px; color: #ffffff">
              <div class="col-md-1"><span th:text="${content.contentId}"></span></div>
              <div class="col-md-2"><span th:text="${content.title}"></span></div>
              <div class="col-md-5"><span th:text="${content.content}"></span></div>
              <div class="col-md-1"><span th:text="${content.userID}"></span></div>
              <div class="col-md-2"><span th:text="${content.createTime}"></span></div>
            </div>
        </div>
    </div>
    
</body>
</html>
複製代碼

 

四、訪問上述路由

建立完展現用的模板後，接下來咱們要作的事情就是要對其進行訪問了。下方截圖就是咱們最終的訪問結果。

　　

本篇博客就先到這兒吧，之後還會使用到MyBatis的其餘內容，到時候再細說。

本篇博客所涉及代碼的github地址：https://github.com/lizelu/SpringBootProject

http://www.cnblogs.com/ludashi/p/6669133.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程