整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
thymeleaf使用th:each屬性可以對數(shù)組，集合進(jìn)行循環(huán)，此屬性用在容器元素上，循環(huán)生成子元素。
語法
th:each="循環(huán)出的元素 , 循環(huán)狀態(tài) : 集合或數(shù)組"示例
在TestServlet中定義一個(gè)數(shù)組
String [] arr = {"HTML","CSS","JavaScript"};
request.setAttribute("arr",arr);在index.html中循環(huán)顯示數(shù)組中的元素
<div th:text="'數(shù)組元素?cái)?shù)量：' + ${arr.length}"> </div><!--獲取數(shù)組元素的數(shù)量-->
<ul th:each="s : ${arr}">
<li th:text="${s}"></li>
</ul>運(yùn)行test.do，頁面顯示效果如下
在th:each中循環(huán)狀態(tài)不是必須的，它是一個(gè)對象，具有以下屬性
屬性名 | 說明 |
index | 整型屬性，當(dāng)前迭代索引，從0開始 |
count | 整型屬性，當(dāng)前的迭代計(jì)數(shù)，從1開始 |
size | 整型屬性，迭代變量中元素的總量 |
current | 對象屬性，每次迭代的 iter 變量，即當(dāng)前遍歷到的元素 |
even/odd | 布爾屬性，當(dāng)前的迭代是偶數(shù)還是奇數(shù) |
first | 布爾屬性，當(dāng)前的迭代是否是第?個(gè)迭代 |
last | 布爾屬性，當(dāng)前的迭代是否是最后?個(gè)迭代。 |
修改上一個(gè)示例，顯示每次循環(huán)的各狀態(tài)的值
<table border="1">
<tr>
<th>當(dāng)前迭代索引</th>
<th>當(dāng)前迭代計(jì)數(shù)</th>
<th>元素的總量</th>
<th>當(dāng)前遍歷到的元素</th>
<th>當(dāng)前遍歷的偶數(shù)</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>運(yùn)行test.do，頁面顯示效果如下
示例
在TestServelt中添加一個(gè)List集合
List list = new ArrayList<>();
list.add("HTML");
list.add("CSS");
list.add("JavaScript");
request.setAttribute("list", list);在index.html中循環(huán)顯示列表中的數(shù)據(jù)
<div th:text="'list中元素?cái)?shù)量：' + ${list.size}"> </div>
<ul th:each="s : ${list}">
<li th:text="${s}"></li>
</ul>運(yùn)行test.do，頁面顯示效果如下
1) 直接訪問
map集合可以通過key獲取值，也可以獲取集合中元素的數(shù)據(jù)
示例
在TestServelt中添加map集合
Map<String,String> map = new HashMap<>();
map.put("HTML", "超文本標(biāo)記語言");
map.put("CSS", "層疊樣式表");
request.setAttribute("map", map);在頁面中輸出map的信息
<ul>
<li >集合：[[${map}]]</li>
<li>指定key的值：[[${map.HTML}]]</li>
<li>集合中元素的數(shù)量:[[${map.size}]]</li>
</ul>運(yùn)行test.do，頁面顯示效果如下
2）循環(huán)訪問
Map循環(huán)的每個(gè)元素的類型是Entry，可以通過此Entry對象的key屬性獲取鍵，value屬性獲取值
修改index.html，循環(huán)顯示map集合中的內(nèi)容
<ul th:each="entry : ${map}">
<li >
<strong th:text="${entry.key}"></strong>
:
<em th:text="${entry.value}"></em>
</li> </ul>運(yùn)行test.do，頁面顯示效果如下
在使用th:if時(shí)，如果是一當(dāng)條件成立需要加載一組標(biāo)簽，在循環(huán)時(shí)，循環(huán)的元素外沒有容器時(shí)，可以使用th:block標(biāo)簽做為外容器，th:block僅是一個(gè)屬性容器，允許開發(fā)人員指定他們想要的任何屬性
示例
<th:block th:each="s : ${list}">
<div th:text="${s}"></div></th:block>文章來源于嗶站《六、循環(huán)表達(dá)式 - 嗶哩嗶哩》
更多學(xué)習(xí)視頻和專欄文章請到嗶站個(gè)人空間： 布道師學(xué)院的個(gè)人空間-布道師學(xué)院個(gè)人主頁-嗶哩嗶哩視頻
更多資源和項(xiàng)目下載請到：”開源吧（找實(shí)戰(zhàn)項(xiàng)目和畢設(shè)項(xiàng)目的好網(wǎng)站）“ ：開源吧
現(xiàn)代網(wǎng)頁設(shè)計(jì)中，動(dòng)畫和過渡是提升用戶體驗(yàn)的重要手段。通過使用 CSS，我們可以在不影響頁面性能的前提下，實(shí)現(xiàn)平滑和吸引人的視覺效果。本文將介紹 CSS 動(dòng)畫和過渡的基礎(chǔ)知識(shí)，并通過幾個(gè)例子展示如何在你的網(wǎng)站中應(yīng)用它們。
CSS 過渡允許你在 CSS 屬性值之間創(chuàng)建平滑的動(dòng)畫效果。當(dāng)一個(gè)元素的屬性值改變時(shí)，過渡效果會(huì)在一定時(shí)間內(nèi)平滑地過渡到新的屬性值。
transition: property duration timing-function delay;
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
這個(gè)例子中，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，圖片會(huì)在0.3秒內(nèi)放大到原來的1.2倍大小，過渡效果為ease-in-out。
CSS 動(dòng)畫提供了更強(qiáng)大的控制，允許你創(chuàng)建復(fù)雜的動(dòng)畫序列，通過定義關(guān)鍵幀（keyframes）來控制動(dòng)畫的中間狀態(tài)。
@keyframes animation-name {
from {
/* 初始狀態(tài) */
}
to {
/* 結(jié)束狀態(tài) */
}
}
或者使用百分比來定義多個(gè)關(guān)鍵幀：
@keyframes animation-name {
0% { /* 初始狀態(tài) */ }
50% { /* 中間狀態(tài) */ }
100% { /* 結(jié)束狀態(tài) */ }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.icon-spin {
animation: spin 2s linear infinite;
}
這個(gè)例子創(chuàng)建了一個(gè)名為spin的動(dòng)畫，使得圖標(biāo)無限期地旋轉(zhuǎn)。
接下來，我們將通過幾個(gè)實(shí)戰(zhàn)例子來展示 CSS 動(dòng)畫和過渡的具體應(yīng)用。
.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;
}
在這個(gè)例子中，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)產(chǎn)生一個(gè)波紋效果，模擬水波紋擴(kuò)散。
.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; }
}
這個(gè)例子中定義了兩個(gè)動(dòng)畫，一個(gè)用于元素的淡入，另一個(gè)用于元素的淡出。
<!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>
CSS 動(dòng)畫和過渡是前端開發(fā)者的強(qiáng)大工具，它們可以在不犧牲性能的情況下為用戶提供流暢、引人注目的界面交互。通過掌握這些技術(shù)，你可以創(chuàng)造出更加動(dòng)態(tài)和生動(dòng)的網(wǎng)頁體驗(yàn)。記住，動(dòng)畫應(yīng)該用來增強(qiáng)用戶體驗(yàn)，而不是分散用戶的注意力，適量而恰當(dāng)?shù)厥褂脛?dòng)畫效果是關(guān)鍵。
文概述：如何使用 nodejs 在服務(wù)端將 html 批量轉(zhuǎn)成 pdf 并客戶端下載。
目標(biāo)一：使用 node 在服務(wù)端實(shí)現(xiàn) html 批量轉(zhuǎn)成 pdf
分為兩步：
自己轉(zhuǎn)（存疑）？或者找個(gè)中間件。自己轉(zhuǎn)的話。。。算了，找插件。
網(wǎng)上搜到了 html-pdf，看了下周下載量接近 7W，版本迭代 21 個(gè)，最近更新時(shí)間 latest，不錯(cuò)，整體滿足心里預(yù)期。
api使用如圖：
提供了三種接口：文件、stream 流、buffer。不同返回值類型，使用 toFile()需要 2 個(gè)參數(shù)：文件地址（末尾要有文件名）、回調(diào)函數(shù)。
toFile()結(jié)果會(huì)在指定文件夾生成 pdf 文件；
toStream()、toBuffer()可以在回調(diào)里拿到pdf文件數(shù)據(jù)流
目標(biāo)二：將 PDF 傳到客戶端
怎么傳輸？
經(jīng)過分析歸納，可以濃縮為 3 個(gè)點(diǎn)：
以下分析可以略過直接到結(jié)果：
分析：測試用的是 express 框架，那么可以排除原生 res.end()（存疑），為啥排除它？有 send 我干嘛還用 end；將 pdf 傳向客戶端又不是下載或?qū)懭胛募懦?createWriteStream()方法；PDF 文件可以自己跑過去嗎？肯定不行！如果啥都不動(dòng)能不能成功下載文件？也可以。鏈接下載，好像挺萬能。base64 能用嗎？。。。好像是圖片在用！不知道對文件好使不好使（存疑）。
篩選后：
傳輸方法：res.send()、管道 pipe()；
傳輸內(nèi)容：stream 流、buffer、下載鏈接；
使用下載鏈接：
經(jīng)過分析了，下載鏈接肯定能實(shí)現(xiàn)這個(gè)功能！為什么呢？只要把 pdf 的文件路徑用變量存下來，然后返回給前端，拿著絕對路徑地址模擬點(diǎn)擊下載應(yīng)該就能實(shí)現(xiàn)！但這種方法并沒有在真正意義上跟要傳輸?shù)膬?nèi)容打交道，所以還值得繼續(xù)探索。
最終決定使用，管道pipe()發(fā)送stream流輸出PDF文件流到客戶端
目標(biāo)三：客戶端可以成功接收并自動(dòng)下載
網(wǎng)上搜索有：Windows.open（）方法，iframe 等。感覺都有點(diǎn)偏。
本文使用a標(biāo)簽實(shí)現(xiàn)，其他方法另行嘗試。
ajax + a標(biāo)簽
$.ajax({
url:'url',
responseType:'blob',
success (res) {
console.log(res.toString('utf-8'));
// 創(chuàng)建 blob 對象，解析流數(shù)據(jù)
// , {
// 如何后端沒返回下載文件類型，則需要手動(dòng)設(shè)置：type: 'application/pdf;chartset=UTF-8' 表示下載文檔為 pdf，如果是 word 則設(shè)置為 msword，excel 為 excel
// type: 'application/pdf;chartset=UTF-8'
// }
const blob = new Blob([res]);
const a = document.createElement('a')
// // 兼容 webkix 瀏覽器，處理 webkit 瀏覽器中 href 自動(dòng)添加 blob 前綴，默認(rèn)在瀏覽器打開而不是下載
const URL = window.URL || window.webkitURL
// // 根據(jù)解析后的 blob 對象創(chuàng)建 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)
// 在內(nèi)存中移除 URL 對象
window.URL.revokeObjectURL(herf)
}
})傳統(tǒng)jQuery接收數(shù)據(jù)流后，需要使用new Blob([res])再處理才能繼續(xù)使用，
而，fetch也需要，不過簡便多了
fetch+ a標(biāo)簽
//1.請求
let res = await fetch([地址]);
//2.解析
let data = res.blob()
//3.創(chuàng)建a標(biāo)簽
let eleA = document.createElement('a')
//4.創(chuàng)建鼠標(biāo)事件對象
let e = document.createEvent("MouseEvents")
//5.初始化事件對象
e.initEvent("click", false, false)
?
?
document.body.appendChild(eleA)
eleA.download = 'index.zip'
eleA.href = data
//給指定的元素，執(zhí)行事件 click 事件
eleA.dispatchEvent(e)
document.body.removeChild(eleA)報(bào)錯(cuò)：
eleA.href直接使用 blob 數(shù)據(jù)作為下載鏈接是不行的，必須使用 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 } // 設(shè)置壓縮級(jí)別
});
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> 個(gè) pdf</div>`;
pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
archive.glob('static/*')
archive.finalize()
})
}
}看命令窗口偶爾還會(huì)報(bào) Queue Closed 錯(cuò)誤；
觀察發(fā)現(xiàn)程序一邊轉(zhuǎn) pdf，一邊下載，而且是按照順序轉(zhuǎn)換下載有 0.1.2.3...，最后壓縮返回，這個(gè)過程循環(huán)很少時(shí)發(fā)現(xiàn)沒問題，但次數(shù)增加很多后如20，100次，當(dāng)for循環(huán)到最后一次時(shí)，直接執(zhí)行archiver.finalize(),完。。。結(jié)束了，所以造成Queue Closed原因是沒限制archiver.finalize()執(zhí)行時(shí)機(jī)？？？
找證據(jù)：
官方文檔顯示：
// 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
// 調(diào)用此方法后，可能會(huì)立即觸發(fā)“ close”，“ end”或“ finish”，因此請事先注冊
archive.finalize();
果然，，
添加結(jié)束條件：
pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
if (i === 99) {
archive.glob('static/*')
archive.finalize()
}
})執(zhí)行成功，Queue Closed沒出現(xiàn)，并且在瀏覽器自動(dòng)下載了一個(gè)壓縮包，打開后
發(fā)現(xiàn)只有 91 個(gè)文件，缺少了最后幾個(gè)文件，
for 循環(huán)明明執(zhí)行了 100 次。百思不得解，開始我以為跟網(wǎng)絡(luò)有關(guān)系，畢竟有傳言只要（網(wǎng)絡(luò)）夠快什么（隊(duì)列關(guān)閉）錯(cuò)誤都追不上你。后來我發(fā)現(xiàn)用筆記本執(zhí)行程序這個(gè)錯(cuò)誤會(huì)頻繁出現(xiàn)，
查看了 html-pdf 源碼猜測會(huì)不會(huì)是同步在阻塞，導(dǎo)致循環(huán)結(jié)束后 PDF 生成文件還未完成導(dǎo)致 Queue Closed，怎么解決呢，閉包！具體原理未知（存疑），
經(jīng)過修改
((html, i) => {
pdf.create(html).toFile(`./static/${i}.pdf`, () => {
if (i === 49) {
archive.glob('static/*')
archive.finalize();
}
})
})(html, i)成功！！！打開壓縮文件查看文件總數(shù)，
一切正常，Good！
使用 toStream()測試
(function(html, i) {
pdf.create(html).toStream((err, stream) => {
archive.append(stream, { name: `${i}.pdf`});
if (i === 99) {
archive.finalize();
}
});
})(html, i)我去，第一次跑果然有問題，反復(fù)執(zhí)行多次總是缺少前幾個(gè)文件
第一次跑，少了第一個(gè)文件 1.pdf:
第二次，循環(huán)執(zhí)行 50 次，結(jié)果只有 45 個(gè)成功，前 5 個(gè)失敗:
命令行打印也證明了這一點(diǎn)。。。每次失敗個(gè)數(shù)竟然還不同，但還好有個(gè)規(guī)律它們都是前幾個(gè)
。。。
繼續(xù)執(zhí)行，竟然還有其他報(bào)錯(cuò)類型。。。無語。。
大致意思是:輸入資源必須是 Stream 流或者 Buffer，可能是在使用 archiver.append 時(shí)塞入了 undefined 之類的，給它上個(gè)保險(xiǎn)，如果值存在才執(zhí)行
stream && archive.append(stream, { name: `${i}.pdf`});綜合問題共有 2 個(gè)：1.并不是所有 html 片段都進(jìn)行了轉(zhuǎn)換 PDF 的操作，可能會(huì)隨機(jī)出現(xiàn)遺漏，比如 45.46.突然就到 48；2.即使所有 html 都進(jìn)行了轉(zhuǎn)換操作，還總是缺少前面幾個(gè)文件。
問題一解決：
html-pdf 源碼如下圖
研究發(fā)現(xiàn) html-pdf 的 toStream 應(yīng)該是一個(gè)異步方法，查看源碼后 stream.on('end')也證明了這一點(diǎn)。由于不是順序生成 stream 流，那么最后一個(gè)流生成并不代表所有都完成，所以當(dāng)用 i===99 判斷結(jié)束就有問題，可能會(huì)跳過某一個(gè)不執(zhí)行轉(zhuǎn)換PDF需要len=50來避免，然而添加過后，每個(gè)文件都進(jìn)行了PDF轉(zhuǎn)換，但是stream顯示為undefined，進(jìn)而PDF文件也總是少前面幾個(gè)，導(dǎo)致 i=99 出現(xiàn)時(shí)還有好多 toStream 沒有完成，SO 第一個(gè)問題就出現(xiàn)了；（注：不過異步操作也因此避免同步帶來方法一的問題:隊(duì)列關(guān)閉錯(cuò)誤。）
原因找到，解決辦法就是添加變量手動(dòng)強(qiáng)行控制進(jìn)程：
如圖，len 初始 100，減為 0 時(shí)代表所有都已經(jīng)轉(zhuǎn)換，可以結(jié)束
let len = 100;
然后，開始計(jì)數(shù)，不到最后一個(gè)完成 stream 流轉(zhuǎn)換不結(jié)束
pdf.create(html).toStream((err, stream) => {
len--;
stream && archive.append(stream, { name: `${i}.pdf`});
if (len === 0) {
archive.finalize();
}
});命令行打印下錯(cuò)誤信息看看怎么回事控制臺(tái)
問題二解決：
先打印下錯(cuò)誤信息 console.log('err：', err)
暴露了，PDF generation timeout. 一個(gè) timeout 已經(jīng)夠了，能夠說明很多問題，html-pdf 提供了轉(zhuǎn)換超時(shí)限制，時(shí)間超出 timeout 自然無法成功轉(zhuǎn)換成 stream 流輸出，解決辦法更簡單：
官方文檔，給出了一個(gè)配置項(xiàng) options:{}對象，其中就有 timeout 設(shè)置，我們可以視情況放大此參數(shù)，
// 一分鐘內(nèi)轉(zhuǎn) pdf 不成功，則視為失敗
let options = {
timeout: 60000
}
pdf.create(html, options).toStream((err, stream) => {
。。。。。。
});繼續(xù)測試，終于完成。。。
結(jié)語：
1.本文走了許多彎路，踩了多多個(gè)坑；
2.文中標(biāo)記存疑的地方依然有很多，都是等待去學(xué)習(xí)理解的地方；
3.對于名詞、問題的解釋描述不夠精準(zhǔn)透徹，需要深度挖掘?qū)χR(shí)點(diǎn)的認(rèn)知；
4.對問題的解決方式不夠標(biāo)準(zhǔn)、熟練，這才是造成多走彎路的原因；
5.雖然解決問題才是我們的最終目的，但是仍需追求解決方式的多樣化，找到問題的根源 格物致知 才能給自己醍醐灌頂之感；
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
