百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Spring Boot - Thymeleaf

zhezhongyun 2025-01-05 00:54 68 浏览

Thymeleaf 是一个基于 Java 的库,用于创建 Web 应用程序。它为在 Web 应用程序中提供 XHTML/HTML5 提供了良好的支持。

Thymeleaf模板

Thymeleaf 将您的文件转换为格式正确的 XML 文件。它包含 6 种类型的模板,如下所示:

  • XML
  • Valid XML
  • XHTML
  • Valid XHTML
  • HTML5
  • Legacy HTML5

除Legacy HTML5 外,所有模板都引用格式正确的有效 XML 文件。Legacy HTML5 允许我们在网页中呈现 HTML5 标签,包括未关闭的标签。

Web 应用程序

您可以使用 Thymeleaf 模板在 Spring Boot 中创建 Web 应用程序。您必须按照以下步骤使用 Thymeleaf 在 Spring Boot 中创建 Web 应用程序。

使用以下代码创建一个@Controller类文件,以将请求 URI 重定向到 HTML 文件

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

@Controller
public class WebController {
   @RequestMapping(value = "/index")
   public String index() {
      return "index";
   }
}

在上面的示例中,请求 URI 为 /index,控件被重定向到 index.html 文件中。请注意,index.html 文件应放在 templates 目录下,所有 JS 和 CSS 文件都应放在 classpath 中的静态目录下。在所示示例中,我们使用 CSS 文件来更改文本的颜色。

您可以使用以下代码并在单独的文件夹 css 中创建 CSS 文件,并将该文件命名为 styles.css

h4 {
   color: red;
}

index.html文件的代码如下

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1" />
      <link href = "css/styles.css" rel = "stylesheet"/>
      <title>Spring Boot Application</title>
   </head>
   <body>
      <h4>Welcome to Thymeleaf Spring Boot web application</h4>
   </body>
</html>

项目资源管理器如下图所示:

现在,我们需要在构建配置文件中添加 Spring Boot Starter Thymeleaf 依赖项。

Maven用户可以在pom.xml文件中添加以下依赖项

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

Gradle 用户可以在 build.gradle 文件中添加以下依赖项

compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf'

Spring Boot应用程序类文件的主代码如下:

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

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

Maven代码的整个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 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint</groupId>
   <artifactId>demo</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>jar</packaging>
   <name>demo</name>
   <description>Demo project for Spring Boot</description>

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

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
      <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-test</artifactId>
         <scope>test</scope>
      </dependency>

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

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

Gradle代码的整个build.gradle:

buildscript {
   ext {
      springBootVersion = '1.5.8.RELEASE'
   }
   repositories {
      mavenCentral()
   }
   dependencies {
      classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
   }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'

group = 'com.tutorialspoint'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
   mavenCentral()
}
dependencies {
   compile('org.springframework.boot:spring-boot-starter-web')
   compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf'
   testCompile('org.springframework.boot:spring-boot-starter-test')
}

您可以创建可执行的JAR文件,并使用以下Maven或Gradle命令运行Spring Boot应用程序:

对于Maven,使用如下所示的命令

mvn clean install

在“BUILD SUCCESS”之后,您可以在目标目录下找到JAR文件。

对于Gradle,使用如下所示的命令

gradle clean build

在“BUILD SUCCESSFUL”之后,您可以在 build/libs 目录下找到 JAR 文件。

使用此处给出的命令运行JAR文件

java –jar <JARFILE> 

现在,应用程序已在 Tomcat 端口 8080 上启动,现在点击Web浏览器中的URL,您可以看到如图所示的输出 :http://localhost:8080/index

相关推荐

C/C++语言的引用与指针比较说明_c++语言中的引用类型与指针的不同之处

在C/C++编程中,引用与指针是实现数据间接访问的核心工具,二者均能优化参数传递效率、支持复杂数据操作,但在本质、语法与使用场景上存在显著差异。混淆二者易导致内存泄漏、悬空访问等严重问题。一、基础概念...

再也不点来点去了!用这几条命令,文件管理快10倍!(第003课)

