Spring Taco Cloud——design视图的创建（含thymeleaf模板遇到的一些小问题）

Posted 2021-03-01 yycjavastudy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Spring Taco Cloud——design视图的创建（含thymeleaf模板遇到的一些小问题）相关的知识，希望对你有一定的参考价值。

先来看下综合前两篇内容加上本次视图的成果

技术图片

可能不是很美观，因为并没有加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}">INGREDIENT</span><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}">INGREDIENT</span><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}">INGREDIENT</span><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}">INGREDIENT</span><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>