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