版權(quán)聲明
- 本文原創(chuàng)作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
概述
在之前的教程中，我們介紹了Thymeleaf的基礎(chǔ)知識。在此，以案例形式詳細(xì)介紹Thymeleaf的基本使用。
項目結(jié)構(gòu)
要點(diǎn)概述：
- 1、在static下創(chuàng)建css文件夾用于存放css文件
- 2、在static下創(chuàng)建img文件夾用于存放圖片文件
依賴文件
請在pom.xml文件中添加如下依賴。
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.4</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.cn</groupId>
<artifactId>SpringBootThymeleaf01</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>SpringBootThymeleaf01</name>
<description>SpringBootThymeleaf01</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</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>
配置文件
請在application.properties文件添加以下配置。
# 緩存設(shè)置。開發(fā)中設(shè)置為false，線上時設(shè)置為true
spring.thymeleaf.cache=false
# 模板的編碼方式
spring.thymeleaf.encoding=UTF-8
# 模式
spring.thymeleaf.mode=HTML5
# 模板頁面存放路徑
spring.thymeleat.prefix=classpath:/resources/templates/
# 模板頁面名稱后綴
spring.thymeleaf.suffix=.html
LoginController
package com.cn.springbootthymeleaf02.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Calendar;
/**
* 本文作者：谷哥的小弟
* 博客地址：http://blog.csdn.net/lfdfhl
*/
@Controller
@RequestMapping("/LoginController")
public class LoginController {
@RequestMapping("/toLogin")
public String toLogin(Model model){
int year = Calendar.getInstance().get(Calendar.YEAR);
model.addAttribute("year", year);
//跳轉(zhuǎn)至login.html
return "login";
}
}
login.html
在templates中創(chuàng)建login.html頁面。
<!DOCTYPE html>
<!-- 引入Thymeleaf命名空間 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<title>用戶登錄界面</title>
<!-- 通過th:href引入css -->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<!-- 用戶登錄表單 -->
<form class="form-signin">
<!-- 通過th:src引入圖片 -->
<img class="mb-4" th:src="@{/img/icon.jpg}" width="72" height="72"/>
<h1 class="h3 mb-3 font-weight-normal">請登錄</h1>
<input type="text" class="form-control" th:placeholder="用戶"/>
<input type="password" class="form-control" th:placeholder="密碼"/>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"/> 記住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登錄</button>
<!-- 通過th:text顯示后臺傳遞的數(shù)據(jù)year -->
<p class="mt-5 mb-3 text-muted">? <span th:text="${year}">2030</span>-<span th:text="${year}+1">2040</span></p>
</form>
</body>
</html>
SpringBootThymeleaf02Application
測試
測試地址：http://localhost:8080/LoginController/toLogin
文章來源：http://www.zghlxwxcb.cn/news/detail-495735.html
從此結(jié)果可以看出：html頁面顯示了后臺傳遞至前端的數(shù)據(jù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-495735.html
到了這里，關(guān)于SpringBoot整合模板引擎Thymeleaf（4）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
