从零开始的Spring Boot学习【十五】【模板Thymeleaf(三)】

我们先来看看它的标准表达式语法,以便于让我们准确的使用Thymeleaf,我们先来看一个比较常用的。

我们点击打开PDF文档的第四章(不知道是啥文档的童鞋,看我上一章)。

${...}

可以看到有很多表达式方法,我们先不管其他的,用一个使用次数比较多的:变量表达式,这个是类似于EL表达式。

我们在项目的templates文件夹中新建一个html文件,取名字为test。然后把一个简单的Thymeleaf模板复制过来。

想要手写的童鞋,别忘记添加xmlns:th=“http://www.thymeleaf.org”这个命名空间(XML Namespaces)

我们需要注意,在以前传统的web项目中:静态资源修改后  是不需要重启服务器的;但是在Spring Boot项目中,修改后静态项目是需要重启服务器的。

在Controller中,我们写一个方法,映射到uri:/thymelaef_test中,我们知道在以前学习的SSM框架中,我们使用SpringMVC,在方法中写上一个Model或者一个Map<String, Object>,SpringMVC会自动把这些数据打包放入到request域中,这个方法是已经封装了的,我们不需要自己操作放入request域中。

我们只需要往Model或者Map<String, Object>中放数据就可以了。return "test",这个实际上是返回一个页面的uri,把Model或者Map<String, Object>的数据都带到了test.html页面上。我们不需要添加后缀,因为Spring Boot默认后缀为.html,当然我们可以进行设置,这个在后面会有讲到。

虽然Spring Boot默认不支持JSP,但是我们可以更改成支持。不过是要做一些小的变动,这些在后面也会讲。这样也许会方便SSM整合成Spring Boot?

可能大家已经忘记了,在application.properties中,我设置了项目的路径,这里给大家看一下,然后,现在我们来运行一下项目。

部署成功后,我们运行以上URL,然后会发现我们Map集合封装的信息,给取了出来,我们的初步使用Thymeleaf已经成功了。

小总结一下:

<p th:text="${welcome}">welcome to thymeleaf....</p>

先从reuqest中取出welcome中取值,如果有则直接显示;如果没有,则显示welcome to thymeleaf....

th就是替换原有html的值:th:html属性名=值
<p id="pid" class="pclass"  th:id="${welcome}" th:class="${welcome}">welcome to thymeleaf....</p>

同样的道理,id和class也是会随之改变覆盖,感兴趣的童鞋,复制代码自己进行一波尝试。

那么除了th:html属性名外,我们还能书写些啥呢?

我们看一下官方文档的第十章,这是介绍属性的一栏,在右边我们能看到有很多Attributes,名字取得都非常好理解,比如insert插入,repalce代替……等等。

在这里我们讲一下text,和utext:

假设标签里面嵌套了一个<h1>hello</h1>

th:text	  获取文本值	    显示将hello渲染为h1后的效果
th:utext  获取文本值(不转义)  显示<h1>hello</h1>

我们之前讲过单个的输出,那么怎么多个输出呢?在实际的项目中,我们很多时候都是用到批量输出,就像java代码中的for循环一样。我们看到官方文档的第六章Iteration,迭代遍历。我们往下翻阅,在下方有一个简单的模板。

我们复制一下,放到我们的test.html中。去掉一些我们不需要用到的代码,只保留迭代的部分。

th:each就相当于for,prod:${prods} 就相当于从request中拿到的prods数组,Object或者一个List等等,从中取出每一个元素,然后输出每一个元素中的属性名中存在的值。

我们现在来编写一下后端的代码。

首先创建一个entity实体类,然后在Controller中用list装一些Product的实体对象,放入Map中,传到前端。

我们运行看一下结果。

结果正确,好的,简单的Thymeleaf用法就先介绍到这里咯。大家可以通过查看官方文档和自己的亲身实践过程中,加深对Thymeleaf的理解。

关注博主,更多精彩哦!

上一章:从零开始的Spring Boot学习【十四】【模板Thymeleaf(二)】

下一章:从零开始的Spring Boot学习【十六】【整合外置Tomcat以及使用JSP开发】

发布了40 篇原创文章 · 获赞 44 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/KnightHONG/article/details/104838152