山东省工程建设信息官方网站,河南网站seo推广,上海网站建设平台站霸网络,百家利网站开发步骤1:基于前面的知识点步骤2:先运行#xff0c;看到效果#xff0c;再学习步骤3:模仿和排错步骤4:TestController步骤5:普通遍历步骤6:带状态的遍历步骤7:结合 select步骤8:结合 单选框步骤9:完整的 test.html步骤10:重启测试步骤 1 : 基于前面的知识点本知识点是建立在上一…步骤1:基于前面的知识点步骤2:先运行看到效果再学习步骤3:模仿和排错步骤4:TestController步骤5:普通遍历步骤6:带状态的遍历步骤7:结合 select步骤8:结合 单选框步骤9:完整的 test.html步骤10:重启测试步骤 1 : 基于前面的知识点本知识点是建立在上一个知识点可运行项目的基础上进行的改进,所以最好把上个知识点理解和消化了.步骤 2 : 先运行看到效果再学习老规矩先下载下载区(点击进入)的可运行项目配置运行起来确认可用之后再学习做了哪些步骤以达到这样的效果。 运行Application.java 然后访问如下测试地址http://127.0.0.1:8080/thymeleaf/test可以看到如图所示的集中常见遍历需求1. 单纯表格2. 取status值的表格3. 下拉框4. 单选框步骤 3 : 模仿和排错在确保可运行项目能够正确无误地运行之后再严格照着教程的步骤对代码模仿一遍。 模仿过程难免代码有出入导致无法得到期望的运行结果此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码来定位问题所在。 采用这种方式学习有效果排错有效率可以较为明显地提升学习速度跨过学习路上的各个槛。 推荐使用diffmerge软件进行文件夹比较。把你自己做的项目文件夹和我的可运行项目文件夹进行比较。 这个软件很牛逼的可以知道文件夹里哪两个文件不对并且很明显地标记出来 这里提供了绿色安装和使用教程diffmerge 下载和使用教程步骤 4 : TestController准备集合 ListProduct 用于视图上显示。 需要注意的是 第5个产品用的是 currentProductpackage com.how2java.springboot.web;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import com.how2java.springboot.pojo.Product;Controllerpublic class TestController {RequestMapping(/test)public String test(Model m) {String htmlContent p stylecolor:red 红色文字/p;Product currentProduct new Product(5,product e, 200);boolean testBoolean true;ListProduct ps new ArrayList();ps.add(new Product(1,product a, 50));ps.add(new Product(2,product b, 100));ps.add(new Product(3,product c, 150));ps.add(new Product(4,product d, 200));ps.add(currentProduct);ps.add(new Product(6,product f, 200));ps.add(new Product(7,product g, 200)); m.addAttribute(ps, ps);m.addAttribute(htmlContent, htmlContent);m.addAttribute(currentProduct, currentProduct);m.addAttribute(testBoolean, testBoolean);return test;}}步骤 5 : 普通遍历使用 th:each 遍历div classshowingh2遍历/h2tabletheadtrthid/thth产品名称/thth价格/th/tr/theadtbodytr th:eachp: ${ps}td th:text${p.id}/tdtd th:text${p.name}/tdtd th:text${p.price}/td/tr/tbody/table/div步骤 6 : 带状态的遍历使用 th:eachp,status: ${ps} 方式遍历就把状态放在 status里面了 同时还用3元表达式判断奇偶 th:class${status.even}?even:oddstatus里还包含了如下信息index 属性, 0 开始的索引值count 属性, 1 开始的索引值size 属性, 集合内元素的总量current 属性, 当前的迭代对象even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个first 属性, boolean 类型, 是否是第一个last 属性, boolean 类型, 是否是最后一个div classshowingh2带状态遍历/h2tabletheadtrthindex/ththid/thth产品名称/thth价格/th/tr/theadtbodytr th:class${status.even}?even:odd th:eachp,status: ${ps}td th:text${status.index}/tdtd th:text${p.id}/tdtd th:text${p.name}/tdtd th:text${p.price}/td/tr/tbody/table/div步骤 7 : 结合 select还是用 th:each,但是放在option元素上就可以遍历出多个下拉框出来了。其中 th:selected 表示被选中的项。div classshowingh2遍历 select /h2select size3option th:eachp:${ps} th:value${p.id} th:selected${p.idcurrentProduct.id} th:text${p.name} /option/select/div步骤 8 : 结合 单选框单选框也是同样的做法其中 th:checked用于判断是否选中div classshowingh2遍历 radio /h2input nameproduct typeradio th:eachp:${ps} th:value${p.id} th:checked${p.idcurrentProduct.id} th:text${p.name} //div步骤 9 : 完整的 test.html完整的 test.html!DOCTYPE HTMLhtml xmlns:thhttp://www.thymeleaf.orgheadtitlehello/titlemeta http-equivContent-Type contenttext/html; charsetUTF-8 /link relstylesheet typetext/css mediaall href../../webapp/static/css/style.cssth:href{/static/css/style.css}/script typetext/javascript src../../webapp/static/js/thymeleaf.jsth:src{/static/js/thymeleaf.js}/scriptstyleh2{text-decoration: underline;font-size:0.9em;color:gray;}/style /headbodydiv classshowingh2遍历/h2tabletheadtrthid/thth产品名称/thth价格/th/tr/theadtbodytr th:eachp: ${ps}td th:text${p.id}/tdtd th:text${p.name}/tdtd th:text${p.price}/td/tr/tbody/table/divdiv classshowingh2带状态遍历/h2tabletheadtrthindex/ththid/thth产品名称/thth价格/th/tr/theadtbodytr th:class${status.even}?even:odd th:eachp,status: ${ps}td th:text${status.index}/tdtd th:text${p.id}/tdtd th:text${p.name}/tdtd th:text${p.price}/td/tr/tbody/table/divdiv classshowingh2遍历 select /h2select size3option th:eachp:${ps} th:value${p.id} th:selected${p.idcurrentProduct.id} th:text${p.name} /option/select/divdiv classshowingh2遍历 radio /h2input nameproduct typeradio th:eachp:${ps} th:value${p.id} th:checked${p.idcurrentProduct.id} th:text${p.name} //divdiv classshowingh2条件判断/h2p th:if${testBoolean} 如果testBoolean 是 true 本句话就会显示/pp th:if${not testBoolean} 取反 所以如果testBoolean 是 true 本句话就不会显示/pp th:unless${testBoolean} unless 等同于上一句所以如果testBoolean 是 true 本句话就不会显示/pp th:text${testBoolean}?当testBoolean为真的时候显示本句话这是用三相表达式做的: /p/divdiv classshowingh2显示 转义和非转义的 html 文本/h2p th:text${htmlContent} /pp th:utext${htmlContent} /p/divdiv classshowingh2显示对象以及对象属性/h2p th:text${currentProduct} /pp th:text${currentProduct.name} /pp th:text${currentProduct.getName()} /p/divdiv classshowing th:object${currentProduct}h2*{}方式显示属性/h2p th:text*{name} /p/divdiv classshowingh2算数运算/h2p th:text${currentProduct.price999} /p/divdiv classshowingdiv th:replaceinclude::footer1 /divdiv th:replaceinclude::footer2(2015,2018) /div/div/body/html步骤 10 : 重启测试重新运行 Application.java, 然后测试http://127.0.0.1:8080/thymeleaf/test更多内容点击了解 https://how2j.cn/k/springboot/springboot-interation/1740.html
