.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.虽然解决问题才是我们的最终目的，但是仍需追求解决方式的多样化，找到问题的根源 格物致知 才能给自己醍醐灌顶之感；