如何从Thymeleaf模板设置对象字段?

时间:2019-04-18 14:28:59

标签: java spring-boot thymeleaf

我是Spring的新手,我试图在Spring 5的帮助下学习它(Craig Walls)。我正在创建小型Spring Boot MVC应用程序。现在,我对Thymeleaf有点问题。

我有Controller,View和Model作为POJO对象。当我尝试从Intellij Idea表单获取数据时,告诉我这一行的Thymeleaf视图有问题:

Model
import java.util.Date;
import java.util.List;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import lombok.Data;


@Data
public class Taco {

    private Long id;

    private Date createdAt;

    @NotNull
    @Size(min=5, message="Name must be at least 5 characters long")
    private String name;

    @Size(min=1, message="You must choose at least 1 ingredient")
    private List<Ingredient> ingredients;


}

查看

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>

</head>
<body>

    <h1>Design your taco!</h1>
    <img src="../static/images/TacoCloud.png" alt="TacoCloud.png" th:src="@{/images/TacoCloud.png}">

    <form method="POST" th:object="${taco}">
        <div class="grid">
            <div class="ingredient-group" id="wraps">
                <h3>Designate yor wrap:</h3>
                <div th:each="ingredient:${wrap}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>

                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>


            <div class="ingredient-group" id="proteins">
            <h3>Pick your protein:</h3>
            <div th:each="ingredient: ${protein}">
                <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                <span th:text="${ingredient.name}">INGREDIENT</span>
            </div>
        </div>


            <div class="ingredient-group" id="cheeses">
                <h3>Choose your cheese:</h3>
                <div th:each="ingredient:${cheese}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="veggies">
                <h3>Determine your veggies:</h3>
                <div th:each="ingredient : ${veggies}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"
                    />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
            <div class="ingredient-group" id="sauces">
                <h3>Select your sauce:</h3>
                <div th:each="ingredient : ${sauce}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"
                    />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
        </div>
        <div>
            <h3>Name your taco creation:</h3>
            <input type="text" name="name"  th:field="*{name}"/> 

            <br/>
            <button>Submit your taco</button>
        </div>

    </form>

</body>
</html>

控制器

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.Errors;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import tacos.Ingredient.Type;
import tacos.Ingredient;
import org.springframework.web.bind.annotation.ModelAttribute;
import tacos.Taco;
import tacos.data.IngredientRepository;

import javax.validation.Valid;


import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;


@Slf4j
@Controller
@RequestMapping("/design")
public class DesignTacoController {

    private final IngredientRepository ingredientRepo;

    @Autowired
    public DesignTacoController(IngredientRepository ingredientRepo){
        this.ingredientRepo=ingredientRepo;
    }


    @GetMapping
    public String showDesignForm(Model model) {

        List<Ingredient> ingredients=new ArrayList<>();
        ingredientRepo.findAll().forEach(i->ingredients.add(i));

        Type[] types = Ingredient.Type.values();
        for (Type type : types) {
            model.addAttribute(type.toString().toLowerCase(),
                    filterByType(ingredients, type));
        }

        return "design";
    }


    private List<Ingredient> filterByType(
            List<Ingredient> ingredients, Type type) {
        return ingredients
                .stream()
                .filter(x -> x.getType().equals(type))
                .collect(Collectors.toList());
    }

    @PostMapping
    public String processDesign(@Valid @ModelAttribute("design") Taco design, Errors errors, Model model) {
        if (errors.hasErrors()) {
            return "design";
        }

        // Save the taco design...
        // We'll do this in chapter 3
        log.info("Processing design: " + design);

        return "redirect:/orders/current";
    }

}

最后我得到这个错误:

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/design.html]")

Caused by: org.attoparser.ParseException: Error during execution of processor 'org.thymeleaf.spring5.processor.SpringInputGeneralFieldTagProcessor' (template: "design" - line 64, col 45)

3 个答案:

答案 0 :(得分:1)

我注意到您的代码中有两件事。

  1. 我看不到提交表单所需的表单上的th:action
  2. form method="POST" th:object="${taco}"更改为form method="POST" th:object="${design}"

尝试修复这两个问题,它应该可以工作。

答案 1 :(得分:0)

我遇到了同样的问题。

对我来说,解决方法是在Taco.java中添加吸气剂作为名称。 lombok不能以某种方式在运行时自动生成吸气剂。

并且th:object="${taco}"应该是th:object="${design}"

无需更改th:action。来自教程

  

如果您再次查看视图中的标记,则可以看到其方法属性设置为POST。此外,不会声明动作属性。这意味着,提交表单后,浏览器将收集表单中的所有数据,并以HTTP POST请求的形式将其发送到服务器,该请求与GET请求显示表单的路径相同,即/ design路径。 / p>

答案 2 :(得分:-1)

我在代码中发现了两件事:

  1. 我在html中找不到您的表单的任何操作。您应该使用th:action标签添加操作。
  2. 在html中,您使用th:object="${taco}"为html表单声明了一个对象。但是,您不要在返回HTML设计的控制器方法中的模型中添加“ taco”对象。您应该在控制器方法中添加“ taco”对象,如下所示。

    model.addAttribute(“ taco”,taco Object);