版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

概述

在之前的教程中，我们介绍了Thymeleaf的基础知识。在此，以案例形式详细介绍Thymeleaf的基本使用。

项目结构

要点概述：

  • 1、在static下创建css文件夹用于存放css文件
  • 2、在static下创建img文件夹用于存放图片文件

依赖文件

请在pom.xml文件中添加如下依赖。

<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/> </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文件添加以下配置。

# 缓存设置。开发中设置为false，线上时设置为truespring.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);//跳转至login.htmlreturn "login";}}

login.html

在templates中创建login.html页面。

<!DOCTYPE html><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><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"><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><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

从此结果可以看出：html页面显示了后台传递至前端的数据。