thymeleaf使用

2023-10-17 08:21:25 浏览数 (3)

Thymeleaf 百叶香

Thymeleaf是一个流行的模板引擎,该模板采用Java语言开发,Java生态下的模板引擎有Thymeleaf、Freemaker、Velocity、Beetl(国产)等。

代码语言:javascript复制
Thymeleaf对网络环境要求不存在严格的要求,既能用于web环境下,也能用于非web环境下,在非web环境下
,它能直接显示模板上的静态数据,在web环境下,它能想jsp一样从后台接受数据,并替换模板上的静态数据,
是基于html的,以html标签为载体,Thymeleaf要寄托在HTML标签下实现。
springboot集成了Thymeleaf模板技术,官方推荐使用Thymeleaf来代替jsp,作为前端页面的数据展示。

在templates下的页面只能通过跳转实现(相当于WEB-INF) 静态资源放在static里面

代码语言:javascript复制
resources
    resources
    public
    static
    templates
优先级:resources>static(默认)>public

约束 xmlns是命名空间,后面的地址是约束文件

代码语言:javascript复制
xmlns:th="http://www.thymeleaf.org"

1、配置信息

代码语言:javascript复制
# 设置thymeleaf模板引擎的缓存,设置为关闭,默认是true开启的
spring.thymeleaf.cache=false
# 设置thymeleaf的模板引擎的前、后缀、(可选项)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
# 关闭默认图标
spring.mvc.favicon.enabled=false

首页定制

代码语言:javascript复制
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

2、基本语法

代码语言:javascript复制
表达式
    标准表达式:${}--------th:text="${user.id}"  推荐使用
    选择表达式:*{}-------${user}---*{id}  tj:object="${user}" 不推荐使用
    路径表达式:@{}-------th:href="@{/test}"
                 --------th:href="@{/test(id=${id},age=${age})}"
                 --------th:href="@{'/test3/' ${id} '/' ${age}}"
                 ------<img th:src="@{/img/zhien.jpeg}">
                 ------ <a th:href="@{/emp/} ${emp.getId()}">编辑</a>
                
常见属性----从后台取值的时候,使用一下,可用可不用
	th:action	定义后台控制器的路径
	th:method
	th:href
	th:src
	th:id
	th:name
	th:value
	th:attr
	th:text
	th:object
	th:onclick
	th:style
	
	th:each  可遍历:集合、map、数组
		th:each="user,userStat:${userList}"
            iterStat称作状态变量,(默认对象名加Stat)属性有:
        index:当前迭代对象的index(从0开始计算)
        count: 当前迭代对象的index(从1开始计算)
        size:被迭代对象的大小
        current:当前迭代变量
        even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
        first:布尔值,当前循环是否是第一个
        last:布尔值,当前循环是否是最后一个
        
	条件判断  th:if  th:unless  th:switch  th:case
	
	th:inline  内联表达式 [[${参数名}]] 通常写在body上,th:inline有三个取值text、javascript、none
       这个写法不推荐
        <div th:inline="text">
        数据:[[${data}]]
        </div>
        
		<script type="text/javascript" th:inline="javascript">
 		   function showData() {
     		   alert([[${data}]]);
 		   }
		</script>
		
字面量
	文本字面量
	数字字面量
	boolean字面量
	null字面量
	
字符串拼接	例如:分页  一对||内写入要拼接的字符串
<span th:text="'共' ${totalRows} '条,' ${totalPage} '页,' '当前页是:' ${currentPage}">共120条12页,当前第1页,首页,上一页,下一页,尾页</span>

<p>使用更优雅的方式替拼接字符串</p>
<span th:text="|共${totalRows}条,${totalPage}页,当前第${currentPage }页,首页,上一页,下一页,尾页|">

运算符
	三元运算符:  ? :  表达式?正确结果:错误结果
    算数运算:      - * /%
    关系比较:    > < >= <= (gr lt ge le)
    相等判断:    ==  !=  (eq  ne)

3、内置对象

代码语言:javascript复制
功能表达式对象
内置功能对象前都需要加#号,一般以s结尾
#dates   java.util.Date对象的实用方法
		<span th:text="${#dates.format(curDate,'yyyy-MM-dd HH:mm:ss')}"></span>
