上一篇文章SpringBoot学习11之thymeleaf讲解的是将实体类实例化的后的值在html页面中进行渲染。本讲解form表单提交到后台页面。
第一步:在test页面中写如下代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
</tr>
<tr>
<td th:text="${student.name}"></td>
<td th:text="${student.age}"></td>
<!--这里是一个日期,需要对它进行处理。-->
<!--th:text="${#dates.format(user.date, 'yyyy-MM-dd')}"-->
<td th:text="${#dates.format(student.birthday,'yyyy-MM-dd')}"></td>
</tr>
</table>
<!--
请求规定路径的写法:th:action="@{/postform}" 即定义后台控制器路径,类似<form>标签的action属性。
请求的实体类:th:object="${student}",student就是前台获取的student然后传送到这个页面,即用于表单数据对象绑定,将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。
提交方法:method="post"
转换后的方法:th:method="post"(意思的表单提交的方法method="post"转换成这里的方法)
-->
<form th:action="@{/postform}" th:object="${student}" method="post" th:method="post">
<!--
th:field:常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。
th:field="*{name}"将后端发送过来的student对象的name作为值输出到输入框
th:field="*{age}":同上
-->
<input type="text" th:field="*{name}">
<input typr="text" th:field="*{age}">
<input type="submit" value="提交">
</form>
</body>
</html>
上面的表单页面,以及test.html中的student的属性怎么来的已经在SpringBoot学习11之thymeleaf讲解的很清楚,欢迎点击访问查看。这里重点讲解form表单的内容。
1. <form>
使用th:action="@{/postform}",定义后台控制器路径,点击提交的时候,会通过注解找到@Requestmapping("/postform")
2. th:object="${student}"用于表单对象绑定,常和th:field一起使用。
3. th:method="post"将表单提交的方法转换为这里th写的方法
4. th:field="*{name}"输入student的name
第二步:在ThController中写入下面代码
package com.pp.thyleaf.controller;
import com.pp.thyleaf.bean.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Date;
@Controller
public class ThController {
@RequestMapping("/th")
public String test(ModelMap map){
Student student = new Student();
student.setAge(11);
student.setName("zhangsan");
student.setBirthday(new Date());
map.addAttribute("student",student);
return "test";
}
/**
*
* @param student
* 后端提交过来的数据就是student,所以参数就定义为Student
* @return
*/
@RequestMapping("/postform")
public String postform(Student student){
System.out.println(student.toString());
return "redirect:/th";
}
}
上面的内容,关于注解 @RequestMapping("/th")已经在SpringBoot学习11之thymeleaf讲解的很清楚,欢迎点击访问查看。这里重点讲解 @RequestMapping("/postform")的部分:
1. 前端th:object="${student}"的使用已经绑定了实体类的student,所以这里直接入口参数设置为Student student,在方法里面打印student的toString()方法,输出student的内容。
2. 最后使用return “redirect:/th"重定向到注解@RequestMapping(”/th")的地方。
第三步:点击运行按钮
第四步:在浏览器输入localhost:8080/th,查看页面内容
1.链接http://localhost:8080/th页面的内容
我们看表单部分,页面直接将student的值输入到输入框中,这里的是我们在SpringBoot学习11之thymeleaf里面控制器中创建的student类并且设置的值,然后渲染到该页面,form中的输入框让其显示的。
2.点击提交后的后台结果
3.点击提交后的前台结果
4.如果我们在输入框中输入张三
,后面输入20
,我们查看后台控制器。
说明我们在这里输入的值,直接被后台postform(Student student)方法里面的student接收。
源码地址:https://gitee.com/yangforever/project-learning/tree/master/demo/SpringBoot/thyleaf