thymeleaf如何迭代遍历，如何判断

今天药忘吃喽~ 2022-11-12 05:27 2阅读 0赞

![f9184d34494140a5359e62bfa53dddb5.png][]

大家好，我是雄雄，欢迎关注公众号【雄雄的小课堂】。

最近，换了个桌面

![26572c1ea11ed763d0e2f9cdcb7582b5.png][]

手机的也同步换了下：

![dd60f525194a1599b597159fb7e20e13.png][]

哈哈哈，自己看着舒服就行~

这几天在业余时间搞一个电商项目，可以说是边学边做，效率比较低，但是通过做这个项目，的的确确的能学到不少，每天都抽出点时间往后做做，bug在不知不觉中解决……

今天主要是记录一下thymeleaf在前台的迭代读取与遍历。

以前在遇到页面中数据迭代时，用的最多的要数jstl表达式了，除了jstl表达式外，thymeleaf倒也是个不错的选择，并且使用起来也特别简单。

首先需要引入thymeleaf依赖，代码如下：

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

通过springmvc获取到数据，放在model中就可以在页面中获取，控制器中的代码如下所示：

//查询所有的商品信息
        @RequestMapping("getProList")
        public String findAllPro(Model model){
            model.addAttribute("proList",productService.findAllProduct());
            return "proList";
        }

然后在页面中我们就可以遍迭代数据了。

迭代表格：

<table class="layui-table" lay-size="lg">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>图片</th>
            <th>价格</th>
            <th>库存</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        
        <tr th:each="pro : ${proList}">
            <td th:text="${pro.id}"></td>
            <td th:text="${pro.name}"></td>
            <td>
               <img th:src="'/images/'+${pro.fileName}" width="50px" height="50px">
            </td>
            <td th:text="${pro.price}"></td>
            <td th:text="${pro.stock}"></td>
           
            <td th:text="${pro.description eq null or pro.description eq ''}? '暂无描述':${pro.description}"></td>
            <td>
                <button type="button" class="layui-btn layui-btn layui-btn-normal layui-btn-xs">
                    <i class="layui-icon"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs">
                    <i class="layui-icon"></i>
                </button>
            </td>
        </tr>
        </tbody>
    </table>

迭代下拉列表：

其他迭代基本都一样，那如果我们需要在迭代的过程中判断，该如何写呢？

可以使用下面两种方式：

效果如下：

![4c81eda2a563cb88f4effb51ff795f96.png][]

![924ebc7ef0c995ae3ece60e07ea63c7e.png][]

**往期精彩**

[30个IDEA插件总有一款适合你][30_IDEA]

[2021-03-18][30_IDEA]

[![faba8130971e92fd360b85a2fa0b9201.png][] ][30_IDEA]

[装完就跑，这几个Linux指令真的高大上！][Linux]

[2021-03-17][Linux]

[![7b9b84e083c37c177d1840de06210c57.png][] ][Linux]

[你是前端开发还是后端开发？][Link 1]

[2021-03-16][Link 1]

[![18e5c368532c95e3ef24d5eae3f15417.png][] ][Link 1]

[深夜，我偷听到程序员要对session下手……][session]

[2021-03-13][session]

[![534029186a40515cd6b237490ff88f91.png][] ][session]

[springboot点击运行没反应，什么都不显示的解决方式][springboot]

[2021-03-11][springboot]

[![3067a7570087d1aeb49f79fa3639965e.png][] ][springboot]

![74d04e7a51fd26842a67d9ee21d08a73.png][]

![dcf9fce6f33a6d59447b119b3bed3b9a.png][]

点分享

![67b112865bd9c7a03a2ad77814b9eebc.png][]

点点赞

![ebe6068e0ea9efd6a109dd1edc179cf3.png][]

点在看

[f9184d34494140a5359e62bfa53dddb5.png]: /images/20221022/079cc517062b4991b267d96db9c92bf5.png
[26572c1ea11ed763d0e2f9cdcb7582b5.png]: /images/20221022/8cfd029b9aa542bfa2149275b11a2a35.png
[dd60f525194a1599b597159fb7e20e13.png]: /images/20221022/5069429fb9f34177a79d1a09d556b424.png
[4c81eda2a563cb88f4effb51ff795f96.png]: /images/20221022/068cba7707884122a9043325be470796.png
[924ebc7ef0c995ae3ece60e07ea63c7e.png]: /images/20221022/7d26d2c1c0d94a96b5df5bbd1038d8e3.png
[30_IDEA]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fdec4a0f857d2bc783122013b3b9d09f2d590fb2e9797ae7305a37db92098d2efa880cade&idx=1&mid=2247500837&scene=21&sn=6bf0a4ab01880f5cd02720e9b02776d1#wechat_redirect
[faba8130971e92fd360b85a2fa0b9201.png]: /images/20221022/7ab0977cf6564e6b9dec957bded03577.png
[Linux]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fdeeea0f857f8f7458287540ac077f99cef413f49f2a3ccf3fd6dc11628875be36e186aef&idx=1&mid=2247500815&scene=21&sn=ce976ed0fc6c36b324090e2bdc1387d8#wechat_redirect
[7b9b84e083c37c177d1840de06210c57.png]: /images/20221022/e8cc562bb5a44524965dfe22af5bbd60.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fd90ba0f8501da9def0ae7a4d1171fa4b45231faaadd960f206a50f2603d7045632cfe94a&idx=1&mid=2247500778&scene=21&sn=73b3f45d066f0647622d1cf193e137c4#wechat_redirect
[18e5c368532c95e3ef24d5eae3f15417.png]: https://img-blog.csdnimg.cn/img_convert/18e5c368532c95e3ef24d5eae3f15417.png
[session]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fd94da0f8505b6b877742cc81affb4338b03e698aeaca4aa553521fc0c5325530c0f30dcd&idx=1&mid=2247500716&scene=21&sn=3ad80c5d0dd1ea9d62521bf340b1f224#wechat_redirect
[534029186a40515cd6b237490ff88f91.png]: https://img-blog.csdnimg.cn/img_convert/534029186a40515cd6b237490ff88f91.png
[springboot]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fd972a0f8506429fc6861aebc270e6ab7d7c3fd75bbbc0e7cf0cccc15504fde0f778dca41&idx=1&mid=2247500691&scene=21&sn=3f3b3b125b56ddd559ee87f698a745c4#wechat_redirect
[3067a7570087d1aeb49f79fa3639965e.png]: https://img-blog.csdnimg.cn/img_convert/3067a7570087d1aeb49f79fa3639965e.png
[74d04e7a51fd26842a67d9ee21d08a73.png]: https://img-blog.csdnimg.cn/img_convert/74d04e7a51fd26842a67d9ee21d08a73.png
[dcf9fce6f33a6d59447b119b3bed3b9a.png]: https://img-blog.csdnimg.cn/img_convert/dcf9fce6f33a6d59447b119b3bed3b9a.png
[67b112865bd9c7a03a2ad77814b9eebc.png]: https://img-blog.csdnimg.cn/img_convert/67b112865bd9c7a03a2ad77814b9eebc.png
[ebe6068e0ea9efd6a109dd1edc179cf3.png]: https://img-blog.csdnimg.cn/img_convert/ebe6068e0ea9efd6a109dd1edc179cf3.png