03.05 Spring Boot 2 + Thymeleaf：表單字段綁定、表單提交處理

Spring Boot中Thymeleaf對錶單處理的一些用法：(1)使用th:field屬性：進行表單字段綁定(2)使用ids對象：一般用於lable配合radio或checkbox使用(3)表單提交處理

開發環境：IntelliJ IDEA 2019.2.2Spring Boot版本：2.1.8

新建一個名稱為demo的Spring Boot項目。pom.xml 依賴項如下：

<code>       <dependency>
            <groupid>org.springframework.boot/<groupid>
            <artifactid>spring-boot-starter-web/<artifactid>
        /<dependency>

        <dependency>
            <groupid>org.springframework.boot/<groupid>
            <artifactid>spring-boot-starter-thymeleaf/<artifactid>
        /<dependency>

        <dependency>
            <groupid>org.springframework.boot/<groupid>
            <artifactid>spring-boot-devtools/<artifactid>
        /<dependency>/<code>

一、使用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

<code>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;
    }
}/<code>

2、src/main/java/com/example/demo/FieldController.java

<code>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<string> sexes = new HashMap<string>();
        sexes.put("男", 1);
        sexes.put("女", 0);
        model.addAttribute("sexes", sexes);
        return "field"; 

    }
}/<string>/<string>/<code>

3、src/main/resources/templates/field.html

<code>


    
    <title>使用th:field屬性/<title>


    

/<code>

啟動服務後，瀏覽器訪問http://localhost:8080/field，網頁源代碼如下：

<code>


    
    <title>使用th:field屬性/<title>


    

/<code>

二、使用ids對象

可以使用ids對象的seq方法生成指定名稱的遞增id。對於radio和checkbox自動生成的id，配合lable節點使用時，需要知道這個id，可以使用ids對象的prev和next方法。

1、src/main/java/com/example/demo/IdsController.java

<code>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";
    }
}/<code>

2、src/main/resources/templates/ids.html

<code>


    
    <title>使用ids對象/<title>


    

/<code>

啟動服務後，瀏覽器訪問http://localhost:8080/ids，網頁源代碼如下：

<code>


    
    <title>使用ids對象/<title>


    

/<code>

三、表單的提交處理

提交後，在控制器方法中使用@ModelAttribute映射表單對象。

1、src/main/java/com/example/demo/FormController.java

<code>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<string> sexes = new HashMap<string>();
        sexes.put("男", 1); 

        sexes.put("女", 0);
        model.addAttribute("sexes", sexes);
        String[] colors = new String[]{"red", "white", "black"};
        model.addAttribute("colors", colors);
    }
}/<string>/<string>/<code>

2、src/main/resources/templates/form.html

<code>


    
    <title>表單的提交處理/<title>


    

/<code>

啟動服務後，瀏覽器訪問http://localhost:8080/from，頁面如下圖：

網頁源代碼如下：

<code>


    
    <title>表單的提交處理/<title>


    

/<code>

點擊提交按鈕，IDEA控制檯輸出：

<code>姓名：小明
性別：男
喜歡的顏色：[white, black]/<code>

閱讀更多 Java的小本家 的文章

關鍵字: 單字 表單 IDEA