SpringBoot——模板引擎及原理

news2024/11/19 14:39:19

优质博文:IT-BLOG-CN

一、模板引擎的思想

模板是为了将显示与数据分离,模板技术多种多样,但其本质都是将模板文件和数据通过模板引擎生成最终的HTML代码。

在这里插入图片描述

二、SpringBoot模板引擎

SpringBoot推荐的模板引擎是Thymeleaf语法简单,功能强大。
【1】引入thymeleafstarter启动器。

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

<!-- 默认版本号在parent的dependents中配置,如果要替换其中的版本,设置如下 -->
<properties>
	<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
	<!-- 布局功能的支持程序 thymeleaf3主程序,适配layout2以上版本 -->
	<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

【2】查看thymeleaf的默认配置:进入ThymeleafAutoConfigurationThymeleafProperties配置文件中,如下:

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");
    private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    //只要我们吧HTML页面放在classpath:/templates/下就能够自动渲染
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
}

【3】测试:创建controller如下:同时在templates文件夹下创建suceess.html与返回值相同。启动后输入:http://localhost:8080/success 便可跳转到success.html页面。

@Controller
public class success {
    @RequestMapping("/success")
    public String success(){
        return "success";
    }
}

三、thymeleaf 使用

【1】导入thymeleaf的名称空间:就会具有thymeleaf的语法提示,不导入也可以,只是么有语法提示了。

<html lang="en"  xmlns:th="http://www.thymeleaf.org">

【2】写一个简单的demo上个手,如下controller层,给返回的页面添加数据,如下:

@Controller
public class success {
    @RequestMapping("/success")
    public String success(Map<String,String> map){
        map.put("hello","你好");
        return "success";
    }
}

【3】打开我们的静态页面success.html,根据thymeleaf模板引擎语法,获取hello的值,如下:

<body>
    <h1>成功</h1>
    <div th:text="${hello}">
        这是成功页面
    </div>
</body>

【4】需要注意的是:当hello有值时,显示 hello获取到的值,如果单独只访问 success.html时,只显示前端页面的内容 “这是成功页面” 能够非常友好的结合前后端进行编程。


四、thymeleaf语法规则

【1】th:text:改变当前元素里面的文本内容。语法文档:https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.pdf

th:任意html属性:可以替换原生的HTML的元素。

【2】表达式语法:行里表达式:[[xx]] —>相当于 th:text , [(xx)]—>相当于th:utext

● Simple expressions:(表达式语法)
    ○ Variable Expressions: ${...}:获取变量值,底层时OGNL;
        1)、获取对象的属性、调用方法;
        2)、使用内置的基本对象;#location...
        3)、内置的一些工具对象;#strings...
    ○ Selection Variable Expressions: *{...}:选择表达式,与${}的功能一样,有一个不同,可以参考文档。
    ○ Message Expressions: #{...}:用来获取国际化信息
    ○ Link URL Expressions: @{...}:用来定义URL连接
    ○ Fragment Expressions: ~{...}:片段引入表达式
● Literals(字面量)
    ○ Text literals: 'one text' , 'Another one!' ,…
    ○ Number literals: 0 , 34 , 3.0 , 12.3 ,…
    ○ Boolean literals: true , false
    ○ Null literal: null
    ○ Literal tokens: one , sometext , main ,…
● Text operations:(文本操作)
    ○ String concatenation: +
    ○ Literal substitutions: |The name is ${name}|
● Arithmetic operations:(数学运算)
    ○ Binary operators: + , - , * , / , %
    ○ Minus sign (unary operator): -
● Boolean operations:(布尔运算)
    ○ Binary operators: and , or
    ○ Boolean negation (unary operator): ! , not
● Comparisons and equality:(比较运算)
    ○ Comparators: > , < , >= , <= ( gt , lt , ge , le )
    ○ Equality operators: == , != ( eq , ne )
● Conditional operators:(条件运算)
    ○ If-then: (if) ? (then)
    ○ If-then-else: (if) ? (then) : (else)
    ○ Default: (value) ?: (defaultvalue)
    ○ Special tokens:
    ○ Page 17 of 106
● No-Operation: _:(特殊操作)

【3】公共页面抽取

<!--抽取公共片段-->
<div th:fragment="copy">
     2011 The Good Thymes Virtual Grocery
</div>

<!--引入公共片段: ~{templatename::fragmentname} 片段 ~{templatename::selector} 选择器-->
<div th:insert="~{footer :: copy}"></div>
<-- or -->
<div th:insert="footer :: copy"></div>

