springboot整合Thymeleaf模板引擎

引入依赖

需要引入Spring Boot的Thymeleaf启动器依赖。

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

说明:使用springboot的thymeleaf模板时默认会对HTML进行严格的检查,导致当你的标签没有闭合时就会通不过。nekohtml这个依赖可以解决这一问题。引入该依赖后一般会自动引入web依赖,不需要再单独引入web依赖。

简单配置

spring.thymeleaf.cache=false

spring.thymeleaf.mode = LEGACYHTML5

说明:第一行配置是清除缓存,实现热部署。也就是修改了html后不用重启,刷新页面就能看到效果。不过这儿特别强调一下,修改完html后一定要ctrl+f9重新build一下。再回到浏览器刷新,就能看到效果了。第二行配置是回避HTML进行严格的检查的配置,当然你需要提前引入nekohtml依赖。

使用模板

1、模板文件头部使用 <html xmlns:th="http://www.thymeleaf.org">定义。

2、html标签上使用 th:开头标识作为前缀。

3、通过 @{}引入web静态文件。

<link rel="stylesheet" th:href="@{/css/jquery.min.css}"/>

访问springmvc中的model数据: ${user.name},访问更多不同对象的数据请点击参考官方定义。

Springboot的static和templates

SpringBoot里面没有我们之前常规web开发的WebContent(WebApp),它只有src目录。在src/main/resources下面有两个文件夹,static和templates。springboot默认static中放静态页面,而templates中放动态页面。

静态页面:

在static放一个hello.html,然后直接输入http://localhost:8080/hello.html便能成功访问。(好像可以新建一个public文件夹,也可以放静态文件)。也可以通过controller跳转,输入http://localhost:8080/Hi就可以成功访问:

@Controller
public class HelloController {
    @RequestMapping("/Hi")
    public String sayHello() {
        return "hello.html";
    }
}

动态页面:

动态页面需要先请求服务器,访问后台应用程序,然后再转向到页面,比如访问JSP。spring boot建议不要使用JSP,默认使用Thymeleaf来做动态页面。在pom中要添加Thymeleaf组件jar包。

我们先在tempates文件夹中也新建一个hello.html但内容不同,然后先试一下直接访问该页面。

1、通过直接访问页面:输入http://localhost:8080/hello.html,结果显示访问的是静态目录里面的那个hello.html

2、通过controller跳转:。

原因:

静态页面的return默认是跳转到/static/index.html,当在pom.xml中引入了thymeleaf组件,动态跳转会覆盖默认的静态跳转,默认就会跳转到/templates/index.html,注意看两者return代码也有区别,动态没有html后缀。也就是我们要这样改controller:

@Controller
public class HelloController {
    @RequestMapping("/Hi")
    public String sayHello() {
        return "hello";
    }
}

如果用了thymeleaf模板还想返回static中的页面,那么就要用重定向,如果在使用动态页面时还想跳转到/static/index.html,可以使用重定向:return "redirect:index.html"。

    @RequestMapping(value = "/mrfile", method = RequestMethod.GET)
    public String mrfile(HttpServletRequest request, @RequestParam(value = "usrname") String usrname)
    {
        try
        {
            request.getServletContext().getRealPath(REAL_PATH);
            return "redirect:Mrfile.html";
        }
        catch (Exception ex)
        {
            LOGGER.info(ex.toString());
            return null;
        }
    }

注意:

1、拦截的url最后不要跟视图重合,否则会抛出Circular view path异常,然后就报错说会有个循环视图的错误,反正以后注意就是。

@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String sayHello() {
        return "hello.html";
    }
}

2、每次改完都要重新停止应用,再重新启动很烦~但springboot有个叫热部署的东西,就是说在项目中修改代码可以不用重新停止应用再重新启动,可以自动重启,这里我们用的是devtools

thymeleaf中的相对路径

一.问题

最近在使用springboot框架,众所周知,该框架可以直接以jar的方式运行,在该方式运行的情况下,默认contextPath是/。在前台页面引用的时候,我是这样写相对路径的:

