快捷導(dǎo)航

springboot配合Thymeleaf完美實(shí)現(xiàn)遍歷功能

更新時(shí)間：2021年09月16日 10:54:17 作者：夜色架構(gòu)師

Thymeleaf顯然是一個(gè)開(kāi)發(fā)頁(yè)面的技術(shù)，現(xiàn)在各種前端技術(shù)層出不窮，比如現(xiàn)在主流的Vue、React、AngularJS等。這篇文章主要介紹了springboot配合Thymeleaf完美實(shí)現(xiàn)遍歷,需要的朋友可以參考下

一. 什么是Thymeleaf

Thymeleaf是面向Web和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端Java模板引擎。
Thymeleaf的主要目標(biāo)是為您的開(kāi)發(fā)工作流程帶來(lái)優(yōu)雅的自然模板 - 可以正確顯示在瀏覽器中的HTML，也可以作為靜態(tài)原型工作，從而在開(kāi)發(fā)團(tuán)隊(duì)中進(jìn)行更強(qiáng)大的協(xié)作。
隨著Spring框架的模塊，與您最喜歡的工具的集成，以及插入自己的功能的能力，Thymeleaf是現(xiàn)代HTML5 JVM Web開(kāi)發(fā)的理想選擇，盡管它可以做的更多。

好吧，我承認(rèn)剛才那段是Thymeleaf官方的說(shuō)明，我只不過(guò)機(jī)翻了一下。下面咱們說(shuō)點(diǎn)人話(huà)。Thymeleaf就是jsp的高端升級(jí)版。

二. 什么情況適合使用Thymeleaf

Thymeleaf顯然是一個(gè)開(kāi)發(fā)頁(yè)面的技術(shù)，現(xiàn)在各種前端技術(shù)層出不窮，比如現(xiàn)在主流的Vue、React、AngularJS等。很多人可能會(huì)要問(wèn)，這個(gè)Thymeleaf相對(duì)于這些前端框架到底有啥優(yōu)勢(shì)。
其實(shí)，Thymeleaf跟那些前端框架根本不是一個(gè)類(lèi)型的東西，也沒(méi)有啥可比性。

Thymeleaf和老牌的jsp屬于非前后分離的思路來(lái)開(kāi)發(fā)的。后端通過(guò)數(shù)據(jù)渲染html的模板，渲染后模板就是個(gè)完整的html頁(yè)面，將頁(yè)面返回給請(qǐng)求方。

主流的前端框架是基于前后端分離的思路來(lái)開(kāi)發(fā)的，前端頁(yè)面通過(guò)ajax來(lái)調(diào)用后端的rest接口來(lái)獲取數(shù)據(jù)，再通過(guò)js進(jìn)行渲染頁(yè)面（不管什么前端技術(shù)其實(shí)都是對(duì)js進(jìn)行了封裝，js依然是底層核心）。

下面看下springboot配合Thymeleaf完美實(shí)現(xiàn)遍歷功能，內(nèi)容詳情如下所示：

1：控制層代碼，寫(xiě)一個(gè)數(shù)組集合

請(qǐng)?zhí)砑訄D片描述

2：視圖層：寫(xiě)th:each這里類(lèi)似于vue語(yǔ)法

請(qǐng)?zhí)砑訄D片描述

結(jié)果展示：

請(qǐng)?zhí)砑訄D片描述

源碼：控制層

package com.example.demo.controller;


import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;


/**
 * @author ${范濤之}
 * @Description
 * @create 2021-09-11 20:31
 * 自動(dòng)裝配
 * 本身就是spring的組件
 */
@Controller
public class HelloController {
    @GetMapping("/test")
    public  String test(Model model){
        model.addAttribute("msg","<h1>helloftzdsj</h1>");


        model.addAttribute("users", Arrays.asList("fantaozhi","dengsijia"));

        return "index";
    }


}

源碼：視圖層

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:text="${msg}"></div>
<div th:utext="${msg}"></div>   //轉(zhuǎn)意

<hr>
<h3 th:each="user:${users}"  th:text="${user}"></h3>
</body>
</html>

同樣可以在視圖層這樣寫(xiě)：
使用中括號(hào)（但是不建議）

<h3 th:each="user:${users}"> [[${user}]]</h3>

實(shí)現(xiàn)了同樣的效果

到此這篇關(guān)于springboot配合Thymeleaf完美實(shí)現(xiàn)遍歷的文章就介紹到這了,更多相關(guān)springboot Thymeleaf遍歷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: