Springboot Thymeleaf实现HTML属性设置

使用Thymeleaf的属性来设置HTML属性。

（1）使用th:attr属性可以修改原来HTML节点的属性；

（2）th:attr属性可以同时设置多个属性；

（3）每一个HTML属性都有对应的Thymeleaf属性，如th:attr="value='值'"可换为th:value="值"

（4）HTML的type为checkbox、readonly、required、disabled的，Thymeleaf属性可写为th:checked="true/false"形式；

（5）使用th:attrappend和th:attrprepend分别在HTML属性的后面或前面加入数据；

（6）使用th:styleappend和th:classappend分别向原有style、class属性添加样式；

（7）HTML5自定义属性以“data-”作为前缀，Thymeleaf同样支持自定义属性，例如可以使用“data-th-text”代替 “th:text”,使用“data-th-each”代替“th:each”；

开发环境：IntelliJ IDEA 2019.2.2

Spring Boot版本：2.1.8

新建一个名称为demo的Spring Boot项目。

1、pom.xml

加入Thymeleaf依赖

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

2、src/main/java/com/example/demo/TestController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class TestController {
 @RequestMapping("/")
 public String test(){
  return "test";
 }
}

3、src/main/resources/templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<form th:id="form1" th:attr="method='post',action=@{/user/save}">
 <input type="text" value="值1" th:value="值2" />
 <input type="text" th:readonly="true" />
 <input type="text" th:disabled="true" />
 <input type="checkbox" th:checked="true" />
 <input type="checkbox" th:checked="false" />
 <div id="div1" th:attrappend="id='-data'" style="text-align: center;" th:styleappend="'color:#ccc'"></div>
 <div id="div2" th:attrprepend="id='data-'" class="class1" th:classappend="class2"></div>

 <input id="user" type="text" data-person-name="lc" data-age="30"/>
 <div data-th-text="hello"></div>

 <script>
  var obj = document.getElementById("user");
  //获取HTML5属性值的2种方式，用dataset方式时，如果名称带连字符则使用时需驼峰化
  var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
  alert(s);
 </script>

</form>

</body>
</html>

浏览器访问：http://localhost:8080

页面弹出：lc,30

右键查看网页源代码，生成的HTML源码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<form id="form1" method="post" action="/user/save">
 <input type="text" value="值2" />
 <input type="text" readonly="readonly" />
 <input type="text" disabled="disabled" />
 <input type="checkbox" checked="checked" />
 <input type="checkbox" />
 <div id="div1-data" style="text-align: center; color:#ccc"></div>
 <div id="data-div2" class="class1 class2"></div>

 <input id="user" type="text" data-person-name="lc" data-age="30"/>
 <div>hello</div>

 <script>
  var obj = document.getElementById("user");
  //获取HTML5属性值的2种方式，用dataset方式时，如果名称带连字符则使用时需驼峰化
  var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
  alert(s);
 </script>

