<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>您当前余额为: <span id="balance"></span>元</h1> <br> <button onclick="location.href='/add'">充值</button> <br> <br> <script> var money = [[${money}]]; // 将传入的money转换为浮点数 document.getElementById("balance").innerText = money; // 设置余额显示为两位小数 </script> </body> </html> 请帮我美化一下这个界面，可以适当增加点色彩，调整版型

时间: 2023-08-14 14:03:05 浏览: 110

Thymeleaf中th:each及th:if使用方法解析

Thymeleaf 是一款强大的模板引擎，常用于Spring Boot项目中，它允许开发者在HTML中直接写逻辑代码，而无需借助JavaScript或其他后端技术。本文将深入探讨Thymeleaf中的两个关键指令：`th:each` 和 `th:if`。 ### 一、th:each `th:each` 指令主要用于遍历数据集合，这些集合通常由控制器（Controller）传递到视图（View）。例如，以下是一个简单的控制器代码片段： ```java @Controller public class HelloController { @RequestMapping("/success") public String success(Map<String, Object> map) { map.put("users", Arrays.asList("张三", "李四", "王五")); return "success"; } } ``` 在上面的代码中，`success` 方法将一个包含三个字符串的列表放入了`Map`，并返回了对应的视图名称。接下来，在HTML页面中，我们可以使用`th:each` 来遍历这个列表： ```html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h4 th:text="${user}" th:each="user : ${users}"></h4> </body> </html> ``` 这里的 `th:each="user : ${users}"` 表示遍历`users`集合，每次迭代将集合中的一个元素赋值给变量`user`。在这个例子中，由于`users`有三个元素，因此会生成三个`<h4>`标签，分别显示"张三"、"李四"和"王五"。 **注意**：`th:each` 每次迭代都会创建一个新的包含它的元素。这意味着，如果你的集合有多个元素，相应标签的数量也会增加，每个元素都会有自己的独立上下文。 ### 二、th:if `th:if` 指令则用于实现条件判断，只有当表达式为真时，该元素及其子元素才会被渲染到HTML中。例如： ```html <p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p> <p th:if="${not testBoolean}" >取反，所以如果testBoolean 是 true ，本句话就不会显示</p> <p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</p> ``` 这里，`th:if="${testBoolean}"` 检查`testBoolean` 是否为`true`，如果是，则显示对应的`<p>`标签。`th:if="${not testBoolean}"` 使用 `not` 关键字取反，所以如果`testBoolean` 为`true`，则不会显示该段落。`th:unless` 相当于 `th:if` 的否定形式，其效果与 `th:if="${not testBoolean}"` 相同。 ### 三、三元表达式除了`th:if` 和 `th:unless`，Thymeleaf 还支持三元表达式，可以在一个属性中直接做出条件判断。例如： ```html <p th:text="${testBoolean} ? '当testBoolean为真的时候，显示本句话，这是用三相表达式做的' : ''"></p> ``` 这个表达式的意思是，如果`testBoolean`为`true`，则显示字符串，否则不显示任何内容。总结，`th:each` 和 `th:if` 是Thymeleaf中非常基础且实用的两个指令，它们极大地简化了前端与后端数据交互的复杂性，使得在HTML模板中实现动态逻辑变得简单直接。了解并熟练掌握这两个指令，对于开发基于Thymeleaf的Web应用至关重要。

当然可以！我来为您美化一下这个界面，增加一些色彩和调整版型。以下是美化后的代码： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title>余额查询与充值</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333333; text-align: center; } .container { width: 400px; margin: 0 auto; padding: 20px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .balance { font-size: 24px; color: #333333; text-align: center; margin-bottom: 20px; } .button-container { text-align: center; } .button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #ffffff; font-size: 16px; border-radius: 4px; text-decoration: none; margin-right: 10px; } .button:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h1>您当前余额为: <span id="balance"></span>元</h1> <br> <div class="button-container"> <a class="button" href="/add">充值</a> </div> </div> <script> var money = [[${money}]]; // 将传入的money转换为浮点数 document.getElementById("balance").innerText = money.toFixed(2); // 设置余额显示为两位小数 </script> </body> </html> ``` 这个美化后的界面增加了以下内容： - 背景色为浅灰色，字体使用 Arial 字体。 - 使用居中对齐的标题，颜色为深灰色。 - 使用圆角和阴影效果的白色容器，宽度为400px，居中显示。 - 余额显示字体大小调整为24px，居中显示，底部留白20px。 - 充值按钮样式调整，背景色为蓝色，文字颜色为白色，加入了鼠标悬停效果。希望这样的美化能满足您的需求！如果还有其他问题，请随时提问。

阅读全文

相关推荐

Spring Boot配置Thymeleaf（gradle）的简单使用

Thymeleaf显示base64字符串为图片.docx

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登录成功</title> </head> <body> 登录成功的用户名： 登录成功的用户信息： 返回首页 </body> </html> 中的${username}报错

Thymeleaf简介.docx

【Thymeleaf模板引擎解析】：Java Web应用动态HTML生成全攻略

thymeleaf渲染html

springboot中样式表单 http://localhost:8080/login 未加载,因为它的 mime 类型

在Spring Boot框架下的web评论系统,用Thymeleaf实现前端设计，给出index.html、comment.html和reply.html文件

thymeleaf2.3.0版本 th:include 引入碎片 带参数 举个实例

html select option使用thymeleaf

thymeleaf模板引擎访问html,SpringBoot使用Thymeleaf模板引擎访问静态html的过程

springboot+thymeleaf实现html页面跳转

thymeleaf循环

thymeleaf页面

thymeleaf实例

最新推荐

Thymeleaf显示base64字符串为图片.docx

stata软件安装包（stata18）（stata软件安装包下载与安装）

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登录成功</title> </head> <body> 登录成功的用户名：
登录成功的用户信息：
返回首页
</body> </html> 中的${username}报错

thymeleaf2.3.0版本 th:include 引入碎片带参数举个实例