Spring boot + Thymeleaf 在自定义片段中显示数据库记录答案

【问题标题】：Spring boot + Thymeleaf show database records in custom fragmentsSpring boot + Thymeleaf 在自定义片段中显示数据库记录
【发布时间】：2020-09-14 11:43:40
【问题描述】：

我有数据库记录，我想以某种方式显示在页面上。出于这个原因，我创建了一个百里香片段，它应该用作我数据库中所有记录的模板。现在我不知道如何让每个片段（代表一个数据库记录）彼此相邻打印。此外，我想实现这样的目标：

我当前的实现在网页上的完全相同的位置显示所有获取的记录，这会创建类似于“堆栈”的内容并仅显示最后一条记录。我当前的实现如下所示：

总而言之，我想在 Android 开发中实现类似 CardView 的东西。我已经阅读了很多 thymeleaf 教程，但它们似乎都是关于在表格中组织数据，这不是我的目标。目前我不确定图片一中的目标功能是否只能通过百里香来实现。

我希望有人能给我一些提示或建议，告诉我如何才能达到预期的效果。我应该看看一些 JS 框架吗？或者这可以用百里香来实现？

到目前为止，我尝试实现此功能已生成以下代码。

<div th:fragment="officer">
<div class="officerWrapper" th:block th:each="officer : ${officers}">
    <div class="officerLeft">
        <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRTw8mKnjVErhmhl5S_aUZfvf86vwZOMJBqbUqM-guT-kv6K4xu&usqp=CAU"
            alt="user" width="100" height="150">
    </div>
        <div class="right">
            <p>
                Name :
                <td th:text="${officer.firstName}">
            </p>
            <p>
                Surname :
                <td th:text="${officer.lastName}">
            </p>
            <p>
                Mobile:
                <td th:text="${officer.mobile}">
            </p>
            </br>
            <p>Статут: Наличен</p>
            </br>
            <button class="button button1" name="editOfficer">Edit</button>
        </div>
</div>
</div>

然后 css 去了..

    *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}

.officerWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 350px;
  height: 150px;
  display: flex;
  box-shadow: 0 10px 20px 0 rgba(69,90,100,.08);

}

.officerWrapper .officerLeft{
  width: 65%;
  background: #38584A;
  padding: ;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  text-align: center;
  color: #fff;
}

.officerWrapper .officerLeft img{

  border-radius: 0px;
  margin-bottom: 0px;
  width:100%;
  height:100%;

}

.officerWrapper .right{
  background:#38584A;
  width:100%;
  padding: 10px 10px 10px 10px;
  color:#fff;
  font-weight: bold;
}

.button1 {
  border: 2px solid #4CAF50;
}

【问题讨论】：

标签： javascript css spring-boot thymeleaf web-frontend

【解决方案1】：

你绝对可以在没有 js 并且只使用 html 和 css 的情况下实现这一点，因为这是一个样式挑战，所以你只需要正确的 css。

现在所有卡片都堆叠在一起的原因是，您将每张卡片放置在空间中完全相同的点（屏幕中间），这些线条：

  .officerWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  ... }

您可以通过使用 flexbox 或 css 网格来实现您想要的。两者都不比另一个更好，所以你必须看看什么对你有用。我会留下一些参考资料供您查看。

参考文献

【讨论】：

谢谢@Paul。您的链接非常有用。