Spring Boot中Thymeleaf對錶單處理的一些用法：
(1)使用th:field屬性：進行表單字段綁定
(2)使用ids對象：一般用於lable配合radio或checkbox使用
(3)表單提交處理
開發環境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8
新建一個名稱為demo的Spring Boot項目。
pom.xml 依賴項如下：
org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-devtools
一、使用th:field屬性
th:field屬性常用於表單字段綁定，除了自動生成id和name屬性，對不同的節點類型還會有不同的生成邏輯。
例如input還會再生成value屬性，textarea會自動設文本，select會自動選中相應的選項，如果是同個表單屬性，radio和checkbox的id會全局自動增長。
備註：
(1)使用th:field屬性時，如果html節點中已經存在相應屬性，則不會再另外生成。
(2)th:field屬性需要使用星號表達式*{...}，即先使用th:object聲明表單對象，再使用th:field=*{...}對錶單域進行處理。
1、
src/main/java/com/example/demo/User.java
package com.example.demo;
public class User {
String name;
Integer sex;
String[] MyColors;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getSex() {
return sex;
}
public void setSex(Integer sex) {
this.sex = sex;
}
public String[] getMyColors() {
return MyColors;
}
public void setMyColors(String[] myColors) {
MyColors = myColors;
}
}
2、
src/main/java/com/example/demo/FieldController.java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.HashMap;
import java.util.Map;
@Controller
public class FieldController {
@RequestMapping("/field")
public String field(Model model){
//設置用戶對象
User user = new User();
user.setName("小紅");
user.setSex(0);
model.addAttribute("user", user);
//設置性別
Map sexes = new HashMap();
sexes.put("男", 1);
sexes.put("女", 0);
model.addAttribute("sexes", sexes);
return "field";
}
}
3、
src/main/resources/templates/field.html
使用th:field屬性
啟動服務後，瀏覽器訪問
http://localhost:8080/field，網頁源代碼如下：
使用th:field屬性
二、使用ids對象
可以使用ids對象的seq方法生成指定名稱的遞增id。
對於radio和checkbox自動生成的id，配合lable節點使用時，需要知道這個id，可以使用ids對象的prev和next方法。
1、
src/main/java/com/example/demo/IdsController.java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IdsController {
@RequestMapping("/ids")
public String ids(Model model){
User user = new User();
user.setName("小紅");
user.setSex(0);
model.addAttribute("user", user);
return "ids";
}
}
2、
src/main/resources/templates/ids.html
使用ids對象
啟動服務後，瀏覽器訪問http://localhost:8080/ids，網頁源代碼如下：
使用ids對象單選A 單選B 多選A 多選B
三、表單的提交處理
提交後，在控制器方法中使用@ModelAttribute映射表單對象。
1、
src/main/java/com/example/demo/FormController.java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
@Controller
public class FormController {
@RequestMapping("/form")
public String form(Model model){
setConstant(model);
User user = new User();
user.setName("小明");
user.setSex(1);
user.setMyColors(new String[]{"white", "black"});
model.addAttribute("user", user);
return "form";
}
@PostMapping("/submit")
public String submit(@ModelAttribute User user, Model model){
setConstant(model);
model.addAttribute("user", user);
System.out.println("姓名：" + user.getName());
System.out.println("性別：" + (user.getSex().intValue() == 1 ? "男" : "女"));
System.out.println("喜歡的顏色：" + Arrays.toString(user.getMyColors()));
//return "redirect:/form";
return "form";
}
//設置常量
private void setConstant(Model model){
Map sexes = new HashMap();
sexes.put("男", 1);
sexes.put("女", 0);
model.addAttribute("sexes", sexes);
String[] colors = new String[]{"red", "white", "black"};
model.addAttribute("colors", colors);
}
}
2、
src/main/resources/templates/form.html
表單的提交處理用戶名： 性別： 喜歡的顏色：
啟動服務後，瀏覽器訪問
http://localhost:8080/from，頁面如下圖：
網頁源代碼如下：
表單的提交處理用戶名： 性別： 喜歡的顏色：
red
white
black
點擊提交按鈕，IDEA控制檯輸出：
姓名：小明 性別：男 喜歡的顏色：[white, black]
