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

 

可能不是很美观，因为并没有加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. python学习-练习题兔子生长问题巩固

    有一对兔子,一个月之后成熟,成熟之后每个月会生出一对兔子,理想状态下兔子不会死,请问n个月后有多少兔子? 分析:第一个月:1 第二个月:1 第三个月:2 第四个月:3 第五个月:5 第六个月:8 从前 ...

  2. LSP原则—关于正方形不是长方形

    长方形有二个属性长和宽.并有一个设置长的方法和设置宽的方法,还有一个求面积的方法. 像下面 private int length; private int width; public void set ...

  3. css 超过标签定义的宽度后显示----

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 基于 Roslyn 实现一个简单的条件解析引擎

    基于 Roslyn 实现一个简单的条件解析引擎 Intro 最近在做一个勋章的服务,我们想定义一些勋章的获取条件,满足条件之后就给用户颁发一个勋章,定义条件的时候会定义需要哪些参数,参数的类型,获取勋 ...

  5. created：异步初始化数据都应该放到 created里面

    created:异步初始化数据都应该放到 created里面

  6. 基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档 (上篇)

    前言 为什么在开发中,接口文档越来越成为前后端开发人员沟通的枢纽呢? 随着业务的发张,项目越来越多,而对于支撑整个项目架构体系而言,我们对系统业务的水平拆分,垂直分层,让业务系统更加清晰,从而产生一系 ...

  7. oracle的sql语句优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  8. 998. 最大二叉树 II

    最大树定义:一个树,其中每个节点的值都大于其子树中的任何其他值. 给出最大树的根节点 root. 就像之前的问题那样,给定的树是从表 A(root = Construct(A))递归地使用下述 Con ...

  9. mysql中的on

    左右连接是一个性质所以我这里以左连接为例,写了一个小例子: 用到连接的时候on会常用到, on条件是在生成临时表时使用的条件,它不管on中的条件是否为真,都会返回左边表中的记录. 简单解释就是假设两个 ...

  10. python对齐输出

    这个问题烦恼了挺久,一般情况下我都是用\t解决,但其实这样的办法并不是很nice,然后今天在写一个demo的时候实在看不下去,就百度科普了一波,确实是有比较nice的解决方案. 像这样: 令人十分难受 ...