.1、 循環表達式語法

thymeleaf使用th:each屬性可以對數組，集合進行循環，此屬性用在容器元素上，循環生成子元素。

語法

th:each="循環出的元素 , 循環狀態 : 集合或數組"

6.2、數組的循環

示例

在TestServlet中定義一個數組

String [] arr = {"HTML","CSS","JavaScript"};
request.setAttribute("arr",arr);

在index.html中循環顯示數組中的元素

<div th:text="'數組元素數量：' + ${arr.length}"> </div><!--獲取數組元素的數量-->
<ul th:each="s : ${arr}">
	<li th:text="${s}"></li>
</ul>

運行test.do，頁面顯示效果如下

6.3、循環狀態的使用

在th:each中循環狀態不是必須的，它是一個對象，具有以下屬性

修改上一個示例，顯示每次循環的各狀態的值

<table border="1">	
	<tr>			
       <th>當前迭代索引</th>	
       <th>當前迭代計數</th>	
	<th>元素的總量</th>	
	<th>當前遍歷到的元素</th>		
	<th>當前遍歷的偶數</th>			
        <th>是否是第一條</th>			
        <th>是否是最后一條</th>	
	</tr>		
<tbody th:each="s,status : ${arr}">		
	<tr><td th:text="${status.index}"></td>			
	    <td th:text="${status.count}"></td>			
	    <td th:text="${status.size}"></td>	
	    <td th:text="${status.current}"></td>				
            <td  th:text="${status.even}"></td>		
            <td th:text="${status.first}"></td>			
	    <td th:text="${status.last}"></td>	
	</tr>	
</tbody>
	</table>

運行test.do，頁面顯示效果如下

6.4、list的循環

示例

在TestServelt中添加一個List集合

List list = new ArrayList<>();
 list.add("HTML"); 
list.add("CSS");
list.add("JavaScript");
request.setAttribute("list", list);

在index.html中循環顯示列表中的數據

<div th:text="'list中元素數量：' + ${list.size}"> </div>
<ul th:each="s : ${list}">
	<li th:text="${s}"></li>
</ul>

運行test.do，頁面顯示效果如下

6.5、map集合的訪問

1) 直接訪問

map集合可以通過key獲取值，也可以獲取集合中元素的數據

示例

在TestServelt中添加map集合

Map<String,String> map = new HashMap<>();
map.put("HTML", "超文本標記語言");
map.put("CSS", "層疊樣式表");
request.setAttribute("map", map);

在頁面中輸出map的信息

<ul>		

<li >集合：[[${map}]]</li>		
<li>指定key的值：[[${map.HTML}]]</li>		
<li>集合中元素的數量:[[${map.size}]]</li>		
	</ul>

運行test.do，頁面顯示效果如下

2）循環訪問

Map循環的每個元素的類型是Entry，可以通過此Entry對象的key屬性獲取鍵，value屬性獲取值

修改index.html，循環顯示map集合中的內容

<ul th:each="entry : ${map}">		
<li >			
<strong th:text="${entry.key}"></strong> 
:
<em th:text="${entry.value}"></em>		
</li>	</ul>

運行test.do，頁面顯示效果如下

6.6 th:block標簽

在使用th:if時，如果是一當條件成立需要加載一組標簽，在循環時，循環的元素外沒有容器時，可以使用th:block標簽做為外容器，th:block僅是一個屬性容器，允許開發人員指定他們想要的任何屬性

示例

<th:block th:each="s : ${list}">     
  <div th:text="${s}"></div></th:block>

文章來源于嗶站《六、循環表達式 - 嗶哩嗶哩》

更多學習視頻和專欄文章請到嗶站個人空間： 布道師學院的個人空間-布道師學院個人主頁-嗶哩嗶哩視頻

更多資源和項目下載請到：”開源吧（找實戰項目和畢設項目的好網站）“ ：開源吧

