使用thymeleaf将查询的数据显示在前台。通过使用循环的形式

简介: 这篇文章介绍了如何使用Thymeleaf的`th:each`属性在前端页面上循环显示从后端传递过来的列表数据,并通过具体的HTML表格示例展示了如何展示书籍名称、作者、价格、出版社以及操作链接。

1、需要注意的点。
<tr th:each="book:${bookList}">中。book是自己命令的变量。${bookList}是将查询的数据放入这里,需要后代指定 model.addAttribute("bookList",list);

```






书籍名称
书籍作者
书籍价格
书籍出版社
操作





书名
作者

出版社
详情



    </div>
</div>
相关文章
|
3月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
193 0
|
6月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
271 2
|
前端开发
后台添加菜单信息如何在前端循环遍历?
后台添加菜单信息如何在前端循环遍历?
42 0
|
JSON 前端开发 数据格式
前端(二十一):label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
158 0
|
JSON 前端开发 Java
基于Springboot外卖系统16:菜品修改模块+菜品信息回显+ID查询口味列表+组装数据并返回
在菜品管理列表页面点击修改按钮,跳转到修改菜品页面,在修改页面回显菜品相关信息并进行修改,最后点击确定按钮完成修改操作。
212 0
|
前端开发
后端一次性返回所有的数据,让前端截取展示做分页
后端一次性返回所有的数据,让前端截取展示做分页
317 0
|
小程序 API
【小程序】案例 - 本地生活(列表页面)
【小程序】案例 - 本地生活(列表页面)
170 0
【小程序】案例 - 本地生活(列表页面)
|
JavaScript 前端开发 安全
js 复杂数组的元素操作,实现数据按搜索条件在前端显示
在工程项目中需要实现的一个需求,自己设计通过修改前端js代码来实现数据按搜索条件来对应显示的功能(实际可以根据key通过服务请求来实现的つ﹏⊂同事帮助下实现的)。在这个方向上,踏了很多坑,每次都觉得快实现了,可还是一直有问题。最后即使在同事另辟蹊径下解决的问题,但在不甘心下自己还是决定按自己思路将之实现掉。
232 0
js 复杂数组的元素操作,实现数据按搜索条件在前端显示
|
运维 前端开发 安全
问题记录:前后端交互无返回,后台服务正常
业务产线反馈商户入住提示服务连接失败,然后要到客户的账号密码,进入系统发现服务确实连接失败, 打开network查看请求的响应,发现请求石沉大海,根本没有到达服务器。
252 0