在SSM环境下使用Thymeleaf一些要点

Renexton

已于 2022-11-07 18:59:58 修改

阅读量2.4k

点赞数 2

分类专栏： SSM Web前端文章标签： javascript 前端后端

于 2020-05-09 04:59:42 首次发布

本文链接：https://blog.csdn.net/Renexton/article/details/106010488

版权

Web前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

SSM

1 篇文章 0 订阅

订阅专栏

SSM下配置Thymeleaf

第一步：在HTML文件头部引用Thymeleaf模板

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

第二步：pom.xml中添加maven依赖

<!-- thymeleaf -->
<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring5</artifactId>
  <version>3.0.11.RELEASE</version>
</dependency>

Thymeleaf处理SpringMVC请求及资源路径问题

如果工程运行起来后，CSS样式未加载，在检查元素中发现css的资源路径为http://localhost:8080/css/style.css这种格式的话，说明引用路径出现了问题，经过下面的方法处理后就会变成正确的引用路径例如http://localhost:8080/你的工程名/css/style.css

<!-- 第一种方式（推荐）:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
<base th:href="@{/}">
<!-- 上面定义了base路径标签，SSM工程通常将css等静态资源目录放在WEB-INF下,那么这里的css路径就可以直接写css路径 -->
<link href="css/style.css" rel="stylesheet">

<!--  第二种方式:如果不使用base标签,就需要在每个引用的资源设置：@{/你的文件路径},每次引用都必须带上th:src="@{/}"才能正确引用-->
<script th:src="@{/js/javascript.js}"></script>

Thymeleaf相比jsp的优势

thymeleaf作为在前后端分离中常见的角色，它的优势就在于可以在没有后端服务器支持的情况下渲染静态页面，可以观察数据展示的效果。
也就意味着可以使得前端开发人员不再需要与后端开发人员进行频繁的沟通测试步骤，从而实现了前后端解耦的工作模式，大大的提升了效率和彼此对工作的专注度，后端也不用再考虑那么多前端人员要做的事情了。
而要在SSM环境下实现静态页面查看的话，静态资源在工程目录中最好以这种方式安排。

在这里插入图片描述
这样的话就可以和上面提到的资源路径问题的解决方案相呼应了，不需要再去更改资源路径就可以实现直接以静态渲染的方法引用css等静态资源了。
因为在配置thymeleaf框架的视图解析对象时，我们要设置静态页的解析路径，如果将HTML文件放入另一个文件路径下，我们在静态访问时就要修改css等静态资源的路径，造成不必要的麻烦，所以推荐使用以上目录结构。

<!-- 配置thymeleaf框架的视图解析对象 -->
<bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/"/>
    <property name="suffix" value=".html"/>
    <property name="characterEncoding" value="UTF-8"/>
    <property name="order" value="1"/>
    <property name="templateMode" value="HTML5"/>
    <property name="cacheable" value="false"/>
</bean>

<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"/>
</bean>

<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>

此外还需注意的是，我们在服务器启动的情况下，SpringMVC的视图解析器可以完成HTML文件访问的完成链接的拼接，所以在链接到某一页面时，href属性可以不写.html后缀，但是在静态渲染时，必须要加上后缀才可以正确访问页面，所以推荐直接加上后缀，而且并不会影响到启动服务器时的链接页面的访问。

不加后缀的情况

<ul class="nav navbar-nav mr-auto">
	<li class="active"><a href="indexMain">首页</a></li>
	<li><a href="videoMain">视频课程</a></li>
	<li><a href="blogMain">博客文章</a></li>
</ul>

服务器运行情况下访问页面跳转链接
在这里插入图片描述
可以看到没有后缀名一样可以访问，但是如果不开服务器的话，静态访问肯定是访问不了的。

不经过服务器，直接静态渲染页面
在这里插入图片描述

可以看到使用了thymeleaf模板的话，就可以轻松的查看数据渲染后的静态渲染效果了，thymeleaf提供了在dom中插入的属性，格式是这样的th:xxxxxx，拿图片属性举例就很容易明白了。

<img src="upload/6da94758df3b4d7e9f75a6f339c33e8b.jpg" th:src="${videoList.vcoverurl}" alt="视频封面图片">

这里面img标签的src属性就是在没有服务器的情况下加载的，而th:src属性则是在服务器环境下接收到的后端数据，从而动态渲染，两者自动根据所处环境加载资源，不会互相干扰，这便是thymeleaf最强大的地方。

链接动态拼接方法

使用th:href，用@{}将链接内容包裹，{}里面设置一个参数名，在链接结束的末尾加上()，在里面对参数进行赋值，${}可以获取当前上下文中的对象属性，也可以通过thymeleaf内置的对象访问session等对象内容，与JSP类似，多个参数赋值用逗号隔开。

<a th:href="@{{permission}/login/{username}(username=${account.username},permission=${account.permission})}"></a>

Renexton

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
在SSM环境下使用Thymeleaf一些要点

此外还需注意的是，我们在服务器启动的情况下，SpringMVC的视图解析器可以完成HTML文件访问的完成链接的拼接，所以在链接到某一页面时，href属性可以不写.html后缀，但是在静态渲染时，必须要加上后缀才可以正确访问页面，所以推荐直接加上后缀，而且并不会影响到启动服务器时的链接页面的访问。这里面img标签的src属性就是在没有服务器的情况下加载的，而th:src属性则是在服务器环境下接收到的后端数据，从而动态渲染，两者自动根据所处环境加载资源，不会互相干扰，这便是thymeleaf最强大的地方。
复制链接

扫一扫