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

 

可能不是很美观，因为并没有加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. adb模拟按键与输入

    在 adb shell 里有个很实用的命令叫 input,通过它可以做一些有趣的事情. input 命令的完整 help 信息如下: Usage: input [<source>] < ...

  2. Redis06——Redis到底能用在什么地方（上）

    之前我们介绍了一些列关于Redis的数据结构.持久化.过期&淘汰策略.集群化等知识点,感兴趣的小伙伴可以在文章的末尾查看往期内容.今天将为大家带来Redis的应用.由于本篇文章较长,所以将拆分 ...

  3. Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递

    目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...

  4. 阿里云centos安装oracle

    目录 阿里云centos安装oracle 阿里云默认没有swap分区,oracle安装需要 安装Oracle所需的依赖包 创建用户和组 关闭SELINUX(阿里云缺省关闭) 开始安装 使用" ...

  5. CentOS系统python默认版本由python2改为python3

    一.了解 CentOS中如果安装有yum,一般会有python2的某个版本.命令行键入python,出现的python2的环境: [root@instance-hrnebyqu src]# pytho ...

  6. Vue 学习笔记（四）

    一.路由简单示例 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <sc ...

  7. keep-alive 必须 页面有name 要不缓存不住数据

    keep-alive 必须 页面有name 要不缓存不住数据

  8. centos 7 中没有iptables 和service iptables save 指令使用失败问题解决方案

    1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service iptables save 如果上述命令 ...

  9. 信号与系统实验序章0——MATLAB基础命令入门

    本次开启新的系列,关于用Matlab实现常见信号和函数的生成和变换. 同时如果没有MATLAB基础,那么可以跟着本文一步一步学习Matlab的相关操作,本文旨在记录在信号与系统课程中MATLAB的学习 ...

  10. 手动实现AJAX

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