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

Question

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

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

总而言之，我想在 Android 开发中实现类似 CardView 的功能。我看过很多 thymeleaf 教程，但它们似乎都是关于在表格中组织数据，这不是我的目标。目前我不确定图一中的目标功能是否只能用 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;
}

Answer 1

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

你所有卡片现在堆叠的原因是你将每张卡片放置在 space（屏幕中间）中完全相同的点，使用这些行：

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

您可以通过使用 flexbox 或 css 网格来实现您想要的效果。两者都不比另一个好，因此您必须看看哪种方法适合您。我会留下一些参考资料供您查看。

参考资料

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

Spring boot + Thymeleaf show database records in custom fragments

javascript

css

web-frontend

thymeleaf

spring-boot