B2C電商項目 thymeleaf頁面靜態化模塊工作總結

一、Thymeleaf

1.1、Thymeleaf介紹

thymeleaf是一個XML/XHTML/HTML5模板引擎，可用於Web與非Web環境中的應用開發。它是一個開源的Java庫，基於Apache License 2.0許可，由Daniel Fernández創建，該作者還是Java加密庫Jasypt的作者。Thymeleaf提供了一個用於整合Spring MVC的可選模塊，在應用開發中，你可以使用Thymeleaf來完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式，因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。相對於編寫邏輯或代碼，開發者只需將標籤屬性添加到模板中即可。接下來，這些標籤屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。

它的特點便是：開箱即用，Thymeleaf允許您處理六種模板，每種模板稱爲模板模式：

XML
有效的 XML
XHTML
有效的 XHTML
HTML5
舊版 HTML5

所有這些模式都指的是格式良好的XML文件，但Legacy HTML5模式除外，它允許您處理HTML5文件，其中包含獨立（非關閉）標記，沒有值的標記屬性或不在引號之間寫入的標記屬性。爲了在這種特定模式下處理文件，Thymeleaf將首先執行轉換，將您的文件轉換爲格式良好的XML文件，這些文件仍然是完全有效的HTML5（實際上是創建HTML5代碼的推薦方法）。
另請注意，驗證僅適用於XML和XHTML模板。然而，這些並不是Thymeleaf可以處理的唯一模板類型，並且用戶始終能夠通過指定在此模式下解析模板的方法和編寫結果的方式來定義他/她自己的模式。這樣，任何可以建模爲DOM樹（無論是否爲XML）的東西都可以被Thymeleaf有效地作爲模板處理。

2.2、Springboot 整合thymeleaf

使用springboot 來集成使用Thymeleaf可以大大減少單純使用thymleaf的代碼量，所以我們接下來使
用springboot集成使用thymeleaf.

實現的步驟爲：
創建一個 sprinboot項目
添加 thymeleaf的起步依賴
添加 spring web的起步依賴
編寫 html 使用thymleaf的語法獲取變量對應後臺傳遞的值
編寫 controller 設置變量的值到model中

(1)創建工程
創建一個獨立的工程springboot-thymeleaf,該工程爲案例工程作爲聯繫入門的Demo。
pom.xml依賴

<?xml version="1.0" encoding="UTF-8"?>
<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>com.itheima</groupId>
  <artifactId>springboot-thymeleaf</artifactId>
  <version>1.0-SNAPSHOT</version>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.4.RELEASE</version>
  </parent>
  <dependencies>
    <!--web起步依賴-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--thymeleaf配置-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  </dependencies>
</project>

(2) 創建包com.itheima.thymeleaf.並創建啓動類ThymeleafApplication

@SpringBootApplication
public class ThymeleafApplication {
  public static void main(String[] args) {
    SpringApplication.run(ThymeleafApplication.class,args);
 }
}

(3)創建application.yml
設置thymeleaf的緩存設置，設置爲false。默認加緩存的，用於測試。

spring:
thymeleaf:
 cache: false

(4)控制層
創建controller用於測試後臺設置數據到model中。
創建com.itheima.controller.TestController，代碼如下：


@Controller
@RequestMapping("test")
public class TestController {

    @RequestMapping("/hello")
    public String hello(Model model){
        model.addAttribute("hello","hello thymeleaf");
        return "demo";
    }

}

創建html
在resources中創建templates目錄，在templates目錄創建 demo.html,代碼如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf入門</title>
</head>
<body>

<h1 th:text="${hello}"></h1>

注意：這句命名空間必須寫上

<html xmlns:th="http://www.thymeleaf.org">

解釋

解釋：
<html xmlns:th="http://www.thymeleaf.org"> :這句聲明使用thymeleaf標籤
<p th:text="${hello}"></p> :這句使用 th:text="${變量名}" 表示 使用thymeleaf獲取文本數據，類
似於EL表達式。

測試
啓動系統，並在瀏覽器訪問
http://localhost:8080/test/hello

效果：

