<tr th:each="user:${userList}"> <td th:text="${user.id}"></td> <td th:text="${user.userName}"></td> <td th:text="${user.gender}"></td> <td th:text="${user.age}"></td> <td th:text="${user.phone}"></td> <td th:text="${user.userRole}"></td> <td> <a th:href="@{/editUser(uid=${user.getUid()})}" class="btn btn-primary btn-sm">编辑</a> <a th:href="@{/deleteUser(uid=${user.getUid()})}" class="btn btn-danger btn-sm">删除</a> </td> </tr>这一段有问题,因为我的数据库中没有age只有birthday,所以这里的年龄要怎么计算并且显示在这个表格中呢?
时间: 2023-07-19 13:37:04 浏览: 137
您可以在后端代码中进行计算,将生日转化为年龄并赋值给user对象的age属性,然后再将user对象传递给前端页面渲染表格。具体实现可以参考以下代码:
在User类中添加一个获取年龄的方法:
```java
public int getAge() {
LocalDate now = LocalDate.now();
Period period = Period.between(birthday, now);
return period.getYears();
}
```
在Controller中查询用户列表时,遍历用户列表并调用getAge()方法计算每个用户的年龄:
```java
List<User> userList = userService.getUserList();
for (User user : userList) {
user.setAge(user.getAge());
}
model.addAttribute("userList", userList);
```
在Thymeleaf模板中使用th:text指令将年龄显示在表格中:
```html
<td th:text="${user.getAge()}"></td>
```
相关问题
<tr> <td>代码</td> <td>姓名</td> <td>移动电话</td> <td>专业</td> <td>操作</td> </tr> <tr th:each="u, State: ${user_list}"> <td th:text="${u.user_code}"></td> <td th:text="${u.user_name}"></td> <td th:text="${u.telephone}"></td> <td th:text="${u.pro_name}"></td> <td><a th:href="@{show_edit_user(user_code=${u.user_code})}">修改</a> <a th:href="@{delete_user(user_code=${u.user_code})}">删除</a> </td> </tr>
这是一段使用 Thymeleaf 模板引擎的 HTML 代码,用于展示一个用户列表。其中,通过 Thymeleaf 的 each 循环指令遍历了一个名为 user_list 的对象集合,并将其中的数据渲染到表格中的每一行中。每一行包括用户的代码、姓名、电话和专业信息,并提供了修改和删除操作的链接。其中,@{}语法用于构建动态 URL,以便在点击对应链接时跳转到不同的处理页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户</title> <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.css}"> <style type="text/css"> .odd{ background-color: antiquewhite; } .even{ background-color: aquamarine; } </style> <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script> </head> <body> <table border="3" class="table"> <tr> <th>序号</th><th>用户名</th><th>角色</th> </tr> <tr th:each="user:${users.list}"> <td th:text="${user.userId}">0</td> <td th:text="${user.userName}">地球</td> <td th:text="${user.roleName}">admin</td> </tr> </table> </body> </html>美化这个页面,使表格占满页面
可以尝试以下样式代码来美化页面,使表格占满页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.css}">
<style type="text/css">
.odd{
background-color: antiquewhite;
}
.even{
background-color: aquamarine;
}
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.table{
width: 100%;
}
</style>
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script>
</head>
<body>
<table border="3" class="table">
<tr>
<th>序号</th><th>用户名</th><th>角色</th>
</tr>
<tr th:each="user:${users.list}">
<td th:text="${user.userId}">0</td>
<td th:text="${user.userName}">地球</td>
<td th:text="${user.roleName}">admin</td>
</tr>
</table>
</body>
</html>
```
这里使用了 flex 布局,将页面垂直居中,同时让表格宽度为 100% ,占满整个页面。
阅读全文