Spring Boot使用thymeleaf模板

時間 2021-01-19

標籤 javascript css html java jquery 程序員 web spring bootstrap 瀏覽器欄目 Spring 简体版

原文原文鏈接

Thymeleaf是個XML/XHTML/HTML5模板引擎，能夠用於Web與非Web應用。Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板建立方式，所以也能夠用做靜態建模。能夠徹底替代JSP。javascript

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它能夠讓美工在瀏覽器查看頁面的靜態效果，也能夠讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。css

那麼Spring Boot怎樣和thymeleaf整合呢？html

首先新建maven項目，導入spring boot的依賴java

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

導入thymeleaf starter pom依賴jquery

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

在src/main/resources下新建static目錄（存放js、css、圖片等靜態資源）和templates目錄（存放展現模板，如html等），將bootstrap相關的js、css放入到static下程序員

新建Person類，做爲數據載體
web

package com.spring.boot.web.model;

public class Person {
	
	private String name;
	
	private int age;
	
	public Person(String name,int age) {
		this.name = name;
		this.age = age;
	}

	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

新建WebController類，指定入口方法，向模板填充數據spring

package com.spring.boot.web.controller;

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

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

import com.spring.boot.web.model.Person;

@Controller
public class WebController {
	
	@RequestMapping("/")
	public String index(Model model){
		Person onePerson = new Person("微兒博客", 18);
		
		List<Person> list = new ArrayList<Person>();
		Person p1 = new Person("張三", 18);
		Person p2 = new Person("李四", 19);
		Person p3 = new Person("王五", 20);
		list.add(p1);
		list.add(p2);
		list.add(p3);
		
		model.addAttribute("oneperson", onePerson);//向模板傳數據
		model.addAttribute("people", list);
		return "index";//找到名爲index.*的模板
	}
}

在src/main/resources/templates下新建index.htmlbootstrap

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>test</title>
<link th:href="@{css/bootstrap.min.css}" rel="stylesheet"/>
</head>
<body>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">訪問model</h3>
		</div>
		<div class="panel-body">
			<span th:text="${oneperson.name}"></span>
		</div>
	</div>
	<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">
					<li class="list-group-item" th:each="person:${people}">
						<span th:text="${person.name}"></span>
						<span th:text="${person.age}"></span>
						<button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">獲取名字</button>
					</li>
				</ul>
			</div>
		</div>	
	</div>
	<script type="text/javascript" th:src="@{js/jquery-1.12.3.min.js}"></script>
	<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
	<script th:inline="javascript">
		function getName(name){
			alert(name);
		}
	</script>
</body>
</html>

建立執行類Main瀏覽器

package com.spring.boot.web;

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

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

執行，訪問localhost：8080

原文連接：http://www.weare.net.cn/article/6e8a585099d2169180abeb04efe8b59f.html