springboot-thymeleaf

時間 2019-11-19

原文原文鏈接

Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP 。相較與其餘的模板引擎，它有以下三個極吸引人的特色：css

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它能夠讓美工在瀏覽器查看頁面的靜態效果，也能夠讓程序員在服務器查看帶數據的動態頁面效果。
Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、該jstl、改標籤的困擾。
Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。

在SpringBoot中集成Thymeleaf構建Web應用步驟：html

pom依賴：jquery

 1 <dependencies>
 2         <dependency>
 3             <groupId>org.springframework.boot</groupId>
 4             <artifactId>spring-boot-starter-web</artifactId>
 5             <exclusions>
 6                 <exclusion>
 7                     <groupId>org.springframework.boot</groupId>
 8                     <artifactId>spring-boot-starter-tomcat</artifactId>
 9                 </exclusion>
10             </exclusions>
11         </dependency>
12         <dependency>
13             <groupId>org.springframework.boot</groupId>
14             <artifactId>spring-boot-starter-jetty</artifactId>
15         </dependency>
16 
17         <dependency>
18             <groupId>org.springframework.boot</groupId>
19             <artifactId>spring-boot-starter-test</artifactId>
20             <scope>test</scope>
21         </dependency>
22         <dependency>
23             <groupId>org.springframework.boot</groupId>
24             <artifactId>spring-boot-starter-thymeleaf</artifactId>
25         </dependency>
26     </dependencies>

資源目錄

Spring Boot默認提供靜態資源目錄位置需置於classpath下，目錄名需符合以下規則：程序員

/static
/public
/resources
/META-INF/resources

舉例：咱們能夠在src/main/resources/目錄下建立static，在該位置放置一個圖片文件pic.jpg。啓動程序後，嘗試訪問http://localhost:8080/pic.jpg。如能顯示圖片，配置成功。web

SpringBoot的默認模板路徑爲：src/main/resources/templatesspring

添加頁面

在src/main/resources/templates下面添加一個index.html首頁，同時引用到一些css、js文件，看看Thymeleaf 3的語法：bootstrap

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"
 3       xmlns:th="http://www.thymeleaf.org">
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta name="renderer" content="webkit">
 8     <title>首頁</title>
 9     <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
10     <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
11     <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
12 </head>
13 <body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
14 <div id="wrapper">
15     <h1 th:text="${msg}"></h1>
16 </div>
17 <script th:src="@{/static/js/jquery.min.js}"></script>
18 <script th:src="@{/static/js/bootstrap.min.js}"></script>
19 
20 </body>
21 </html>

說明：瀏覽器

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

加上這個命名空間後就能在頁面中使用Thymeleaf本身的標籤了，以th:開頭。tomcat

鏈接語法 th:href="@{/static/css/bootstrap.min.css}"服務器

訪問Model中的數據語法 th:text="${msg}"

在頁面裏顯示的是一個鍵爲msg的消息，須要後臺傳遞過來。

編寫Controller

接下來編寫控制器類，將URL / 和 /index 都返回index.html頁面：

 1 @Controller
 2 public class IndexController {
 3 
 4     private static final Logger _logger = LoggerFactory.getLogger(IndexController.class);
 5 
 6     /**
 7      * 主頁
 8      *
 9      * @param model
10      * @return
11      */
12     @RequestMapping({"/", "/index"})
13     public String index(Model model) {
14         model.addAttribute("msg", "welcome you!");
15         return "index";
16     }
17 
18 }

在model裏面添加了一個屬性，key=msg，值爲welcome you!。

接下來啓動應用後，打開首頁看看效果如何。消息正確顯示，成功！。

相關標籤/搜索

Spring

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。