現代網頁設計中，動畫和過渡是提升用戶體驗的重要手段。通過使用 CSS，我們可以在不影響頁面性能的前提下，實現平滑和吸引人的視覺效果。本文將介紹 CSS 動畫和過渡的基礎知識，并通過幾個例子展示如何在你的網站中應用它們。

CSS 過渡（Transitions）

CSS 過渡允許你在 CSS 屬性值之間創建平滑的動畫效果。當一個元素的屬性值改變時，過渡效果會在一定時間內平滑地過渡到新的屬性值。

基本語法

transition: property duration timing-function delay;

• property：指定要添加過渡效果的 CSS 屬性。
• duration：過渡效果的持續時間。
• timing-function：定義速度曲線的函數。
• delay：過渡效果的延遲時間。

例子 1：鼠標懸停放大圖片

img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

這個例子中，當鼠標懸停在圖片上時，圖片會在0.3秒內放大到原來的1.2倍大小，過渡效果為ease-in-out。

CSS 動畫（Animations）

CSS 動畫提供了更強大的控制，允許你創建復雜的動畫序列，通過定義關鍵幀（keyframes）來控制動畫的中間狀態。

基本語法

@keyframes animation-name {
  from {
    /* 初始狀態 */
  }
  to {
    /* 結束狀態 */
  }
}

或者使用百分比來定義多個關鍵幀：

@keyframes animation-name {
  0% { /* 初始狀態 */ }
  50% { /* 中間狀態 */ }
  100% { /* 結束狀態 */ }
}

例子 2：無限旋轉圖標

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spin {
  animation: spin 2s linear infinite;
}

這個例子創建了一個名為spin的動畫，使得圖標無限期地旋轉。

實戰例子

接下來，我們將通過幾個實戰例子來展示 CSS 動畫和過渡的具體應用。

例子 3：按鈕點擊波紋效果

.button {
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s;
}

.button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.button:active:after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0.5s, height 0.5s, opacity 0s 0.5s;
}

在這個例子中，當按鈕被點擊時，會產生一個波紋效果，模擬水波紋擴散。

例子 4：淡入淡出切換效果

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fadeOut 1s ease-in-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

