学习Thymeleaf风格的HTML表单进行数据绑定

最新推荐文章于 2024-05-17 18:09:22 发布

王摇摆

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量479

点赞数

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/weixin_44943389/article/details/131992195

版权

前端代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/login}" th:object="${loginBean}" method="post">
    <!--th:field="*{uname}"的uname与实体类的属性相同  -->
    <p>Uname: <input type="text" th:field="*{uname}" th:placeholder="请输入用户名"/></p>
    <p>Urole: <input type="text" th:field="*{urole}" th:placeholder="请输入角色"/></p>
    <p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</form>
</body>
</html>

后端请求和处理方法

package com.ch.ch5_1.controller;

import com.ch.ch5_1.model.LoginBean;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LoginController {
    @RequestMapping("/toLogin")
    public String toLogin(Model model) {
        model.addAttribute("loginBean", new LoginBean());
        return "login";
    }

    @RequestMapping("/login")
    public String greetingSubmit(@ModelAttribute LoginBean loginBean) {
        System.out.println("测试提交的数据：" + loginBean.getUname());
        return "result";
    }
}

代码学习解释

这段HTML代码使用了Thymeleaf模板引擎的语法，用于创建一个简单的表单页面。Thymeleaf是一个流行的模板引擎，用于在Java应用程序中处理模板渲染。

让我们逐个解释HTML代码中的关键部分：

<!DOCTYPE html>: 声明文档类型为HTML5。
xmlns:th="http://www.thymeleaf.org": 这是一个XML命名空间声明，用于指定Thymeleaf模板引擎的命名空间。它允许在HTML中使用Thymeleaf的特殊语法。
<head>: 页面头部部分。
<meta charset="UTF-8">: 指定页面的字符编码为UTF-8，确保正确显示中文等特殊字符。
<title>Insert title here</title>: 设置页面的标题为"Insert title here"。你可以根据需要修改标题内容。
<body>: 页面主体部分。
<h1>Form</h1>: 在页面中显示一个标题为"Form"的一级标题。
<form>: 表单标签，用于创建一个表单。
- action="#": 表单提交的目标URL，这里设置为"#"，表示表单将提交到当前页面。
- th:action="@{/login}": 使用Thymeleaf的URL表达式，设置表单提交的目标URL为"/login"，实际提交地址将由后端应用程序处理。
- th:object="${loginBean}": 绑定表单数据的对象，这里是一个名为"loginBean"的对象，通常是一个Java Bean，其中的属性将在表单中使用。
- method="post": 表单提交的HTTP方法，这里设置为"post"，表示使用HTTP POST方法提交表单数据。
<p>: 段落标签，用于包裹表单字段。
<input>: 输入字段标签，用于创建表单输入字段。
- type="text": 输入字段类型为文本。
- th:field="*{uname}": 使用Thymeleaf的属性选择器，将输入字段绑定到名为"uname"的Java Bean属性，即loginBean.getUname()和loginBean.setUname()。
- th:placeholder="请输入用户名": 输入字段的占位符，当用户未输入内容时，显示提示信息"请输入用户名"。
<input type="submit" value="Submit"/>: 提交按钮，用户点击后将提交表单数据到后端应用程序。
<input type="reset" value="Reset"/>: 重置按钮，用户点击后将清空表单中的数据。

总结：这段HTML代码创建了一个包含用户名和角色输入字段的表单，用户可以在输入框中输入相关信息，并点击"Submit"按钮提交表单数据到后端应用程序进行处理。在后端应用程序中，需要定义一个名为loginBean的Java Bean来接收表单数据。这个Java Bean需要有对应的uname和urole属性，并提供相应的getter和setter方法。这样，当用户提交表单时，Thymeleaf会自动将表单数据绑定到loginBean的属性上，方便后续处理。

王摇摆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习Thymeleaf风格的HTML表单进行数据绑定

后端请求和处理方法代码学习解释这段HTML代码使用了Thymeleaf模板引擎的语法，用于创建一个简单的表单页面。Thymeleaf是一个流行的模板引擎，用于在Java应用程序中处理模板渲染。让我们逐个解释HTML代码中的关键部分：: 声明文档类型为HTML5。: 这是一个XML命名空间声明，用于指定Thymeleaf模板引擎的命名空间。它允许在HTML中使用Thymeleaf的特殊语法。: 页面头部部分。: 指定页面的字符编码为UTF-8，确保正确显示中文等特殊字符。: 设置页面的标题为"Inser
复制链接

扫一扫