SpringBoot整合模板引擎Thymeleaf(4)

这篇具有很好参考价值的文章主要介绍了SpringBoot整合模板引擎Thymeleaf(4)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


版权声明

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

概述

在之前的教程中,我们介绍了Thymeleaf的基础知识。在此,以案例形式详细介绍Thymeleaf的基本使用。
SpringBoot整合模板引擎Thymeleaf(4)

项目结构

要点概述:

  • 1、在static下创建css文件夹用于存放css文件
  • 2、在static下创建img文件夹用于存放图片文件
    SpringBoot整合模板引擎Thymeleaf(4)

依赖文件

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

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

login.html

在templates中创建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显示后台传递的数据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

SpringBoot整合模板引擎Thymeleaf(4)

测试

测试地址:http://localhost:8080/LoginController/toLogin

SpringBoot整合模板引擎Thymeleaf(4)

从此结果可以看出:html页面显示了后台传递至前端的数据。文章来源地址https://www.toymoban.com/news/detail-495735.html

到了这里,关于SpringBoot整合模板引擎Thymeleaf(4)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【SpringBoot学习笔记】04. Thymeleaf模板引擎

     所有的html元素都可以被thymeleaf替换接管  th:元素名 templates下的只能通过Controller来跳转,templates前后端分离,需要模板引擎thymeleaf支持    模板引擎的作用就是我们来写一个页面模板,比如有些值呢,是动态的,我们写一些表达式。而这些值,从哪来呢,就是我们在后台封

    2024年02月13日
    浏览(36)
  • SpringBoot自带模板引擎Thymeleaf使用详解②

    目录 一、条件判断和迭代遍历 1.1 条件判断 2.2 迭代遍历 二、获取域中的数据和URL写法 2.1 获取域中的数据 2.2 URL写法 三、相关配置 语法 作用 th:if 条件判断 准备数据 model.addAttribute(\\\"sex\\\",\\\"男\\\"); 使用实例 div     span th:if=\\\"${sex}==\\\'女\\\'\\\"这是女生/span     span th:if=\\\"${sex}==\\\'男\\\'\\\"这是男

    2024年02月08日
    浏览(38)
  • SpringBoot自带模板引擎Thymeleaf使用详解①

    目录 前言 一、SpringBoot静态资源相关目录 二、变量输出 2.1 在templates目录下创建视图index.html 2.2 创建对应的Controller 2.3 在视图展示model中的值 三、操作字符串和时间 3.1 操作字符串 3.2 操作时间         Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎,类似JSP。它可以轻易的

    2024年02月08日
    浏览(41)
  • 15 springboot项目——thymeleaf语法与关闭模板引擎

            在html文件中,有些是需要使用本地的css样式,使用thymeleaf语法加载:         首先对head标签上面的html标签进行更改:         其次,导入thymeleaf依赖:         接着,使用thymeleaf语法:         碰到href或者src后边与静态资源有关的的本地路径要进行修改,把要

    2024年02月14日
    浏览(38)
  • 【Spring Boot】Thymeleaf模板引擎 — Thymeleaf入门

    主要介绍什么是Thymeleaf以及Spring Boot如何集成使用Thymeleaf模板,最后介绍Spring Boot支持的Thymeleaf的一些常用的配置参数。 Thymeleaf是一款非常优秀的服务器端页面模板引擎,适用于Web和独立环境,具有丰富的标签语言和函数,能够处理HTML、XML、JavaScript甚至文本。 Thymeleaf相较于

    2024年02月05日
    浏览(42)
  • thymeleaf模板引擎

    ThymeleafProperties 配置类 1.默认编码 2.前缀 3.后缀 相当于视图解析器    这是学SpringBoot的必经之路,非常重要!!!(除非你是学前端的)   只改了前端代码点一下这个就可以刷新    传值过来了  th:text=\\\"${msg}\\\"爆红,但是可以显示,File-Settings-Editor-Inspection  取消“Expression

    2024年02月14日
    浏览(41)
  • 【Spring Boot】Thymeleaf模板引擎 — 表达式的语法

    模板的主要作用是将后台返回的数据渲染到HTML中。那么Thymeleaf是如何解析后台数据的呢?接下来从变量、方法、条件判断、循环、运算(逻辑运算、布尔运算、比较运算、条件运算)方面学习Thymeleaf表达式支持的语法。 (1)文本赋值 赋值就是通过${}标签将后台返回的数据替

    2024年02月14日
    浏览(37)
  • SpringBoot整合thymeleaf

    JavaEE领域有几种常用的模板引擎: Jsp, Thymeleaf, Freemarker, Velocity等.对于前端页面渲染效率来说 JSP 其实还是最快的, Velocity次之.Thymeleaf虽然渲染效率不是很快,但语法比较轻巧. Thymeleaf 支持html5标准, Thymeleaf页面无需部署到servlet开发到服务器上,以 .html 后缀结尾,可直接通过浏览器就

    2024年02月10日
    浏览(36)
  • 40、Thymeleaf的自动配置和基本语法、springboot 整合 Thymeleaf

    要使用这个 Thymeleaf ,需要在页面引入这个命名空间。 pom文件也需要加入thymeleaf的依赖 html 是根元素,把这个th命名空间引入进去,表示这整个html页面都能使用这个thymeleaf语法,都可以使用这个 th 前缀。 代码演示: ${objList} 就是要遍历的集合 obj 就是集合中的每个元素 iter

    2024年02月10日
    浏览(43)
  • SpringBoot 整合Thymeleaf教程及使用

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面 。 目录 一、整合

    2024年02月06日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包