這個例子中定義了兩個動畫，一個用于元素的淡入，另一個用于元素的淡出。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation and Transition Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }

  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .logo {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 20px;
    animation: spin 3s linear infinite;
  }

  .scrolling-text {
    margin: 20px 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
  }

  .scrolling-text p {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    transform: translateX(100%);
    /* Apply animation to this element */
    animation: scroll-text 10s linear infinite;
  }

  @keyframes scroll-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  .interactive-card {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .interactive-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .color-block {
    width: 100px;
    height: 100px;
    background-color: #17a2b8;
    margin: 20px;
    border-radius: 50%;
    transition: background-color 0.5s ease, transform 0.5s ease;
  }

  .color-block:hover {
    background-color: #28a745;
    transform: rotate(180deg);
  }
</style>
</head>
<body>

<div class="logo">
  <i class="fas fa-sync-alt"></i> Animated Logo
</div>

<div class="scrolling-text">
  <p>This text scrolls infinitely. Pay attention to how it moves smoothly from right to left.</p>
</div>

<div class="interactive-card">
  <h3>Interactive Card</h3>
  <p>Hover over this card to see it move. It's a simple yet effective way to add interactivity to your design.</p>
</div>

<div class="color-block"></div>

</body>
</html>

• .logo 類定義了一個徽標，它具有字體大小和顏色，并應用了一個名為 spin 的關鍵幀動畫，使徽標無限旋轉。
• .scrolling-text 類定義了一個包含滾動文本的容器，設置了背景顏色、文字顏色和內邊距。
• .scrolling-text p 選擇器定義了滾動文本的樣式，包括動畫 scroll-text，使文本從右向左無限滾動。
• .interactive-card 類定義了一個交互式卡片，它具有背景顏色、陰影、內邊距和圓角。當鼠標懸停時，它會向上移動并增加陰影，這是通過 transition 屬性實現的。
• .color-block 類定義了一個顏色塊，設置了寬度、高度、背景顏色和圓角。當鼠標懸停時，它的背景顏色會改變，并且會旋轉 180 度。
• body 的背景被設置為一個線性漸變，包含四種顏色。通過 background-size 屬性，我們擴大了背景尺寸，這樣動畫在運行時會有更多的空間進行顏色的過渡。
• @keyframes gradientBG 關鍵幀動畫被創建來改變背景的位置，從而在不同的顏色之間產生平滑過渡的效果。
• 該動畫被設置為無限循環，并且每次循環持續 15 秒，通過 ease 時間函數來平滑過渡。

結語

CSS 動畫和過渡是前端開發者的強大工具，它們可以在不犧牲性能的情況下為用戶提供流暢、引人注目的界面交互。通過掌握這些技術，你可以創造出更加動態和生動的網頁體驗。記住，動畫應該用來增強用戶體驗，而不是分散用戶的注意力，適量而恰當地使用動畫效果是關鍵。

文概述：如何使用 nodejs 在服務端將 html 批量轉成 pdf 并客戶端下載。

目標一：使用 node 在服務端實現 html 批量轉成 pdf

分為兩步：

1. 找段 html 把它轉成 pdf。
2. 循環執行第一步就達到了批量操作目的。

• 準備html 片段：<div>111</div>
• 將html 片段轉 pdf 。

自己轉（存疑）？或者找個中間件。自己轉的話。。。算了，找插件。

網上搜到了 html-pdf，看了下周下載量接近 7W，版本迭代 21 個，最近更新時間 latest，不錯，整體滿足心里預期。

api使用如圖：

提供了三種接口：文件、stream 流、buffer。不同返回值類型，使用 toFile()需要 2 個參數：文件地址（末尾要有文件名）、回調函數。

toFile()結果會在指定文件夾生成 pdf 文件；

toStream()、toBuffer()可以在回調里拿到pdf文件數據流

目標二：將 PDF 傳到客戶端

怎么傳輸？

經過分析歸納，可以濃縮為 3 個點：

1. 傳輸者：誰是傳輸者？它肯定是個主動行為，就像點擊事件你必須先有一個點擊動作一樣。由此聯想：接口，回調，node，req，res，send，end，前端 success 接收 data，res 浮現而出。
2. 傳輸方法：原生 res.end()，express 框架 res.send()，res.sendFile()，res.download()，fs 模塊 res.createWriteStream()，管道 pipe()。
3. 傳輸內容：PDF 文件，stream 流，buffer，二進制流，下載鏈接，base64 碼。

以下分析可以略過直接到結果：

分析：測試用的是 express 框架，那么可以排除原生 res.end()（存疑），為啥排除它？有 send 我干嘛還用 end；將 pdf 傳向客戶端又不是下載或寫入文件，排除 createWriteStream()方法；PDF 文件可以自己跑過去嗎？肯定不行！如果啥都不動能不能成功下載文件？也可以。鏈接下載，好像挺萬能。base64 能用嗎？。。。好像是圖片在用！不知道對文件好使不好使（存疑）。

篩選后：

傳輸方法：res.send()、管道 pipe()；

傳輸內容：stream 流、buffer、下載鏈接；

使用下載鏈接：

經過分析了，下載鏈接肯定能實現這個功能！為什么呢？只要把 pdf 的文件路徑用變量存下來，然后返回給前端，拿著絕對路徑地址模擬點擊下載應該就能實現！但這種方法并沒有在真正意義上跟要傳輸的內容打交道，所以還值得繼續探索。

最終決定使用，管道pipe()發送stream流輸出PDF文件流到客戶端

目標三：客戶端可以成功接收并自動下載

網上搜索有：Windows.open（）方法，iframe 等。感覺都有點偏。

本文使用a標簽實現，其他方法另行嘗試。

ajax + a標簽

$.ajax({
    url:'url',
    responseType:'blob',
    success (res) {
        console.log(res.toString('utf-8'));
        // 創建 blob 對象，解析流數據
    // , {
         // 如何后端沒返回下載文件類型，則需要手動設置：type: 'application/pdf;chartset=UTF-8' 表示下載文檔為 pdf，如果是 word 則設置為 msword，excel 為 excel
    //         type: 'application/pdf;chartset=UTF-8'
    //     }
        const blob = new Blob([res]);
        const a = document.createElement('a')
    //     // 兼容 webkix 瀏覽器，處理 webkit 瀏覽器中 href 自動添加 blob 前綴，默認在瀏覽器打開而不是下載
        const URL = window.URL || window.webkitURL
    //     // 根據解析后的 blob 對象創建 URL 對象
        const herf = URL.createObjectURL(blob)
        // 下載鏈接
        // a.href = 'url'
        a.href = herf
        // // 下載文件名,如果后端沒有返回，可以自己寫 a.download = '文件.pdf'
        a.download = '文件.pdf'
        // document.body.appendChild(a)
        a.click()
        // document.body.removeChild(a)
        // 在內存中移除 URL 對象
        window.URL.revokeObjectURL(herf)
    }
})

傳統jQuery接收數據流后，需要使用new Blob([res])再處理才能繼續使用，

而，fetch也需要，不過簡便多了

fetch+ a標簽

//1.請求
let res = await fetch([地址]);
//2.解析
let data = res.blob()
//3.創建a標簽
let eleA = document.createElement('a')
//4.創建鼠標事件對象
let e = document.createEvent("MouseEvents")
//5.初始化事件對象
e.initEvent("click", false, false)
?
?
document.body.appendChild(eleA)
eleA.download = 'index.zip'
eleA.href = data
//給指定的元素，執行事件 click 事件
eleA.dispatchEvent(e)
document.body.removeChild(eleA)

報錯：

eleA.href直接使用 blob 數據作為下載鏈接是不行的，必須使用 window.URL 對象，果然無知者無畏，更改后的代碼如下：

//1.請求
let res=await fetch([地址]);
//2.解析
let data=await res.blob();
const a = document.createElement('a')
const URL = window.URL || window.webkitURL
const herf = URL.createObjectURL(data)
a.href = herf
a.download = '文件.zip'
a.click()
window.URL.revokeObjectURL(herf)

使用 oFile() 測試

server.get('/', async (req, res) => {
    toPdf(res);
});
?
?
function toPdf (res) {
    let archive = archiver('zip', {
    zlib: { level: 9 } // 設置壓縮級別
    });
    archive.on('error', function(err){
        throw err;
    });
    archive.pipe(res);
    for (let i = 0; i < 100; i++) {
        let html = `<div style="width: 100px;height:100px;background:#fff;color:red;font-size:16px;font-weight:bold">這是第 <span>${i}</span> 個 pdf</div>`;
        pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
             archive.glob('static/*')
             archive.finalize()
        })
    }
}