三种引入功能片段的区别:
▶ th:insert:将公共片段整个插入到声明引入的元素中。
▶ th:replace:将声明引入的元素替换成公共片段。
▶ th:include:将被引入的片段的内容包含进这个标签中。

<footer th:fragment="copy">
    2011 The Good Thymes Virtual Gro
</footer>

<!--引入方式-->
<div th:insert="footer :: copy"></di>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

<!--效果-->
<div>
    <footer>
        2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
    2011 The Good Thymes Virtual Grocery
</footer>

<div>
    2011 The Good Thymes Virtual Grocery
</div>

【4】日期格式化:通过内置对象dates进行格式化。

<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}"></td>

【5】通过 PUT请求提交数据:
 ● SpringMVC 中配置 HiddenHttpMethodFilter,(SpringBoot自动配置好)。
 ● 页面创建一个 post表单。
 ● 创建一个 input项,name=“_method”,值就是我们指定的方式。

private String methodParam = "_method";
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
	HttpServletRequest requestToUse = request;
	if("POST".equals(request.getMethod()) && request.getAttribute("javax.servlet.error.exception") == null) {
		//重点:获取_method传过来的值
		String paramValue = request.getParameter(this.methodParam);
		if(StringUtils.hasLength(paramValue)) {
			String method = paramValue.toUpperCase(Locale.ENGLISH);
			if(ALLOWED_METHODS.contains(method)) {
				requestToUse = new HiddenHttpMethodFilter.HttpMethodRequestWrapper(request, method);
			}
		}
	}

	filterChain.doFilter((ServletRequest)requestToUse, response);
}

页面实际操作:

<input type="hidden" name="_method" value="put" th:if="${emp}!=null">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1263907.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

堆排序(详解)

在上篇文章中&#xff0c;我们说利用堆的插入和删除也可以排序数据&#xff0c;但排序的只是堆里面的数组&#xff1b;同时每次排序数据都要单独写一个堆的实现&#xff0c;很不方便&#xff0c;这次就来着重讲讲如何使用堆排序。 1.建堆 给了你数据&#xff0c;要利用堆对数据…

MIGO收货报替代“ZF002“, 步骤““ 中存在语法错误消息号 GB032错误

MIGO收货报替代"ZF002", 步骤"" 中存在语法错误消息号 GB032错误。替代"ZF002", 步骤"" 中存在语法错误消息号 GB032诊断 在 ABAP 代码生成过程中&#xff0c;在替代ZF002中发现了语法错误。 系统响应 未为该布尔陈述生成 ABAP 代码&…

nodejs之express学习(1)

安装 npm i express使用 // 导入 const express require(express) // 创建应用 const app express() // 创建路由 app.get(/home,(req,res)>{res.end("hello express") }) app.listen(3000,()>{console.log("服务已启动~") })路由的介绍 什么是…

P9231 [蓝桥杯 2023 省 A] 平方差(拆分问题)

分析&#xff1a;x(yz)*(y-z); yz 与 y-z 同奇偶性&#xff08;x要么为奇数&#xff0c;要么为偶数&#xff09; 奇数&#xff1a;1 与 其本身 乘积 偶数&#xff1a;2 与 x/2 乘积(为4的倍数) #include<bit…

【shell】多行重定向与免交互expect与ssh、scp的结合使用

目录 一、多行重定向 举例1&#xff1a;使用read命令接收用户的输入值会有交互过程 举例2&#xff1a;设置变量的值 举例3&#xff1a;创建用户密码 举例4&#xff1a;使用多行重定向写入文件中&#xff08;以repo文件举例&#xff09; 举例5&#xff1a;变量设定 二、免…

C/C++ 发送与接收HTTP/S请求

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的协议。它是一种无状态的、应用层的协议&#xff0c;用于在计算机之间传输超文本文档&#xff0c;通常在 Web 浏览器和 Web 服务器之间进行数据通信。HTTP 是由互联网工程任务组&#xff08;IETF…

java编程强化练习(一)

1. 素数因子数字和 【问题描述】从键盘终端输入一个正的整数&#xff0c;求其所有素数因子各位上数字之和。例如&#xff1a;442*2*11&#xff0c;素数因子为2&#xff0c;2&#xff0c;11&#xff0c;和为22114 【输入形式】一个正的整数 【输出形式】整数的所有素数因子各位…

用通俗的方式讲解Transformer:从Word2Vec、Seq2Seq逐步理解到GPT、BERT

