网站如何加入百度网盟,网络软文营销案例3篇,建设网站费用如何做账,黑马程序员培训价格表有时候需要借鉴别人的代码#xff0c;发现一个相似的功能点#xff0c;但是自己的是html页面别人的是jsp页面#xff0c;那如果不了解thymeleaf的话还是要费点功夫的。
什么是thymeleaf#xff0c;通俗点#xff0c;jsp中的${},以及jstl中的if标签什么的都不能用#xf…有时候需要借鉴别人的代码发现一个相似的功能点但是自己的是html页面别人的是jsp页面那如果不了解thymeleaf的话还是要费点功夫的。
什么是thymeleaf通俗点jsp中的${},以及jstl中的if标签什么的都不能用在html中要使用thymeleaf比如${}变成了[[${}]]等。
我使用thymeleaf将下面的jsp页面完全转化为了html页面我总结下常用语法 一、首先thymeleaf的引入
html langen xmlns:thhttp://www.thymeleaf.org
引入依赖 !--使用thymeleaf--
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency
然后就能用了
二、常用语法
1、页面插入比如翻页功能就经常单独作为一个页面然后插入到主页面中
page.html中最外面加个div标签包住(使用fragment标记)
div th:fragmentflag
table width95% aligncenter cellpadding0 cellspacing0........./div
主页面中插入
div th:insert/common/page :: flag/div 意思是插入page页面中的被包住的flag那一段
2、input th:vlaue${user.name} 为了防止user以及name为null页面报错写成如下格式input th:vlaue${user?.name} 所有的.前面加个?就行了如${list?.user?.name}
3、select选项标签
select namefilm_type_id idfilm_type_id stylewidth:155pxoption value0请选择/option option th:selected${option.film_type_id} ${film?.film_type_id} th:eachoption : ${filmTypes} th:value${option.film_type_id} th:text${option.film_type_name}/option/select
th:selected用于编辑页面数据回显th:each是遍历filmTypesoption是遍历出的单值th:value是提交上去的数据th:text是显示在页面上的数据
4、复选框功能实现
span th:eachsubString : ${09:00、11:00、13:00、15:00、17:00、19:00、 21:00、23:00.split(、)}input typehidden idfilm_scene namefilm_scene th:value${film?.film_scene} / input th:value${subString} typecheckbox namefilm_scenes th:checked${#strings.contains(film.film_scenenull?1:film.film_scene, subString)}/label[[${subString}]]/labelnbsp;nbsp;/span
这个是图片中 复选框功能的实现th:each遍历的数据是自己分割的th:checked也是用于编辑页面数据回显中的判断结果为true则选中${#strings.contains()}是thymeleaf中的内置对象就是各种函数这里的包含函数作用是判断前面的是否包含后面的最后的[[${}]]常用于标签之间比如label[[${subString}]]/label[[${}]]判空如下
span[[${film!null film.film_id!0?编辑:添加}]]电影/span
5、if判断
div th:if${film!null film.film_id!0}input typebutton ideditBtn Classbtnstyle value编 辑/ /div
这个是替换Jsp中的if标签
6、实现根据传递过来的film参数是否为null动态调整标签为 添加/编辑 页面标题功能
两种其一直接在th:text里面判断
TD classedittitle th:text${film!null film.film_id!0?编辑:添加}电影/TD
其二使用th:if和th:unless这两个是个组合
TD classedittitle th:if${film!null film.film_id!0} th:text编辑电影/TDTD classedittitle th:unless${film!null film.film_id!0} th:text添加电影/TD
7、img/标签
td alignleft colspan3img iduserImg th:src${(/upload/film.film_pic)} width70 height80 styleborder:0px;/nbsp;span idop styledisplay:noneimg srcimages/image/loading004.gif height80 //span/td
th:src加载图片这里的/upload是虚拟路径映射到F盘的某个图片文件film是接收的参数
下面还有一个img加载的是本地的图片就没有必要用thymeleaf要接收参数时用
8、iframe语法
将整个Html页面引入到另一个html中去
iframe nameuploadPage th:replacesys/uploadImg :: html width100% height50 marginheight0 marginwidth0 scrollingno frameborder0/iframe
意思是将uploadImg.html整个html引入不需要在uploadImg.html中标记fragment
但是这样引入是有些不好的地方(具体可见下一篇)当然一般情况下没问题建议用以下方法
springboot项目中假设静态资源指向static文件夹直接将要引入的页面放在static文件夹下然后代码如下
iframe nameuploadPage src/uploadImg.html width100% height50 marginheight0 marginwidth0 scrollingno frameborder0/iframe
意思是在resources根目录下开始找uploadImg.html
9、${#lists.size()}内置对象函数判断传过来的list参数
div th:if${#lists.size(films)0 films!null}/div
10、遍历中的count计数器
tr classlist0 onmouseovertr_mouseover(this) onmouseouttr_mouseout(this) th:eachm,count:${films} td width aligncenterinput typecheckbox namechkid th:value${m.film_id} stylevertical-align:text-bottom;//tdtd width aligncenter[[${count.index1}]]/tdtd width aligncenter[[${m.film_name}]]/tdtd width aligncenter[[${m.film_type_name}]]/tdtd width aligncenter[[${m.film_actors}]]/tdtd width aligncenter[[${m.film_price}]]/tdtd width aligncenter[[${m.film_date}]]/tdtd width aligncenter[[${m.film_scene}]]/tdtd width aligncenter[[${m.film_room}]]/tdtd width aligncenter[[${m.film_score}]]/tdtd width aligncenter
th:eachm,count:${films} 其中m为遍历单值count计数
11、a标签格式
a th:href{/book/page(book${bookId}, page${pageNumber})} //其中book和page为携带的参数
12、点击事件
th:onclickjavascript:openBox(\${curCabNo}\,\${box.no}\)
13、script格式
script th:inlinejavascript type text/javascriptvar flag [[${tip}]];/script
