springboot微服务--04 web开发--Thymeleaf模板引擎

xiaoxiao2021-03-01  23

SpringBoot 的web开发Thymeleaf模板引擎 Thymeleaf基础知识 1、引入Thymeleaf2、访问model中的数据3、model中数据迭代4、数据判断5、在JavaScript中访问model 与Spring MVC集成与Spring Boot的Thymeleaf支持


SpringBoot 的web开发

springBoot提供了spring-boot-starter-web,它有嵌入式 Tomcat 以及 Spring MVC 的依赖

Thymeleaf模板引擎

因为JSP在内嵌Servlet 的容器上运行有一些问题(内嵌Tomcat、Jetty不支持以 jar 包的形式运行 JSP,Undertow不支持 JSP),SpringBoot提供了大量的模板引擎,包括FreeMarker、Groovy、Thymeleaf、Velocity和Mustache,推荐使用Thymeleaf,因为它提供了完美的SpringMVC的支持。

Thymeleaf基础知识

Thymeleaf是一个 xml/xhtml/html 的模板引擎,可以作为MVC的 Web 应用的 View 层,还提供了额外的模块与Spring MVC集成,可以代替JSP:

1、引入Thymeleaf

下面的代码是一个基本的Thymeleaf模板页面,这里引入了Bootstrap(样式控制)和jQuery(DOM操作)

<!--通过下面的命名空间,将静态页面转换为动态的视图。需要动态处理的元素将使用th:作为前缀--> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta content="text/html;charset="UTF-8"/> <!-- 通过"@{}"引用Web静态资源,在JSP下是极易出错的 --> <link th:src="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/> <link th:src="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/> </head> <body> <!-- 通过"@{}"引用Web静态资源,在JSP下是极易出错的 --> <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script> <script th:src="@{bootstrap/js/bootstrap.min.js}"></script> </body> </html>

2、访问model中的数据

通过”${}”访问model中的属性,与JSP很相似。

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">访问model</h3> </div> <div class="panel-body"> <!-- 使用下面的语句访问singlePerson的那么属性--> <span th:text="${singlePerson.name}"></span> </div> </div>

3、model中数据迭代

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">列表</h3> </div> <div class="panel-body"> <ul class="list-group"> <!-- 使用th:each来做循环迭代,person是迭代元素,像上面一样访问迭代中的元素--> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </li> </ul> </div> </div>

4、数据判断

<!-- 通过${not #lists.isEmpty(people)}表达式判断people是否为空。Thymeleaf支持>、<、>=、<=、==、!=作为比较条件--> <div th:if="${not #lists.isEmpty(people)}"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">列表</h3> </div> <div class="panel-body"> <ul class="list-group"> <!-- 使用th:each来做循环迭代,person是迭代元素,像上面一样访问迭代中的元素--> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </li> </ul> </div> </div> </div>

5、在JavaScript中访问model

Thymeleaf里的实现代码如下:

<!--通过th:inline添加到script标签,这样javascript代码中即可访问model中的属性--> <script th:inline="javascript"> <!--通过[[${}]]格式获得实际的值--> var single = [[${singlePerson}]]; console.log(single.name +"/"+single.age) </script>

在html中获得model的值

<li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> <!-- 注意格式th:onclick--> <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button> </li>

与Spring MVC集成

在Spring MVC中需要集成模板引擎的话,需要定义ViewResolver并且在ViewResolver中定义view,如下面代码,InternalResourceViewResolver 中定义了 JstlView;

@Bean public InternalResourceViewResolver viewResolver() { InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); viewResolver.setPrefix("/WEB-INF/classes/views/"); viewResolver.serSuffix(".jsp"); viewResolver.setViewClass(JstlView.class); return vireResolver; }

庆幸 Thymeleaf 定义好了 org.thymeleaf.spring4.view.ThymeleafView 和 org.thymeleaf.spring4.view.ThymeleafViewResolver。其中调用关系如下图所示:

与Spring Boot的Thymeleaf支持

上图中,与SpringMVC集成的过程在SpringBoot中通过 org.springframework.boot.autoconfigure.thymeleaf 包对 Thymeleaf 进行了自动配置。通过查看 ThymeleafProperties 源码,可在 application.properties 中,以 spring.thymeleaf 来配置 Thymeleaf。

转载请注明原文地址: https://www.6miu.com/read-3199974.html

最新回复(0)