看命令窗口偶爾還會報 Queue Closed 錯誤；

觀察發現程序一邊轉 pdf，一邊下載，而且是按照順序轉換下載有 0.1.2.3...，最后壓縮返回，這個過程循環很少時發現沒問題，但次數增加很多后如20，100次，當for循環到最后一次時，直接執行archiver.finalize(),完。。。結束了，所以造成Queue Closed原因是沒限制archiver.finalize()執行時機？？？

找證據：

官方文檔顯示：

// finalize the archive (ie we are done appending files but streams have to finish yet)

// 完成存檔

// 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand

// 調用此方法后，可能會立即觸發“ close”，“ end”或“ finish”，因此請事先注冊

archive.finalize();

果然，，

添加結束條件：

pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
     if (i === 99) {
       archive.glob('static/*')
       archive.finalize()
     }
})

執行成功，Queue Closed沒出現，并且在瀏覽器自動下載了一個壓縮包，打開后

發現只有 91 個文件，缺少了最后幾個文件，

for 循環明明執行了 100 次。百思不得解，開始我以為跟網絡有關系，畢竟有傳言只要（網絡）夠快什么（隊列關閉）錯誤都追不上你。后來我發現用筆記本執行程序這個錯誤會頻繁出現，

查看了 html-pdf 源碼猜測會不會是同步在阻塞，導致循環結束后 PDF 生成文件還未完成導致 Queue Closed，怎么解決呢，閉包！具體原理未知（存疑），

