SpringBoot實戰(五)之Thymeleaf

時間 2019-11-16

標籤 springboot 實戰 thymeleaf 欄目 Spring 简体版

原文原文鏈接

Thymeleaf同jsp、volocity、freemarker等共同的職能是MVC模式中的視圖展現層，即View。html

固然了，SpringBoot中也能夠用jsp,不過不推薦這種用法，比較推崇的就是使用Thymeleaf。前端

關於Thymeleaf學習，建議參考官方文檔:https://www.thymeleaf.org/documentation.htmlvue

官方文檔例子，應有盡有。java

以前接觸過Thymeleaf是由於公司項目初建期間用過它搭建過測試環境，後來根據領導的指示，須要快速開發，並且當時對於Thymeleaf不是十分了解，當時對於它的瞭解認識只是展現前端數據的，同jsp職能同樣，固然這也是它們的共性。比較詳細的深刻了解和使用，是幫助一位學妹解決畢業論文的項目問題。那時幫助她寫了好十幾個類代碼和對應的十幾個html代碼。當時感觸比較深的是，Thymeleaf是如此的好用，比jsp還好用，jsp要遍歷之類，要麼加<%%>，或者引用jstl標籤庫進行數據遍歷等。而Thymeleat就不須要。簡潔直觀，我比較推崇Thymeleaf，特別是在先後端分離的項目，有的時候不用jsp,光純html+js的確有點吃力，即使使用了vue.js或者angular.js、react.js等雖然增長了便利性，可是了，若是一個項目前端語言不是十分統一的話，對於未來維護成本方面會大大提升，不易維護。mysql

Thymeleaf對於先後端分離，我認爲仍是不錯的。react

下面進入demo例子講解：git

1、導入maven依賴github

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.springframework</groupId>
    <artifactId>gs-uploading-files</artifactId>
    <version>0.1.0</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
    </parent>

    <properties>
        <java.version>1.8</java.version>
    </properties>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2、編寫實體web

package hello;

public class User {
    private Integer id;
    private String name;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    
}

3、編寫Controllerspring

package hello;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class TestController {

    
    
    @GetMapping(value="/test")
    public String test(Model model) {
        
          List<User> userList = new ArrayList<User>();
            for (int i = 0; i <10; i++) {
                User user =new User();
                user.setId(1);
                user.setName("張三");
                userList.add(user);
            }
            
            model.addAttribute("users", userList);
        return "test";
    }
}

4、編寫配置文件,將其放置在/src/main/resources下

application.properties

server.port=8080
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5

5、在src/main/resources目錄下新建templates目錄並新建html文件

test.htm

<html xmlns:th="http://www.thymeleaf.org">
<body>

<h2>用戶列表</h2>
  <div>
     <ul>
         <li  th:each="user:${users}">
              <span th:text="${user.id}"></span>-
             <span th:text="${user.name}"></span>-
         </li>
     </ul>
   </div>
</body>
</html>

6、編寫啓動類

package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}