本节主要实现一个供用户选择食材的界面（例如点一个鸡蛋灌饼，可以选择加香肠也可以选择加生菜）。

image

为了实现上述功能，我们需要：

• 创建一个 domain 类
• 创建一个 Spring MVC Controller
• 创建一个视图模板

1 创建 domain 类

@Data
@RequiredArgsConstructor
public class Ingredient {
  private final String id;
  private final String name;
  private final Type type;
  
  public static enum Type {
    WRAP, PROTEIN, VEGGIES, CHEESE, SAUCE
  }
}

为了减少重复劳动，这里使用了 Lombok。
@Data 注解告诉 Lombok 在运行时动态生成所有需要的方法（getter/setter/equals/hashCode/toString 等）
@RequiredArgsConstructor 注解告诉 Lombok 为该类创建一个包含所有 final 属性的构造函数

2 创建 Controller 类

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

@ModelAttribute
public void addIngredientsToModel(Model model) {...}

  @GetMapping
  public String showDesignForm(Model model) {
    model.addAttribute("design", new Taco());
    return "design";
  }

@Slf4j 同样是 Lombok 提供的注解，用于在运行时创建一个 Logger 的实例。等价于代码 private static final org.slf4j.Logger log = org.slf4j.LoggerFactory.getLogger(DesignTacoController.class);
@ModelAttribute 标记的 addIngredientsToModel 方法会在 showDesginForm 之前执行

当一个 /design 的 GET 请求过来的时候，会先调用 addIngredientsToModel 方法，添加 Ingredients 数据到 Model 中，然后再调用 showDesignForm 方法。

3 创建 View

这里选择 Thymeleaf 创建一个视图。视图需要实现文章开头展示的页面效果。
主要有两部分组成，一部分是选择 Ingredients 的复选框，另一部分是文本框输入 Taco 的名称。

<form method="POST" th:object="${design}">
    <div class="grid">
      <div class="ingredient-group" id="wraps">
      <h3>Designate your 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>...</div>
    </div>

    <div>
      <h3>Name your taco creation:</h3>
      <input type="text" th:field="*{name}"/>
      <br/>
      <button>Submit your taco</button>
    </div>
    </form>