java - 将值从 thymeleaf 发送到 Spring Boot 服务类

Question

我正在测试一个使用 thymeleaf 的 Spring Boot 应用程序，但我找不到任何解释如何将选择选项值从 thymeleaf 发送到 Spring Boot 服务类的文档。

基本上，我想要实现的是从 select 标记中获取值，以便我可以通过以下方法将它们插入数据库:请注意:此方法位于服务类中 => 它在 Controller 类中同时具有 get 和 post 映射。

public void addNewJob(JobPostEntity jobPostEntity, @RequestParam(value="selectCategory") String selectCategory) {
    jobPostEntity.setJobcategory("test");
    jobPostRepository.save(jobPostEntity);
}

thymeleaf 文件是:

<form th:action="@{/newjob}" th:object="${addNewJob}" method="post">
        <div class="form-group">
            <label for="">Offer Title</label> 
            <input type="text" th:field="*{jobtitle}"  class="form-control" placeholder="Entre Offer Title">
                 <small class="form-text text-muted">We'll never share your email
                with anyone else.</small>
        </div>

        <div class="form-group">
            <label >Company Name</label>
             <input type="text" th:field="*{jobcompany}"  class="form-control" placeholder="Enter Company Name">
        </div>


        <div class="form-group dropdown">
            <label for="sel1">Choose Category (select one):</label> 
            <select name="*selectCategory"
                class="form-control" id="selectCategory"
                onchange="getSelectedValue();" th:field="*{selectCategory}">

                <option  value="">Select Option</option>
                <option  value="software_engineer">Software Engineer</option>
                <option value="graphic_design ">Graphic Design</option>
                <option value="customer_service ">Customer Service</option>
                <option value="marketing" >Marketing</option>
                <option value="healthcare">Health Care</option>

            </select>
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Offer</label>
            <textarea class="form-control" th:field="*{jobtext}" placeholder="Describe your job offer"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit Offer</button>
    </form>

Answer 1

首先，您需要正确配置 Controller 类。我假设这是您的 addNewJob 方法所在的位置，因此我在示例中使用它。您需要有一个 @GetMapping (与 @RequestMapping(method = RequestMethod.GET) 相同，它返回 View 的名称(这是您的 thymeleaf 文件 -在下面的示例中，我为此使用了 jobForm.html)并映射到特定路径(示例中为/test)。

  @GetMapping("/test")
  public String getTestView() {
    return "jobform";
  }

您还需要一个方法来创建/检索用于填写表单的模型对象。这被映射为 th:object=${addNewJob} 的形式:

  @ModelAttribute(value = "addNewJob")
  public JobPostEntity newEntity() {
    return new JobPostEntity();
  }

最后，您将需要一个带有 @PostMapping 的方法，该方法会在您提交表单时调用。在您的示例中，它映射到/newjob，所以我也使用了它:

  @PostMapping(value = "/newjob")
  public void addNewJob(
      @ModelAttribute("addNewJob") final JobPostEntity myEntity) {
    System.out.println("got dto: " + myEntity);
    System.out.println("selectCategory: " + myEntity.getSelectedCategory());
  }

总而言之， Controller 看起来像这样:

@Controller
public class TestController {

  @GetMapping("/test")
  public String getTestView() {
    return "jobform";
  }

  @PostMapping(value = "/newjob")
  public void addNewJob(
      @ModelAttribute("addNewJob") final JobPostEntity myEntity) {
    System.out.println("got dto: " + myEntity);
    System.out.println("selectCategory: " + selectCategory);
  }

  @ModelAttribute(value = "addNewJob")
  public JobPostEntity newEntity() {
    return new JobPostEntity();
  }

}

至于选择选项的工作方式，我还将该字段放入 modelAttribute 中，因此您不必单独处理它们:

public class JobPostEntity {

  private String jobtitle;
  private String jobcompany;
  private String jobtext;
  private String selectCategory;
 //getters/setters
}

您粘贴的 html 代码还包含一些问题:

• 您没有表单的开始标记
• 选择标签没有 thymeleaf 映射(th:field)
• 输入标签没有结束元素

适合我的固定版本看起来像这样(不包括 body/head/etc 包装标签):

<form th:action="@{/newjob}" th:object="${addNewJob}" method="post">
        <div class="form-group">
            <label for="">Offer Title</label> 
            <input type="text" th:field="*{jobtitle}"  class="form-control" placeholder="Entre Offer Title" />
                 <small class="form-text text-muted">We'll never share your email
                with anyone else.</small>
        </div>

        <div class="form-group">
            <label >Company Name</label>
             <input type="text" th:field="*{jobcompany}"  class="form-control" placeholder="Enter Company Name"/>
        </div>


        <div class="form-group dropdown">
            <label for="sel1">Choose Category (select one):</label> 
            <select name="*selectCategory"
                class="form-control" id="selectCategory"
                onchange="getSelectedValue();"
                th:field="*{selectCategory}">

                <option value="">Select Option</option>
                <option value="software_engineer">Software Engineer</option>
                <option value="graphic_design ">Graphic Design</option>
                <option value="customer_service ">Customer Service</option>
                <option value="marketing" >Marketing</option>
                <option value="healthcare">Health Care</option>

            </select>
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Offer</label>
            <textarea class="form-control" th:field="*{jobtext}" placeholder="Describe your job offer"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit Offer</button>
    </form>

如果您启动应用程序并输入 http://localhost:8080/test (如果您使用默认上下文路径/端口)在浏览器中，表单应该显示并按预期工作。

此外，您还可以在这里找到一个非常好的教程 http://www.baeldung.com/thymeleaf-in-spring-mvc