后台RequestMapping为/test/page1,前台访问路径就是"/test/page1",自动就会跳转到http://localhost:8080/test/page1路径,这样自然是没有什么问题的,但是当工程以war包的形式部署到tomcat下时,在访问时需要加上项目名,比如project1,这时的contextPath就是是/project1,那么在这种情况下,以前的相对路径写法"/test1/page1"就完全不能用了,因为它会自动跳转到http://localhost:8080/test/page1地址,很显然,这里缺少了/project1,正确路径是http://localhost:8080/project1/test/page1

那么怎么办呢?

二.解决过程

毫无疑问,这种情况是十分严重的,如果等项目完成了才发现路径都是错的,那无疑要花费巨大的精力去改,上网上查了一些资料,总结如下:

相对路径:

html页面中相对路径有两种:

第一种:/test/page1

这是相对于服务器根路径而言的,以之前的例子为例,使用结果就是直接从8080以后开始替换,如http://localhost:8080/test/page1

第二种:test/page2

这是相对于当前路径而言的,比如当前路径为http://localhost:8080/test/page1,那么替换以后就是。

http://localhost:8080/test/test/page,在这种情况下也有对应的语法,../表示上级目录,./表示当前目录,如test/page2就相当于./test/page2,如果写成../test/page2,那么替换后的路径就是http://localhost:8080/test/page了。

绝对路径:

绝对路径就是直接http://localhost:8080/test/page1,十分简单,但是也相当于写死了。

总结:

方案1,直接使用绝对路径。但是这样十分不好维护,写起来也麻烦,直接pass。

方案2,   使用相对路径第一种写法,部署的时候设置contextPath为/,这样自然没有问题,可以将springboot以jar方式部署,默认就是这种情况,如果一定要用tomcat部署,那么只能把war包解压出来的工程文件全部转移到tomcat的ROOT文件夹下,将ROOT文件夹内原有文件清空或转移,这样也可以实现根目录访问。这种方案一定程度上可以解决问题,但是对部署的方式限制太大了,只部署一个工程还可以,多了就没有办法了,因此也不是长久之计。

那么还有没有别的办法呢?

有!基本思路是利用thymeleaf动态生成html页面的特点,在相对路径前动态添加一个项目名,不就解决了?其实用jsp可以轻松做到,但是由于我的页面不是jsp页面,所以也不能使用这种方法。于是又进行了一番尝试,参考了很多资料,终于找到了解决方案!

方案3:直接利用thymeleaf的th:src或者th:href属性改变标签的链接路径,如

@{/js/{path}/myJs.js(path=${contextPath})}

对于thymeleaf来说,有四种相对URL:

页面相对 test/page1.html  同普通html相对路径第二种,替换末尾的路径

上下文相对 /test/page1.html 自动添加上下文路径在相对路径之前!实际生成路径/project1/test/page1.html

服务器相对 ~/test/page1.html 同普通html相对路径第一种,适合访问同一服务器不同上下文路径时使用,如同一个tomcat上的project2

协议相对  //code.jquery.com/jquery-2.0.3.min.js 跨域访问使用

另外附上带有变量的thymeleaf语法

@{/js/{path}/myJs.js(path=${contextPath},param=${contextPath})}

()内完成对变量或者参数的赋值,比如contextPath变量值为/app,那么最终生成的URL为http://localhost:11111/app/js//app/myJs.js?param=/app,

如果语句为

@{/js/{path}/myJs.js(path=${contextPath})}

那么会生成

http://localhost:11111/app/js//app/myJs.js

需要注意的是,thymeleaf将会以完成参数赋值后的结果来判断是哪种相对类型。

三.解决方案

<script src="../static/js/myJs.js" th:src="@{/js/myJs.js}"></script>

利用thymeleaf提供的相对上下文动态路径,轻松解决问题,静态路径可以用来描述当前页面文件与其他页面文件在当前工程的位置关系,这样即使在未联网的情况直接打开html文件,也可以找到所引用的js文件和css文件等其他文件,充分发挥thymeleaf的威力!