</form>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SpringBoot引入Thymeleaf的实现方法

    1.Thymeleaf简介 Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用 Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建模,Thymeleaf的可扩展性也非常棒.你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑,Thymeleaf还可以作为模板引擎框架. 2.引入Thymeleaf 引入依赖 在maven(pom.xml)中直接引入: <dependency>

  • IDEA+maven+SpringBoot+JPA+Thymeleaf实现Crud及分页

    一.开发环境: 1.windows 7 企业版 2.IDEA 14 3.JDK 1.8 4.Maven 3.5.2 5.MariaDB 6.SQLYog 二.Maven设置: Maven目录下的conf目录下的settings.xml做如下内容的添加: 1.使用阿里云的仓库,比官网访问速度快很多 <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorOf> <name>Nexu

  • springboot如何使用thymeleaf模板访问html页面

    springboot如何使用thymeleaf模板访问html页面

    引言 在传统的web开发中通常使用jsp页面,首先需要在pom文件中引入springmvc相关的包,然后写springmvc的配置文件(包括访问资源的路径解析),之后还需再web.xml中配置访问路由.这无疑太麻烦了,每次开发前都需要编写大量的配置文件. springboot为此提供了高效便捷的解决方案,只需再pom.xml中添加web开发的依赖,便可进行web开发,省去了繁琐的配置步骤. 下面为web开发引入的依赖 <dependency> <groupId>org.spring

  • springboot用thymeleaf模板的paginate分页完整代码

    springboot用thymeleaf模板的paginate分页完整代码

    本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc. --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web&l

  • SpringBoot2.x 集成 Thymeleaf的详细教程

    SpringBoot2.x 集成 Thymeleaf的详细教程

    目录 一.Thymeleaf简介 二.集成Thymeleaf 三.Thymeleaf常用语法 一.Thymeleaf简介 Thymeleaf是面向Web和独立环境的现代服务器Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本. Thymeleaf旨在提供一个优雅的.高度可维护的创建模板的方式.为了实现这一目标,Thymeleaf建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板设计原型.这改善了设计的沟通,弥合了设计和开发团队之间的差距. Thymel

  • 利用VBS发送邮件 挑选速度快的肉鸡做VPN 的vbs代码第1/2页

    一．挑选速度快的肉鸡做VPN.  当自己从小菜鸟转型为老菜鸟时,就懂得考虑在玩Hacking的同时也要尽量保证不暴露  自己.万事,安全第一嘛!不然都不知道哪天玩着玩着就被警察叔叔带去喝茶了^_^ .  因此,作为老菜鸟的我们,要学会在Hacking时,多用VPN+终端等跳板措施来保护自己,尽量不让自己直接暴露所处地.  但是,由于跳板的增加,导致了数据传输的缓慢.因此我们完全有必要找网速快的机器来做VPN跳板.但如果让自己做这些重复性的操作(从众多的肉鸡中挑选网速好的),那就太愧对老菜鸟这个称

  • 浅析SpringBoot中使用thymeleaf找不到.HTML文件的原因

    thymeleaf是目前最新的模板引擎,它和springboot完美搭配,让前后端不在疏远 首先先介绍一下市面上出现过的模板引擎 1, Verlocity 距今有10多年之久,是由Apache推出的 Struts2 底层使用2,Freemarker,距今有10多年之久, 第三方小公司推出,后来得到了Apache的认可,在Struts2这个框架中, 底层使用Freemarker. SpringBoot 默认使用Freemarker是以.ftl结尾的文件. 3,Thymeleaf是以.html结尾的

  • Springboot Thymeleaf实现HTML属性设置

    使用Thymeleaf的属性来设置HTML属性. (1)使用th:attr属性可以修改原来HTML节点的属性: (2)th:attr属性可以同时设置多个属性: (3)每一个HTML属性都有对应的Thymeleaf属性,如th:attr="value='值'"可换为th:value="值" (4)HTML的type为checkbox.readonly.required.disabled的,Thymeleaf属性可写为th:checked="true/fals

  • springboot+thymeleaf找不到视图的解决方案

    springboot+thymeleaf找不到视图 情况: springboot + thymeleaf打成jar包后,报错,但在eclipse本地跑却可以: template might not exist or might not be accessible by any of the configured Template Resolvers yml配置: spring: thymeleaf: cache: false #开发时关闭缓存,不然没法看到实时页面 mode: HTML5 # 用

  • springboot+thymeleaf+druid+mybatis 多模块实现用户登录功能

    项目代码:https://github.com/bruceq/supermarket 项目结构: 依赖关系: common:公共层,无依赖 dao:数据层,依赖common service:服务层,依赖dao.common web:应用层,依赖dao.common.service 注:启动类在web层中 父依赖pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/

  • Springboot+Thymeleaf+Jpa实现登录功能(附源码)

    Springboot+Thymeleaf+Jpa实现登录功能(附源码)

    前言 最近有学习到关于Springboot+Thymeleaf+Jpa的综合运用知识,因此想写一个简单的登录界面来尝试一下,以下将展示具体流程 具体实现 首先要创建一个springboot项目 添加以下依赖项 pom.xml代码 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&

  • springboot+thymeleaf+mybatis实现甘特图的详细过程

    springboot+thymeleaf+mybatis实现甘特图的详细过程

    首先我们要明白:这个甘特图需要哪些动态数据. (1)需要:ID,tName,number,计划开始时间,开始时间,计划结束时间,结束时间,项目负责人,参与人,知情人ID,计划时长(可以计算得出的,不必在数据库中):前置任务:项目进度,该任务属于哪个任务 (2)然后利用easycode插件生成实体类,映射类,服务类,ontCroller等 (3)利用bootstrap框架做出甘特图的样式,写好JS. <!DOCTYPE html> <html xmlns:th="http://w

  • springboot+thymeleaf整合阿里云OOS对象存储图片的实现

    springboot+thymeleaf整合阿里云OOS对象存储图片的实现

    目录 1.先引入pom依赖 2.编写前端thymleeaf代码tetsfile.html 3.service层编写 4.controller层编写 今天再进行创建项目时想使用阿里云oos进行存储图片 下面进行实操 1.先引入pom依赖 <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.9.1

  • SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

    SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

    目录 实现过程 1. pom.xml 2. 后端程序示例 3. 前端程序示例 通过从数据库获取数据转为JSON数据,返回前端界面实现数据可视化. 数据可视化测试 实现过程 1. pom.xml pom.xml引入(仅为本文示例需要,其他依赖自行导入) <!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymele

  • SpringBoot配置文件中密码属性加密的实现

    SpringBoot配置文件中密码属性加密的实现

    目录 背景 集成jasypt-spring-boot到项目中 配置文件配置加密与读取 工作原理简析 使用自定义的加密算法 结语 本文主要介绍了SpringBoot配置文件中的明文密码如何加密保存,读取以及对于自定义的加密算法加密的参数如何保存和读取. 背景 为了安全的需要,一些重要的信息比如数据库密码不能明文保存在配置文件中,需要进行加密之后再保存.SpringBoot可以使用jasypt-spring-boot这个组件来为配置属性提供加密的支持. 集成jasypt-spring-boot到项目

  • iOS开发笔记--详解UILabel的相关属性设置

    在iOS编程中UILabel是一个常用的控件,下面分享一下UILabel的相关属性设置的方法. 很多学习iOS6编程都是从storyboard开始,用到UILabel时是将控件拖到storyboard中生成实现,如果想要在-(void)viewDidLoad中用代码如[_label initWithFrame:CGRectMake(X,Y,WIDTH,HEIGHT)]方法改变拖拽到storyboard的label的大小是行不通的,因为程序加载时先执行了-(void)viewDidLoad的代码,

  • Gridview利用DataFormatString属性设置数据格式的方法

    本文实例讲述了Gridview利用DataFormatString属性设置数据格式的方法.分享给大家供大家参考,具体如下: 首先把Gridview的AutoGenerateColumns属性设为False(默认是False),DataField选择相应的字段,特别需要注意的是要把需要设置的字段的HtmlEncode属性设置为False,否则所设置的格式将无法显示,然后就可以设置每个字段的 DataFormatString属性来输出不同的格式了. DataFormatString 属性语法如下:

随机推荐