經過修改

((html, i) => {
  pdf.create(html).toFile(`./static/${i}.pdf`, () => {
        if (i === 49) {
            archive.glob('static/*')
            archive.finalize();
        }
    })
})(html, i)

成功！！！打開壓縮文件查看文件總數，

一切正常，Good！

使用 toStream()測試

(function(html, i) {
    pdf.create(html).toStream((err, stream) => {
        archive.append(stream, { name: `${i}.pdf`});
        if (i === 99) {
            archive.finalize();
        }
    });
})(html, i)

我去，第一次跑果然有問題，反復執行多次總是缺少前幾個文件

第一次跑，少了第一個文件 1.pdf:

第二次，循環執行 50 次，結果只有 45 個成功，前 5 個失敗:

命令行打印也證明了這一點。。。每次失敗個數竟然還不同，但還好有個規律它們都是前幾個

。。。

繼續執行，竟然還有其他報錯類型。。。無語。。

大致意思是:輸入資源必須是 Stream 流或者 Buffer，可能是在使用 archiver.append 時塞入了 undefined 之類的，給它上個保險，如果值存在才執行

stream && archive.append(stream, { name: `${i}.pdf`});

綜合問題共有 2 個：1.并不是所有 html 片段都進行了轉換 PDF 的操作，可能會隨機出現遺漏，比如 45.46.突然就到 48；2.即使所有 html 都進行了轉換操作，還總是缺少前面幾個文件。

問題一解決：

html-pdf 源碼如下圖

研究發現 html-pdf 的 toStream 應該是一個異步方法，查看源碼后 stream.on('end')也證明了這一點。由于不是順序生成 stream 流，那么最后一個流生成并不代表所有都完成，所以當用 i===99 判斷結束就有問題，可能會跳過某一個不執行轉換PDF需要len=50來避免，然而添加過后，每個文件都進行了PDF轉換，但是stream顯示為undefined，進而PDF文件也總是少前面幾個，導致 i=99 出現時還有好多 toStream 沒有完成，SO 第一個問題就出現了；（注：不過異步操作也因此避免同步帶來方法一的問題:隊列關閉錯誤。）

原因找到，解決辦法就是添加變量手動強行控制進程：

如圖，len 初始 100，減為 0 時代表所有都已經轉換，可以結束

let len = 100;
然后，開始計數，不到最后一個完成 stream 流轉換不結束
pdf.create(html).toStream((err, stream) => {
    len--;
    stream && archive.append(stream, { name: `${i}.pdf`});
    if (len === 0) {
        archive.finalize();
    }
});

命令行打印下錯誤信息看看怎么回事控制臺

問題二解決：

先打印下錯誤信息 console.log('err：', err)

暴露了，PDF generation timeout. 一個 timeout 已經夠了，能夠說明很多問題，html-pdf 提供了轉換超時限制，時間超出 timeout 自然無法成功轉換成 stream 流輸出，解決辦法更簡單：

官方文檔，給出了一個配置項 options:{}對象，其中就有 timeout 設置，我們可以視情況放大此參數，

// 一分鐘內轉 pdf 不成功，則視為失敗
let options = {
    timeout: 60000
}
pdf.create(html, options).toStream((err, stream) => {
    。。。。。。
});

繼續測試，終于完成。。。

結語：

1.本文走了許多彎路，踩了多多個坑；

2.文中標記存疑的地方依然有很多，都是等待去學習理解的地方；

3.對于名詞、問題的解釋描述不夠精準透徹，需要深度挖掘對知識點的認知；

4.對問題的解決方式不夠標準、熟練，這才是造成多走彎路的原因；

5.雖然解決問題才是我們的最終目的，但是仍需追求解決方式的多樣化，找到問題的根源 格物致知 才能給自己醍醐灌頂之感；