springboot学习日志(二)-- thymeleaf学习

本次学习如何使用thymeleaf以及相关语法
1、在上一章写的那样 引入jar包到maven工程

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

2、同理配置yml

### springboot配置
spring:
  ##模板设置
  thymeleaf:
    prefix: classpath:/templates
    suffix: .html
    mode: LEGACYHTML5
    encoding: utf-8
    servlet:
      content-type: text/html
    cache: false

3、在需要引用thymeleaf添加引用头

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

下面记录一下thymeleaf的模板语法 和jsp稍微有些出入 不过好在不需要修改文件类型 直接将html进行头部引用就可以使用
(1)标签引入路径或地址

<a th:href="@{http://www.baidu.com}"></a> //绝对路径进行访问
<script th:src="@{/}"></script>//相对路径进行访问
<link rel="stylesheet" th:href="@{css/base.css}">//默认访问static下的文件夹
<img th:src="@{}"/>//图片路径引用

(2)使用变量动态替换

<div th:text="hello ${roms}">hello world</div>

使用spring想也面传值roms:xxx即可在页面汇总替换${roms}进行内容修改
需要注意的是 th:text 会替换掉标签内的所有内容
(3)条件适用

//使用if进行判断是否为真
<div th:text="hello world" th:if=${flag != true}>Login</div>
//使用unless  表示除外
<div th:text="hello world" th:unless=${flag != true}>Login</div>

(4)循环的使用

  <table>
    <tr th:each="list: ${list}">
      <td th:text="${list.id}">1122334</td>
      <td th:text="${plistod.name}">tony</td>
    </tr>
  </table>

(5)工具方法使用

//日期格式化
${#dates.format(date, ‘yyyy/MMM/dd HH:mm‘)}
//当前时间
${#dates.createNow()}
//当前日期
${#dates.createToday()}

还有其他的工具类#Calendars,#numbers,#strings,#objects,#bools,#arrays,#lists,#sets,#maps,#aggregates,#messages,#ids
详细的api文档可以查看官网
http://www.thymeleaf.org/doc/...

原文地址:https://www.cnblogs.com/homehtml/p/11972502.html

时间: 2024-10-21 15:59:04

springboot学习日志(二)-- thymeleaf学习的相关文章

Spring Boot学习记录(二)--thymeleaf模板

Spring Boot学习记录(二)–thymeleaf模板 标签(空格分隔): spring-boot 自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习. 1.引入依赖 maven中直接引入 <dependency> <groupId>org.springframework.boot</gr

mybatis学习日志二

一.动态sql语句 if语句 if+where语句 if+set语句 choose(when,otherwise)语句 trim语句 sql片段 foreach语句 总结 bean部分的User类代码: public class User { private int id; private String name; private int age;//如果在if判断中用null,则把int改成Integer private String sex; private List<Integer> i

MySQL学习日志(二)

# DML 事务 隔离级别 存储引擎对比 ##DML     insert into 第一种: insert into tb_name [(col1,col2,....)]{values|value}(val1,val2,...)[,(val21,val22,....),....] 第二种: insert into tb_name set col_name=val1,col2=val2,.... 第三种(将一个表中的数据插入到另外一张表中): insert into tb_name select

SpringMVC学习日志二

一.回顾 1.MVC流程 2.SpringMVC流程 二.接收的参数为日期Date时 1.在相应的controller页追加 @InitBinder public void initBinder(ServletRequestDataBinder binder){ //只要网页中传来的数据格式为yyyy-MM-dd 就会转化为Date类型 binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateForma

Spring学习日志二

一.回顾 1.1 restful风格  GET(查找) POST(添加)  [PUT(更新) DELETE(删除) 一定要使用springmvc中的过滤器,来把post提交转化为PUT,DELETE, _method:表示真正的提交方式] 1.2 Springmvc如何进行异常处理. 1.局部  2.全局 @ControllerAdvice 1.3 Spring框架.它就是一个容器,管理类对象的生命周期. 1.4 IOC(DI) 控制反转 Class A中用到了Class B的对象b,一般情况下

[jQuery学习系列二 ]2-JQuery学习二-数组操作

前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有以下几种形式:each(迭代), map(转换), grep(筛选), 合并等. 1,迭代(each)jQuery.each( object, callback ) 返回值:Object说明:通用例遍方法,可用于例遍对象和数组.注意: 传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一

WebGPU学习(二): 学习“绘制一个三角形”示例

大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 上一篇文章:WebGPU学习(一): 开篇 准备Sample代码 克隆webgl-samplers Github Repo到本地. (备注:当前的version为0.0.2) 实际的sample代码在src/examples/文件夹中,是typescript代码写的: 学习helloTriangle.ts 打开helloTriangle.ts文件,我们来看下init函数的内容. 首先是shader

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

winform学习日志(二十四)----------datetime和timer的使用(小小幻灯片)

一:展示图片 每秒换一次图片,一共六十张图片,00-59 二:代码 a,设计代码 namespace timePicture { partial class Form1 { /// <summary> /// 必需的设计器变量. /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 清理所有正在使用的资源. /// </summary