#calendars  和dates类似,是 java.util.Calendar对象
#numbers    格式化数字对象的方法
#strings    字符串实用方法,contains,startsWith,prepending/appending
#objects    对objects操作的实用方法
#bools		对布尔求值的实用方法
#arrays		数组的实用方法
#lists		list的实用方法   <span th:text="${#lists.size(datas)}"></span>
#sets		set的实用方法
#map		map的实用方法
#aggregates  对数组或集合创建聚合的实用方法

内置对象
基本表达式对象
     @RequestMapping("/expression")
     public String expression(Model model, HttpServletRequest request,Integer 		id){
            model.addAttribute("username","李四");
            System.out.println(id);
            request.getSession().setAttribute("address","Session Data");
            return "index";
        }
	从session获取值:<br/>
    <span th:text="${#session.getAttribute('address')}"></span><br/>
    <span th:text="${#httpSession.getAttribute('address')}"></span><br/>
    <span th:text="${session.address}"></span><br/>
     //获取请求路径
    var requestURL = [[${#httpServletRequest.requestURL}]];  		//http://localhost:8080/expression
    var queryString =[[${#httpServletRequest.queryString}]];  //id=16

    //完整的请求路径  http://localhost:8080/expression?id=15
    var requestAddress = requestURL  "?" queryString;

4、模板

代码语言:javascript复制
抽取公共样式
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar"> ... </nav>
插入样式,提高代码复用性th:insert="~{页面::名字}"
<div th:insert="~{dashboard::sidebar}"> </div>
用的多的是这个:th:replace="~{commons/commons::topbar}" 替换

可以将公共的模板抽取出来
定义模板
th:fragment="head(titile)"
使用模板
th:replace="${titile}"

示例:
<head th:fragment="head(titile)">   <!-- 定义片段模板  后面的页面进行引入-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title th:replace="${titile}">博客详情</title>  <!-- 后面引用的时候进行替换  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>

引用模板
<head th:replace="_fragments :: head(~{::title})">
<title>首页</title>

自定义代码块
<th:block th:replace="script">
    <script  th:src="@{/lib/prism/prism.js}"></script>
    <script  th:src="@{/lib/tocbot/tocbot.js}"></script>
    <script  th:src="@{/lib/qrcode/qrcode.js}"></script>
</th:block>

<!-- 引用script -->  主要是/*/  /*/ 在thymeleaf模板里面是有效的
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--/*/</th:block>/*/-->

5、application配置文件

可能会用到的

代码语言:javascript复制
# 服务名称
spring.application.name=eleTest

# 设置内嵌端口号
server.port=8082
server.servlet.context-path=/

# 设置thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# 设置请求响应字符编码
server.servlet.encoding.enabled=true
server.servlet.encoding.force=true
server.servlet.encoding.charset=UTF-8

# 连接池
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource

# 数据库连接信息
spring.datasource.username=root 
spring.datasource.password=123456
spring.datasource.url=jdbc:mysql://localhost:3306/test14?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver 

# 整合Myabtis 别名 
mybatis.type-aliases-package=com.myfdc.pojo

# 前后端分离,打包后的前端文件的位置(打包后的dist文件夹下的)
spring.web.resources.static-locations=classpath:/static/

# 映射配置文件 
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

# 控制台打印SQL
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# 展示SQL(控制台打印SQL的另一种形式)
logging.level.root=info
logging.level.com.study.dao=debug

# 设置dubbo的配置
spring.application.name=ssm-provider

# 设置当前工程为服务提供者
spring.dubbo.server=true

# 指定注册中心
spring.dubbo.regisry=zookeeper://localhost:2181

# 设置redis的配置
spring.redis.host=192.168.233.131
spring.redis.port=6379
spring.redis.password=145263

# 设置dubbo
spring.application.name=ssm-consumer
spring.dubbo.registry=zookeeper://localhost:2181

application.yml

代码语言:javascript复制
server:
  servlet:
    context-path: /
    encoding:
      charset: UTF-8
      enabled: true
      force: true
  port: 8088
spring:
  thymeleaf:
    cache: false

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/xyxy?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    username: root
    password: 123456
mybatis:
  type-aliases-package: com.myfdc.domain
  mapper-locations: classpath:mapper/*.xml
  # 开启驼峰命名
  configuration:
    map-underscore-to-camel-case: true
    # 控制台打印SQL
	log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
代码语言:javascript复制
使用mybatis需要注意的是:
启动类上加	@MapperScan("com.myfdc.dao")
dao层加		@Repository

1 人点赞