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

 

可能不是很美观，因为并没有加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早已看透了一切。

Spring Taco Cloud——design视图的创建（含thymeleaf模板遇到的一些小问题）的更多相关文章

  1. Spring Taco Cloud——Controller的创建（含SpringMVC执行过程&SpringBoot&Spring三者解释及关联）

    在记录这次控制器编写前,对于Spring的感觉就是经常提这样代码好简洁,这样好方便,这个是用来干嘛的诸如之类的话. What is Spring ?这是我想问自己的,一直认为是简化代码利于工程的开源框 ...

  2. Spring Boot入门第四天：使用Thymeleaf模板引擎

    原文链接 关于Thymeleaf的优点,我只说一条:它就是html页面啊,直接可以用浏览器打开.受够了JSP的同学可以尝试一下. 1.在pom.xml文件中添加依赖: <!--<depen ...

  3. Spring Taco Cloud——配料表（Lombok的安装及其注解）

    先简单概括下这个项目:外卖订餐平台Web,这个是承接我的这篇博文来续写的https://www.cnblogs.com/yycjavastudy/articles/12666104.html,在这一篇 ...

  4. Spring 学习笔记（十）渲染 Web 视图 (Apache Tilesa 和 Thymeleaf)

    使用Apache Tiles视图定义布局 为了在Spring中使用Tiles,需要配置几个bean.我们需要一个TilesConfigurer bean,它会负责定位和加载Tile定义并协调生成Til ...

  5. spring mvc velocity多视图

    1.ViewResolverUrlBasedViewResolver 这个东西是根据url 进行路由的.网上搜了 1.order 排序,同名出现各种问题 2.XmlViewResolver,BeanN ...

  6. spring boot / cloud (一) 使用filter防止XSS

    spring boot / cloud (一) 使用filter防止XSS 前言 XSS(跨站脚本攻击) 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading ...

  7. spring boot / cloud (二) 规范响应格式以及统一异常处理

    spring boot / cloud (二) 规范响应格式以及统一异常处理 前言 为什么规范响应格式? 我认为,采用预先约定好的数据格式,将返回数据(无论是正常的还是异常的)规范起来,有助于提高团队 ...

  8. spring boot / cloud (三) 集成springfox-swagger2构建在线API文档

    spring boot / cloud (三) 集成springfox-swagger2构建在线API文档 前言 不能同步更新API文档会有什么问题? 理想情况下,为所开发的服务编写接口文档,能提高与 ...

  9. spring boot / cloud (十五) 分布式调度中心进阶

    spring boot / cloud (十五) 分布式调度中心进阶 在<spring boot / cloud (十) 使用quartz搭建调度中心>这篇文章中介绍了如何在spring ...

随机推荐

  1. 什么是phpMyAdmin

    phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可以成为一个简易方式输入繁杂 ...

  2. Vue2.0 【第三季】第2节 computed Option 计算选项

    目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...

  3. eslint常用三种校验语句

    1.关闭对整段代码的校验 /* eslint-disable */ code /* eslint-enable */ 2.关闭当前行代码的校验 line code // eslint-disable- ...

  4. 谈谈一些逻辑相同，性能差异却很大的sql

    总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...

  5. Java序列化和反序列化-（新手）

    实例: lx1: import java.io.*; public class xuliehua { public static void main(String[] args) throws Exc ...

  6. Swift5.2 新特性

    Print 函数传参新格式 let param = "参数" print(#"这是一个\#(param) xxxxx"#) 允许在模块中定义和标准库中名称一样的 ...

  7. Mol Cell Proteomics. | 粪便微生物蛋白质的组成与饮食诱导肥胖倾向的关联研究

    题目:Associations of the Fecal Microbial Proteome Composition and Proneness to Diet-induced Obesity 期刊 ...

  8. LocalStorage与SessionStorage

    localStorage与sessionStorage 每日更新前端基础,如果觉得不错,点个star吧

  9. RTSP协议进行视频取流的方法、注意点及python实现

    在视频应用中,我们一般都需要基于摄像头或录像机的视频流进行二次开发,那么就涉及到如何将视频流取出来. 在摄像机安装好之后,一般是通过局域网与本地的服务器进行连接,要取录像机的视频流就要在局域网范围内进 ...

  10. DRF之restful规范、Postman接口测试

    一. DRF简介 Django REST框架是一个功能强大且灵活的工具包,用于构建Web API. 使用REST框架的一些原因: 该网站可浏览API是你的开发人员一个巨大的可用性胜利. 身份验证策略包 ...