大家好,今天给大家介绍如何用命令提示符(CMD)来管理你的文件!听起来可能有点高大上,但其实非常简单,而且一旦学会了,效率超高,特别适合那些喜欢快速搞定事情的朋友。那我们就从基础的操作开始,教你怎...

C/C++逆向分析实战:变量存储与安全防护全攻略

在软件开发的世界里,C/C++语言因其卓越的性能和强大的功能而备受开发者青睐。然而,随着技术的不断进步,逆向工程也逐渐成为一种常见的攻击手段。今天,我们将深入探讨C/C++中不同类型的变量在逆向分析中...

简单的python-核心篇-命名空间与作用域

命名空间是变量名到对象的映射,作用域决定了变量在哪些地方可以被访问。Python使用LEGB规则来确定变量的作用域。#全局命名空间global_var="我是全局变量"de...

Jmeter参数化:User Defined Variables-用户定义的变量

位置:如下图,Add--ConfigElement--UserDefinedVariables作用:定义你所需要的参数,比如IP使用:${IP}使用的场景:比如域名什么的,可以提出来参数化,以...

PySnooper:实时看行号 / 变量值,摆脱 print 的函数调试工具

开篇:调试也能这么爽?你是不是和我一样,天天跟print()打交道,一行行地往代码里塞调试信息?有时候加完又删,删完又忘,简直要疯掉!要是能像Bash的set-x那样,一键打开“观察模式...

组态王入门之建立变量、变量连接、弹窗设计

一、建立变量(1)打开组态王软件,左侧找到变量的菜单(2)点击菜单(3)找到变量组,再新建一个二级变量组(4)在新建的泵站分配井阀门中建立变量因是新的PLC需要先建立一个驱动找到西门子àS7-200(...

为什么老外还是喜欢在官方网站上买东西?

今天看了一下一些品牌的官方网站,从浏览到购买支付流程都是很顺畅的,而一些国外的品牌在国内的网站好多都是引导至微信小程序或是淘宝京东上面去购买。国外的品牌官网好像都很简单,比如一些卖服装的类的,基本就是...

支撑京东小程序的开发框架 「Taro」,免费学习

转载自:性能与架构公众号Taro简介现在小程序平台太多了,例如:微信小程序QQ小程序支付宝小程序百度小程序字节跳动小程序针对他们都各自开发一套的话开发成本就太高了。如果写一套代码,就能开发出适配这么...

比较工具大集合_比较各种工具在编辑使用pl/sql程序过程中的优劣

现在各大网络平台流传着大量的文件夹和文件比较工具,其中不乏滥竽充数的,软件使用不够流畅,对比功能不够强大。很多人要么找不到合适的工具,要么在寻找过程中浪费了大量的时间,下面小编就和大家分享一些个人私藏...

关于前端开发的20篇文档与指南_前端开发文档怎么编写

相信在2015年很多这个行业的人都会有这样的两种感受:真的不知所措,这个行业到底有多少东西需要去学习;渴望更多,并迫不及待的为接下来的学习寻求一些思想方向。第一个来自于我们的个人感受,而第二个则是纯粹...

成为一名合格的前端架构师,前端知识技能与项目实战教学

一、教程描述本套前端架构师教程,大小35.94G,共有672个文件。二、教程目录01.node介绍和环境配置(共6课时)02.ES6语法(共5课时)03.node基础(共29课时)04.Express...

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

前言前面两篇文章总结了Vue开发的大部分技巧和内容,最后一篇文章来对它进行一个收尾这篇文章我们来谈谈一些Vue理解和实践要求高一点的问题首先是生命周期这一块内容,随着实践越多它的意义越大,理解...

在w3cschool上学完html、css后要怎么提升

原标题:在w3cschool学完html,css,javascript,jquery以后,还是不会做前端怎么办?w3cschool是一个非盈利性的在线技术学习网站,提供按W3C标准编写的基础教程。完整...

从0到1无比流畅的React入门教程_react教程推荐

React是什么简介用于构建Web和原生交互界面的库React用组件创建用户界面通俗来讲:==是一个将数据渲染为HTML视图的开源JS库==其他信息Facebook开发,并且开源为什么使用R...