Spring Taco Cloud——design视图的创建(含thymeleaf模板遇到的一些小问题)
先来看下综合前两篇内容加上本次视图的成果
可能不是很美观,因为并没有加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模板遇到的一些小问题)的更多相关文章
- Spring Taco Cloud——Controller的创建(含SpringMVC执行过程&SpringBoot&Spring三者解释及关联)
在记录这次控制器编写前,对于Spring的感觉就是经常提这样代码好简洁,这样好方便,这个是用来干嘛的诸如之类的话. What is Spring ?这是我想问自己的,一直认为是简化代码利于工程的开源框 ...
- Spring Boot入门第四天:使用Thymeleaf模板引擎
原文链接 关于Thymeleaf的优点,我只说一条:它就是html页面啊,直接可以用浏览器打开.受够了JSP的同学可以尝试一下. 1.在pom.xml文件中添加依赖: <!--<depen ...
- Spring Taco Cloud——配料表(Lombok的安装及其注解)
先简单概括下这个项目:外卖订餐平台Web,这个是承接我的这篇博文来续写的https://www.cnblogs.com/yycjavastudy/articles/12666104.html,在这一篇 ...
- Spring 学习笔记(十)渲染 Web 视图 (Apache Tilesa 和 Thymeleaf)
使用Apache Tiles视图定义布局 为了在Spring中使用Tiles,需要配置几个bean.我们需要一个TilesConfigurer bean,它会负责定位和加载Tile定义并协调生成Til ...
- spring mvc velocity多视图
1.ViewResolverUrlBasedViewResolver 这个东西是根据url 进行路由的.网上搜了 1.order 排序,同名出现各种问题 2.XmlViewResolver,BeanN ...
- spring boot / cloud (一) 使用filter防止XSS
spring boot / cloud (一) 使用filter防止XSS 前言 XSS(跨站脚本攻击) 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading ...
- spring boot / cloud (二) 规范响应格式以及统一异常处理
spring boot / cloud (二) 规范响应格式以及统一异常处理 前言 为什么规范响应格式? 我认为,采用预先约定好的数据格式,将返回数据(无论是正常的还是异常的)规范起来,有助于提高团队 ...
- spring boot / cloud (三) 集成springfox-swagger2构建在线API文档
spring boot / cloud (三) 集成springfox-swagger2构建在线API文档 前言 不能同步更新API文档会有什么问题? 理想情况下,为所开发的服务编写接口文档,能提高与 ...
- spring boot / cloud (十五) 分布式调度中心进阶
spring boot / cloud (十五) 分布式调度中心进阶 在<spring boot / cloud (十) 使用quartz搭建调度中心>这篇文章中介绍了如何在spring ...
随机推荐
- bootstrap table分页跳转到第一页
1.destroy后重新初使化表格,可以将表格初始化封装为一个函数,destory后重新调用该函数进行初始化: 2.使用url刷新表格,$('#table').bootstrapTable('refr ...
- 爬虫之BeautifulSoup类
安装:pip install BeautifulSoup4 下表列出了主要的解析器,以及它们的优缺点:看个人习惯选取自己喜欢的解析方式 # 获取html代码 import requests r = r ...
- python的基本数据类型简介
python的基本数据类型有:数字-numbers.字符串-str.列表-list.元组-tuple.字典-dict.布尔-bool.集合-set 下面来个概览先大概了解一下,后面博文中咱再细说- 1 ...
- C语言程序设计(六) 循环控制结构
第六章 循环控制结构 循环结构:需要重复执行的操作 被重复执行的语句序列称为循环体 计数控制的循环 条件控制的循环 当型循环结构 直到型循环结构 for while do-while while(循环 ...
- 数据科学中的常见的6种概率分布(Python实现)
作者:Pier Paolo Ippolito@南安普敦大学 编译:机器学习算法与Python实战(微信公众号:tjxj666) 原文:https://towardsdatascience.com/pr ...
- mysql 如果没有密码 就不能远程连接
mysql 如果没有密码 就不能远程连接
- 一般人不知道的Flask框架SQLAlchemy的那些事
目录 SQLAlchemy 1.介绍 2.简单使用(能创建表,删除表,不能修改表) 3.一对多关系 4.多对多关系 5.操作数据表 6.基于scoped_session实现线程安全 7.基本增删查改 ...
- http详解和分析
1.http是什么? http 是一种超文本传输协议原名是这个Hypertext Transfer Protocol -- HTTP/1.1 可以百度查看http的RFC文档编号为RFC-2616 连 ...
- JAVA为什么不能通过构造函数传参来设置数组长度。
今天我们来说说 JAVA通过构造函数传递的参数来设置数组长度的问题. 问题在于我们没有明确知晓JVM的运行顺序.在new对象的时候,先调用构造函数,但是并没有将执行构造函数的代码,随机之后就初始化了 ...
- 6个出色的Kubernetes发行版,哪款最适合你?
作者简介 Christopher Tozzi,自2008年来以自由职业者的身份对Linux.虚拟化.容器.数据存储及其相关主题进行报道. 本文来自Rancher Labs 时至今日,通过Kuberne ...