SSM框架——thymeleaf學習總結-有解無憂

本人關于thymeleaf的學習源自：

https://www.bilibili.com/video/BV1qy4y117qi

1、thymeleaf的專案搭建

　　首先創建springboot專案，相關博客有詳細的創建教程，下方僅本人推薦示例（視頻中也有相關專案創建教程）：

　　IDEA創建專案教程　　　　:https://www.jianshu.com/p/40422d484475

　　eclipse創建專案教程　　　 :https://blog.csdn.net/qq_35170365/article/details/80688484

　　專案搭建完成后,配置application.properties，配置如下，埠號只要不和本機當前口號沖突即可，本人用的是8001

server.port=8001
spring.thymeleaf.cache=false

　　創建thymeleaf網頁模板，相關代碼如下:

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

</body>
</html>

2、第一個程式

專案結構如圖：

　　第一個程式（基本使用），實作前端標題的資料渲染，先上代碼：

　　后臺創建包controller以及類IndexController：

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","傳遞的title");
        model.addAttribute("keywords","傳遞的keywords");
        model.addAttribute("description","傳遞的description");
        return "index";
    }
}

　　前端創建html網頁，index.html，代碼如下：

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="|localhost-${title}|">默認的Title</title>
    <meta th:content="${description}" name="description" content="默認的description">
    <meta th:content="${keywords}" name="keywords" content="默認的keywords">
</head>
<body>

</body>
</html>

　　結果實作如下：

3、常用方法

　　實作后臺資料的前端實作，有關物件與類的資料傳遞：

　　后臺創建物體類 User.java，代碼如下：

package com.thym.thymdemo.view;

import lombok.Data;

import java.util.Date;
import java.util.List;

/**
 * @author June
 * @date 2021/12/25 15:46
 */
@Data
public class User {
　　//其中lombok插件可實作創建get、set方法，所以此處并未創建get、set方法
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVip;
    private Date createTime;
    private List<String> tags;

}

　　IndexController.java 有關代碼修改如下;

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","傳遞的title");
        model.addAttribute("keywords","傳遞的keywords");
        model.addAttribute("description","傳遞的description");
        return "index";
    }
    @GetMapping("/basic")
    public String basic(Model model){//此處即為javaweb專案中的前后端傳值行為
        User user = new User();
        user.setUsername("lookroot");
        user.setAge(32);
        user.setSex(1);
        user.setIsVip(false);
        user.setCreateTime(new Date());
        user.setTags(Arrays.asList("PHP","Java"));
        model.addAttribute("user",user);
        return "basic";
    }
}

　　前端創建html頁面，basic.html 代碼如下;

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<h2 th:text="${user.username}"></h2>
    <h2 th:text="${user.age}"></h2>
    <h2 th:text="${user.sex}"></h2>
    <h2 th:text="${user.isVip}"></h2>
    <h2 th:if="${user.isVip}">會員</h2>
    <h2 th:text="${user.createTime}"></h2>
    <h2 th:text="${user.tags}"></h2>-->
<div th:object="${user}">
    <h2 th:text="*{username}"></h2>
    <h2 th:text="*{age}"></h2>
    <h2 th:text="*{sex}"></h2>
    <h2 th:text="*{isVip}"></h2>
    <!--這里運用if標簽判斷該屬性是否為真，如果為真則顯示標題內容，如果為否則不顯示相關內容-->
    <h2 th:if="*{isVip}">會員</h2>
    <h2 th:text="*{createTime}"></h2>
    <h2 th:text="*{tags}"></h2>
</div>
    <!--規范話日期格式-->
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
<ul>
    <!--以串列形式顯示List集合的各項-->
    <li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
    <!--選擇結構實作資料的前端顯示-->
<div th:switch="${user.sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">默認</p>
</div>
    <!--replace com1-->
    <div th:replace="~{component::com1}"></div>
    <!--insert com1-->
    <div th:insert="~{component::com1}"></div>
    <!--id com2-->
    <div th:insert="~{component::#com2}"></div>
    <div th:insert="~{component::com3('傳遞的資料')}"></div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替換的模塊</p>
    </div>
</body>
</html>

　　實作結果如下;

4、thymeleaf中JavaScript、css的應用

　　thymeleaf+css，首先在src\main\resources\static目錄下，創建css檔案，寫入如下代碼：

.app{
    height: 300px;
    width: 300px;
    background-color: blue;
}

　　前端basic頁面中代碼添加如下（由于所參考的css檔案在根目錄下，所以可以直接參考）：

<div class="app"></div>

　　顯示效果如下：

　　在html頁面內部直接寫入css有關代碼

　　前端添加代碼如下：　

<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active"></li>
</ul>

　　結果顯示如下：

5、thymeleaf中組件的使用

　　創建component.html頁面，寫入如下代碼：

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <footer th:fragment="com1">
        <!--/*@thymesVar id="user" type="com.thym.thymdemo.view.User"*/-->
        <h2 th:text="${user.username}"></h2>
        com1
    </footer>
    <div id="com2">
        com2
    </div>
    <div th:fragment="com3(message)">
        <p th:text="${message}"></p>
    </div>
    <div th:fragment="com4(message)">
        <p th:replace="${message}"></p>
    </div>
</body>
</html>

　　前端頁面basic頁面代碼修改如下;

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{app.css}">
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <!--規范話日期格式-->
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
<ul>
    <!--以串列形式顯示List集合的各項-->
    <li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active"></li>
</ul>
    <!--replace com1-->
    <div th:replace="~{component::com1}"></div>
    <!--insert com1-->
    <div th:insert="~{component::com1}"></div>
    <!--id com2-->
    <div th:insert="~{component::#com2}"></div>
    <div th:insert="~{component::com3('傳遞的資料')}"></div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替換的模塊</p>
    </div>
</body>
<script th:inline="javascript">
    const user = /*[[${user}]]*/{}
    console.log(user)
</script>
</html>

　　實作結果如下：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/393864.html

標籤：Html/Css

上一篇：如何洗掉一項Vectorsc

下一篇：面向物件編程原型鏈繼承