1.4 SpringBoot整合Thymeleaf

说明:
Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。
相较与其他的模板引擎,它有如下三个极吸引人的特点:
1. Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板 + 数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
2. Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式效果,避免每天套模板、改 JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3. Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

此篇是基于以下文章继续创作。
1.1 搭建Springboot脚手架
1.2 搭建SpringBoot脚手架注解及标签说明
1.3 SpringBoot 整合热部署

目录

模块配置项备注
添加依赖pom.xml额外添加nekohtml依赖,解决thymealeaf标签闭合问题
配置文件application.properties配置文件不允许有多余空格
测试控制类TestController.java可以跳转到templates文件夹下的html页面并且传递参数
HTML页面login.html接收控制类传递的数据加以处理

项目结构

下图为Eclipse中的项目结构截图
项目结构截图
说明:
在此之前需要构建resources文件夹
新建static和templates文件夹
静态资源存放在static文件夹下
html文件要存放在templates文件夹下

注:
新建templates和static文件夹时,要直接在resources文件夹上new Folder,否则之后controller层跳转页面会出错

1. pom.xml

注: 在dependencies标签内加入如下代码

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

<!--nekohtml 解决thymealeaf标签闭合问题-->
	<dependency>
    	<groupId>net.sourceforge.nekohtml</groupId>
    	<artifactId>nekohtml</artifactId>
    	<version>1.9.14</version>
	</dependency>

2. application.properties

注: 配置文件代码不允许有空格,否则会报错

# ====================================================================
# ===================Thymeleaf 相关设置============================
# ====================================================================

# 是否开启模板缓存,默认true,开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
    
# 指定模板的编码,默认为: UTF-8
spring.thymeleaf.encoding=UTF-8

#返回模板类型
spring.thymeleaf.content-type=text/html

# 指定模板的前缀(文件位置),默认为:classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
  
# 指定模板的后缀,默认为:.html
spring.thymeleaf.suffix=.html

# 指定模板的模式, 默认为:HTML5 (如果使用了nekohtml依赖 设置为LEGACYHTML5,去除thymeleaf的html严格校验)
spring.thymeleaf.mode=LEGACYHTML5

#默认值为/**,与下面locations成对使用
#spring.mvc.static-path-pattern=/**
#自定义Spring boot加载前端静态资源路径
spring.resources.static-locations=classpath:/templates/,classpath:/static/

3. MainController.java

3.1 MainController1.java

注: 添加控制类测试跳转页面

package org.it.Demo.controller;

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

@Controller
public class MainController {
	
	@RequestMapping("/index")
	public String index() {
		return "index";//返回到index.html页面
	}
	
}

3.2 MainController2.java

注: 添加控制类测试返回数据

package org.it.Demo.Controller;

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

@Controller
public class TestController {
	
	@RequestMapping("/")
	public String index(ModelMap map) {
		
		//单个数据
        map.put("hello", "这是显示欢迎信息");
		return "3";
	}	
    
}

4. 3.html

注:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--使用Thymeleaf标签时,需在头部引入<html lang="en" xmlns:th="http://www.thymeleaf.org">,
否则会报错-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功!</h1>
    <!--th:text 将div里面的文本内容设置为 -->
    <div th:text="${hello}">aa</div>
</body>
</html>

详细使用Thymeleaf参考资料:

1. Springboot之Thymeleaf 入门(环境搭建)
2. CSDN-史上最详 Thymeleaf 使用教程
3. Thymeleaf 教程:使用Thymeleaf[官方]

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ibun.song

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值