先来看下综合前两篇内容加上本次视图的成果
可能不是很美观，因为并没有加css样式，我想等整个项目有个差不多的功能实现后再进行页面优化，请谅解
下面我贴上自己定义修改过的Taco的design视图代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>添加商品</title>
<meta charset="UTF-8"> </head> <body>
<h1>选择您的鸡公煲食材！</h1>
<img th:src="@{/images/TacoCloud.png}"/> <form method="POST" th:object="${design}">
<div class="coid">
<div class="ingredient-group" id="components">
<h3>请选择份量:</h3>
<div th:each= "ingredient:${component}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div> <div class="ingredient-group" id="flavors">
<h3>请选择口味:</h3>
<div th:each= "ingredient:${flavor}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div> <div class="ingredient-group" id="sidedishes">
<h3>请选择配菜:</h3>
<div th:each= "ingredient:${sidedish}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div> <div class="ingredient-group" id="drinks">
<h3>请选择饮品:</h3>
<div th:each= "ingredient : ${drink}">
<input name="ingredients" type="radio" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
</div> <div>
<h3>添加备注信息(口味，个人喜好等)</h3>
<input type="text" th:field="*{name}"/>
<br/> <button>→填写您的住址</button>
</div>
</form>
</body>
</html>
其中如19行的th:each属性是 themeleaf模板提供的，会针对该集合中元素逐个渲染div了，
特地注意一下，INGREDIENT是文本占位符，可以理解为功能与sql语句中的占位符 "?" 功能类似。
单个页面代码是较容易写出来的，但痛苦最纠人心的在于整合各个部件以及测试是否通过。我在此列一下返回视图的常见问题（视图采用Themeleaf模板，否则可以跳过这段）
- 404：
一般这个就有关路径了，在注解@RequstMapping中 是需要给出路径的（访问根路径直接 "/" ）
而在Controller控制器中，返回视图名即可，不要加 "/" ！！！
还有一种情况是包的层级有问题，这个不做过多阐述，其他的。。。好好检查下名称拼写吧
- 500
其中一种就是我踩过的坑了，耽误了半天时间，还纳闷怎么找不到解决办法：.html文件，返回的视图名一定一定不要有偏差，检查仔细点！
另一种呢视图中的一些内容写错了，比如${rrtt.id（少个}）等等
还有一种比较罕见的是默认themeleaf的版本比较低，貌似新版的spring导入没这个问题
来最后梳理下逻辑，以便我们的下一步开展：我们在淘宝上购物的时候，确定完我们要买什么后，是不是还要告诉他寄到哪呢，毕竟咱们做的是一个外卖应用嘛，没错，最后那个button早已看透了一切。