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

 

可能不是很美观，因为并没有加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. Mac上Burpsuite 拦截不到HTTPS流量怎么设置

    在百度了一堆以及修修改改下终于拦截到HTTPS流量了. 安装步骤就大致讲一下吧 网上下载burp的安装包,然后Mac上直接打开这个burpUnlimited.jar包就可以了 我直接选择的第一个   ...

  2. Linux监控系统相关资源和运行状态命令整理

    #前言:Linux系统自带了些实时查看监控系统运行状态的相关命令,接下来我们就来了解一下. #首先我们先来了解一下什么是进程 #进程:是Linux用来表示正在运行的程序的一种抽象概念,Linux系统上 ...

  3. python sqlite3操作类扩展，包含数据库分页

     一.原因 最近在使用python3和sqlite3编辑一些小程序,由于要使用数据库,就离不开增.删.改.查,sqlite3的操作同java里的jdbc很像,于是就想找现成的操作类,找来找去,发现一个 ...

  4. 利用border-radius画椭圆

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. vue中的$props、$attrs和$listeners研究 [包装iview组件]

    $props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 ...

  6. 搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内含XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 搭建步骤: 1.在Windows系统中安装WAMP 下载地址:htt ...

  7. android studio 添加 apache.http

  8. [剑指offer]62.圆圈中最后剩下的数字

    62.圆圈中最后剩下的数字 题目 0,1,...,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 例如,0.1.2.3.4这5个数字组成 ...

  9. vue one

    目录 复习 Vue框架 Vue的优点 Vue的使用 vue完成简单的事件 vue操作简单样式 小结 指令 文本指令 事件指令 属性指令 条件指令 复习 """ 1.BBS ...

  10. 洛谷 P1891 疯狂LCM 题解

    原题链接 享受推式子的乐趣吧 数论真有趣! 庆祝:数论紫题第 \(3\) 道. \[\sum_{i=1}^n \operatorname{lcm}(i,n) \] \[= \sum_{i=1}^n \ ...