直到今天早上&#xff0c;刷到CSDN一篇讲BERT的文章&#xff0c;号称一文读懂&#xff0c;我读下来之后&#xff0c;假定我是初学者&#xff0c;读不懂。 关于BERT的笔记&#xff0c;其实一两年前就想写了&#xff0c;迟迟没动笔的原因是国内外已经有很多不错的资料&#xff0…

C语言基础程序设计题

1.个人所得税计算 应纳税款的计算公式如下&#xff1a;收入<&#xff1d;1000元部分税率为0&#xff05;&#xff0c;2000元>&#xff1d;收入>1000元的部分税率为5&#xff05;&#xff0c;3000元>&#xff1d;收入>2000元的部分税率为10&#xff05;&#xf…

【C语言加油站】函数栈帧的创建与销毁 #保姆级讲解

函数栈帧的创建与销毁 导言一、计算机硬件1.冯•诺依曼机基本思想2.冯•诺依曼机的特点&#xff1a;3.存储器3.1 分类3.2 内存的工作方式3.3 内存的组成 4.寄存器4.1 基本含义4.2 寄存器的功能4.3 工作原理4.4 分类4.4.1 通用寄存器组AX(AH、AL)&#xff1a;累加器BX(BH、BL)&a…

Opencv-C++笔记 (19) : 分水岭图像分割

文章目录 一、基于距离变换与分水岭的图像分割1、图像分割2、距离和变换与分水岭距离变换常见算法有两种分水岭变换常见的算法 3、距离变换API函数接口4、watershed 分水岭函数API接口步骤 5、代码 一、基于距离变换与分水岭的图像分割 1、图像分割 图像分割(Image Segmentat…

大坝安全监测的内容及作用

大坝安全监测是指对大坝水雨情沉降、倾斜、渗压以及大坝形状特征有效地进行监测&#xff0c;及时发现潜在的安全隐患和异常情况&#xff0c;以便大坝管理人员能够做出科学决策&#xff0c;以确保大坝安全稳定运行。 大坝安全监测的主要内容 1.表面位移监测&#xff1a;监测大坝…

Python基础:推导式(Comprehensions)详解

1. 推导式概念 Python推导式&#xff08;comprehensions&#xff09;是一种简洁而强大的语法&#xff0c;用于从已存在的数据&#xff08;列表、元组、集合、字典等&#xff09;中创建新的数据结构。推导式包括&#xff1a; 列表推导式元组推导式字典推导式集合推导式 2. 列表…

鸿蒙原生应用/元服务开发-AGC分发如何生成密钥和和证书请求文件

HarmonyOS通过数字证书&#xff08;.cer文件&#xff09;和Profile文件&#xff08;.p7b文件&#xff09;等签名信息来保证应用的完整性&#xff0c;应用如需上架到华为应用市场必须通过签名校验。因此&#xff0c;开发者需要使用发布证书和Profile文件对应用进行签名后才能发布…

Gee教程3.实现前缀树路由

需要完成的目标 使用 Trie 树实现动态路由(dynamic route)解析。支持两种模式:name和*filepath&#xff0c;(开头带有:或者*) 这里前缀树的实现修复了Go语言动手写Web框架 - Gee第三天 前缀树路由Router | 极客兔兔​​​​​​ 中路由冲突的bug。 Trie树简介 之前&#xff0…

20世纪的葡萄酒有哪些创新?

葡萄酒是用酵母发酵的&#xff0c;直到20世纪中叶&#xff0c;这一过程都依赖于自然产生的酵母。这些发酵的结果往往不一致&#xff0c;而且由于发酵时间长&#xff0c;容易腐败。 酿酒业最重要的进步之一是在20世纪50、60年代引进了地中海的纯发酵菌种酿酒酵母&#xff0c;俗称…

全面介绍SSO(单点登录)

全面介绍SSO&#xff08;单点登录&#xff09; SSO英文全称Single SignOn&#xff0c;单点登录。SSO是在多个应用系统中&#xff0c;用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。它是目前比…

C++类与对象(7)—友元、内部类、匿名对象、拷贝对象时编译器优化

目录 一、友元 1、定义 2、友元函数 3、友元类 二、内部类 1、定义 2、特性&#xff1a; 三、匿名对象 四、拷贝对象时的一些编译器优化 1、传值&传引用返回优化对比 2、匿名对象作为函数返回对象 3、接收返回值方式对比 总结&#xff1a; 一、友元 1、定义…

0005Java程序设计-ssm基于微信小程序的校园求职系统

文章目录 摘 要目 录系统设计开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据…