Spring boot + Thymeleaf 在自定义片段中显示数据库记录 [英] Spring boot + Thymeleaf show database records in custom fragments

问题描述

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

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

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

我希望有人能给我提示或建议，让我了解如何达到预期的结果.我应该看看一些 JS 框架吗?或者这可以用百里香叶来实现?

到目前为止，我尝试实现此功能产生了以下代码.

<div class="officerWrapper" th:block th:each="officer : ${officers}"><div class="officerLeft">
<div class="right"><p>姓名 :<td th:text="${officer.firstName}"></p><p>姓氏 :<td th:text="${officer.lastName}"></p><p>手机:<td th:text="${officer.mobile}"></p></br><p>Статут: Наличен</p></br><button class="button button1" name="editOfficer">编辑</button>

然后 css 就...

<代码> *{边距:0；填充:0；box-sizing: 边框框；列表样式:无；字体系列:'Josefin Sans'，无衬线；}.offerWrapper{位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；宽度:350px；高度:150px；显示:弹性；box-shadow: 0 10px 20px 0 rgba(69,90,100,.08);}.officerWrapper .officerLeft{宽度:65%；背景:#38584A；填充:;边框左上角半径:3px；边框左下角半径:3px；文本对齐:居中；颜色:#fff;}.officerWrapper .officerLeft img{边界半径:0px；底边距:0px；宽度:100%；高度:100%；}.officerWrapper .right{背景:#38584A;宽度:100%；填充:10px 10px 10px 10px；颜色:#fff;字体粗细:粗体；}.button1 {边框:2px 实心 #4CAF50；}

解决方案

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

现在所有卡片都堆叠在一起的原因是您使用以下几行将每张卡片放置在空间中完全相同的点(屏幕中间):

 .officerWrapper {位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；... }

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

<小时>

参考资料

• Basic_Concepts_of_Grid_Layout
• CSS 网格示例
• Flexbox 示例
• 关于 CSS 网格的免费 YouTube 课程
• Flexbox 上的免费(但需要注册)课程

I have database records, which I want to show on the page in a certain way. For this reason I've created a thymeleaf fragment, which should be used as a template for all of the records in my database. Now I am not sure how to make each fragment (representing a db record) to print next to each other. Moreover, I want to achieve something like this :

My current implementation shows all the fetched records in the exact same spot on the webpage, which creates something like "stack" and shows only the last record. My current implementation looks like this:

To summarize I want to achieve something like a CardView in Android development. I've went through a lot of thymeleaf tutorials, but all of them seem to be about organising data in tables, which is not my goal. At this moment I am not sure if the targeted functionality from picture one can be achieved only with thymeleaf.

I hope someone can give me tips or advice about how I can achieve the desired result. Should I look in some JS frameworks? Or this can be achieved with thymeleaf?

My attempt to achieve this functionality have produced the following code so far.

<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>

And the css goes..

    *{
  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;
}

解决方案

You can definitely achieve this without js and with just html and css because this is a styling challenge, so all you need is the correct css.

The reason that all your cards are stacked right now is that you're positioning every card at the exact same point in space (the middle of the screen) with these lines:

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

You can achieve what you want by using flexbox or css grid. Neither is better than the other so you'll have to see what works for you. I'll leave you some references to check out.

---

References

• Basic_Concepts_of_Grid_Layout
• CSS Grid Examples
• Flexbox Examples
• Free Youtube Course on CSS Grid
• Free (but requires signup) Course on Flexbox

这篇关于Spring boot + Thymeleaf 在自定义片段中显示数据库记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！