Spring Boot中Thymeleaf表单数据绑定深度解析

<form th:action="@{/login}" method="get" th:object="${loginForm}">
  <div class="form-group row">
    <label class="col-4 col-form-label">E-mail: </label>
    <div class="col-8">
      <!-- 注意这里的name="q"，它与th:field="*{email}"冲突 -->
      <input type="text" th:field="*{email}" name="q" class="form-control" required />
    </div>
  </div>
  <!-- ... 其他字段 ... -->
  <div>
    <button type="submit" class="btn btn-primary">Log in</button>
  </div>
</form>

@GetMapping("login")
public ModelAndView login(Model model, @RequestParam(name = "q", required = false) Optional<String> email) {
    System.out.println(email); // 总是输出 Optional.empty
    // ... 业务逻辑 ...
}

import lombok.Data;
import lombok.AllArgsConstructor;
import lombok.NoArgsConstructor;

@Data // Lombok注解，自动生成getter/setter/toString/equals/hashCode
@AllArgsConstructor // Lombok注解，自动生成全参构造函数
@NoArgsConstructor // Lombok注解，自动生成无参构造函数
public class LoginForm {
    private String email;
    private String password;
}

<form th:action="@{/login}" method="get" th:object="${loginForm}" style="max-width: 600px; margin: 0 auto;">
  <div class="m-3">
    <div class="form-group row">
      <label class="col-4 col-form-label">E-mail: </label>
      <div class="col-8">
        <!-- th:field="*{email}" 会自动生成 name="email" -->
        <input type="text" th:field="*{email}" class="form-control" required />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-4 col-form-label">Password: </label>
      <div class="col-8">
        <!-- th:field="*{password}" 会自动生成 name="password" -->
        <input type="password" th:field="*{password}" class="form-control" required/>
      </div>
    </div>

    <div>
      <button type="submit" class="btn btn-primary">Log in</button>
    </div>
  </div>
</form>

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.Optional;

@Controller
public class LoginController {

    // 假设有一个userService来处理用户查询
    // private final UserService userService; 

    // 首次加载登录页面时，需要将一个空的LoginForm对象放入模型
    @GetMapping("/login")
    public String showLoginForm(Model model) {
        // 确保在渲染表单前，模型中有一个名为"loginForm"的LoginForm实例
        // 这样th:object="${loginForm}"才能找到它
        model.addAttribute("loginForm", new LoginForm());
        return "/login/login-form"; // 返回登录表单的视图名称
    }

    // 处理表单提交
    @GetMapping("/doLogin") // 建议将处理提交的URL与显示表单的URL区分开，或使用POST
    public ModelAndView processLogin(Model model, LoginForm loginForm) {
        // 此时，loginForm对象将自动填充来自表单的email和password
        System.out.println("Received email: " + loginForm.getEmail());
        System.out.println("Received password: " + loginForm.getPassword());

        Optional<UserDto> aUser;
        if (loginForm.getEmail() != null && !loginForm.getEmail().isEmpty()) {
            // 假设userService.getAUserByEmail(String email)存在
            // aUser = userService.getAUserByEmail(loginForm.getEmail());
            // model.addAttribute("user", aUser);
            // var mv = new ModelAndView("user/user-list", model.asMap());
            // return mv;
            return new ModelAndView("redirect:/success-page"); // 示例重定向
        } else {
            // 如果email为空，可能需要返回错误信息
            model.addAttribute("loginForm", loginForm); // 将当前表单数据返回以便重新填充
            model.addAttribute("errorMessage", "Email cannot be empty.");
            return new ModelAndView("/login/login-form", model.asMap());
        }
    }
}