2.3、Thymeleaf 基本語法（重點掌握）

(1)th:action
定義後臺控制器路徑，類似 < form> 標籤的action屬性。
例如：

<form th:action="@{/test/hello}" >
  <input th:type="text"  th:name="id">
  <button>提交</button>
</form>

(2)th:each
對象遍歷，功能類似jstl中的 < c:forEach> 標籤。
創建com.itheima.model.User,代碼如下：

public class User {
  private Integer id;
  private String name;
  private String address;
  //..get..set
}

Controller添加數據

/***
* 訪問/test/hello 跳轉到demo1頁面
* @param model
* @return
*/
@RequestMapping("/hello")
public String hello(Model model){
  model.addAttribute("hello","hello welcome");
  //集合數據
  List<User> users = new ArrayList<User>();
  users.add(new User(1,"張三","深圳"));
  users.add(new User(2,"李四","北京"));
  users.add(new User(3,"王五","武漢"));
//類似於Map的 key value 形式
  model.addAttribute("users",users);
  return "demo1";
}

頁面輸出

<table>
    <th>
        <td>下標</td>
        <td>編號</td>
        <td>姓名</td>
        <td>住址</td>
    </th>

    <tr th:each="user,userStat:${users}">
        <td>
            下標：<span th:text="${userStat.index}"></span>
        </td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>

</table>

測試效果

（3）Map輸出
後臺添加Map

      //Map定義
        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("N0","123");
        dataMap.put("address","深圳");
        dataMap.put("N1","123");
        dataMap.put("address","北京");
        model.addAttribute("dataMap",dataMap);

<div th:each="map,mapStat:${dataMap}">
  <div th:text="${map}"></div>
 key:<span th:text="${mapStat.current.key}"></span><br/>
 value:<span th:text="${mapStat.current.value}"></span><br/>
 ==============================================
</div>

（4）數組輸出
後臺添加數組

//存儲一個數組
String[] names = {"張三","李四","王五"};
model.addAttribute("names",names);

頁面輸出

<div th:each="name,nameStats:${names}">
    ======================
    <span th:text="${nameStats.count}"></span> &nbsp;
    <span th:text="${name}"></span> &nbsp;
</div>

輸出效果：

(5)Date輸出
後臺添加日期

//日期
model.addAttribute("now",new Date());

頁面輸出

<div>
  <span th:text="${#dates.format(now,'yyyy-MM-dd hh:ss:mm')}"></span>
</div>

效果：

(6)th:if條件
後臺添加年齡

//if條件
model.addAttribute("age",22);

頁面輸出

<div>
  <span th:if="${(age>=18)}">終於長大了！</span>
</div>

測試效果：

(7)th:fragment 定義一個模塊
可以定義一個獨立的模塊，創建一個footer.html代碼如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=charset=utf-8">
  <title>fragment</title>
</head>
<body>
<div id="C" th:fragment="copy" >
 關於我們<br/>
</div>
</body>

(8)th:include
可以直接引入 th:fragment ,在demo1.html中引入如下代碼：

<div id="A" th:include="footer::copy"></div>

效果演示：

B2C電商項目 thymeleaf頁面靜態化模塊工作總結

一、Thymeleaf

1.1、Thymeleaf介紹

2.2、Springboot 整合thymeleaf

注意：這句命名空間必須寫上

2.3、Thymeleaf 基本語法（重點掌握）

Springboot 整合Dubbo 、整合JunitTest、Mybatis、Redis、Freemarker

MySQL高級部分

複習SSM day01 SSM Maven工程的搭建及配置文件

B2C電商項目秒殺業務工作總結

B2C電商項目 thymeleaf頁面靜態化模塊工作總結

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

B2C電商項目 thymeleaf頁面靜態化模塊 工作總結

一、Thymeleaf

1.1、Thymeleaf介紹

2.2、Springboot 整合thymeleaf

注意：這句命名空間必須寫上

2.3、Thymeleaf 基本語法 （重點掌握）

B2C電商項目 thymeleaf頁面靜態化模塊工作總結

2.3、Thymeleaf 基本語法（重點掌握）