原文地址:https://www.cnblogs.com/xyhero/p/152adf80fe355dd9cb209f22242cf69c.html

时间: 2024-11-07 12:41:19

springboot整合Thymeleaf模板引擎的相关文章

SpringBoot:2.SpringBoot整合Thymeleaf模板引擎渲染web视图

在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: Thymeleaf FreeMarker Velocity Groovy Mustache Spring Boot 推荐使用这些模板引擎来代替 Jsp,Thymeleaf 只是其中一种,下面我们来简单聊聊Thymeleaf及实践一下如何整合Spring Boot和Thymeleaf. 1.Thyme

在springboot整合thymeleaf模板引擎中@Controller和@RestController不同注解的跳转页面方法

注:本文纯属学习记录,以备后续查阅! 1.通过@RestController注解实现页面跳转: 对应H5静态页面 2.使用@Controller注解实现页面跳转 对应H5静态页面: 之所以会出现@Controller和@RestController两种注解实现跳转页面不同的方式主要的原因是: 通过@RestController源码知道@RestController是@Controller和@ResponseBody的组合注解 如果需要跳转到指定 的页面,需要使用@Controller注解和视图解

SpringBoot使用thymeleaf模板引擎

(1).添加pom依赖 1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3 <artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency> * SpringBoot1.x 默认的thymeleaf版本低,如果要自定义版本,需要在pom properties 覆写SpringBoot默认

SpringBoot 配置 Thymeleaf模板引擎

Thymeleaf模板引擎 什么是模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 学习视频: http://www.itlaoqi.com/chapter/1688.html 源码地址: QQ群 814077650 , 群共享中自助下载 老齐的官网: itlaoqi.com (更多干货就在其中) Thymeleaf的特点 Thymeleaf优点 主流唯一的前后端通用

springboot整合thymleaf模板引擎

thymeleaf作为springboot官方推荐使用的模板引擎,简单易上手,功能强大,thymeleaf的功能和jsp有许多相似之处,两者都属于服务器端渲染技术,但thymeleaf比jsp的功能更强大. 1. thymeleaf入门 1.1 引入坐标 <!--springBoot整合thymeleaf--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>

「快学springboot」SpringBoot整合freeMark模板引擎

前言 虽然现在流行前后端分离开发和部署,但是有时候还是需要用到服务端渲染页面的.比如:需要考虑到SEO优化等问题的时候,FreeMark其实还是很有作用的.本人的博客本来是用React开发的,但是后来发现搜索引擎难以收集由JS渲染的页面,所以前段时间,是用jQuery+FreeMark重写了我的博客前端页面.感兴趣的朋友,可以点击下面的查看更多的链接跳转至本人的博客. 在springboot中,不推荐使用JSP(其实任何项目都不推荐使用JSP),而是推荐使用模板引擎,如FreeMark.其实使用

SpringBoot使用thymeleaf模板引擎引起的模板视图解析错误

1 Whitelabel Error Page 2 This application has no explicit mapping for /error, so you are seeing this as a fallback. 3 4 Thu Sep 19 16:54:45 CST 2019 5 There was an unexpected error (type=Internal Server Error, status=500). 6 An error happened during

关于spring boot整合thymeleaf模板引擎

1.目录结构: 2.前端页面引用: 这里想说的是引用的默认出发点是在/static/下了  3.后端:  使用了mybatis分页插件 @RequestMapping("list") public String getList(Model model,HttpSession session, @RequestParam(value = "pageNum",defaultValue = "1") int pageNum, @RequestParam

SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们在使用springBoot开发框架以后我们会发现一个致命的问题,就是SpringBoot对Jsp的支持可以说是惨不忍睹,官方推荐我们进行使用的是Thymeleaf模板引擎进行.其实我这里也没搞清楚模板引擎原理是什么,以后有机会再深入了解,我们只需要学会怎么用就行,目前而言.当然模板引擎有很多,比如f