文档章节

(18)使用模板(thymeleaf-freemarker)【从零开始学Spring Boot】

圆梦巨人
 圆梦巨人
发布于 2017/02/07 10:55
字数 1661
阅读 71
收藏 0

 

整体步骤:

(1)            在pom.xml中引入thymeleaf;

(2)            如何关闭thymeleaf缓存

(3)            编写模板文件.html

     

Spring Boot默认就是使用thymeleaf模板引擎的,所以只需要在pom.xml加入依赖即可:

<dependency>

         <groupId>org.springframework.boot</groupId>

         <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

 

Thymeleaf缓存在开发过程中,肯定是不行的,那么就要在开发的时候把缓存关闭,只需要在application.properties进行配置即可:

########################################################

###THYMELEAF (ThymeleafAutoConfiguration)

########################################################

#spring.thymeleaf.prefix=classpath:/templates/

#spring.thymeleaf.suffix=.html

#spring.thymeleaf.mode=HTML5

#spring.thymeleaf.encoding=UTF-8

# ;charset=<encoding> is added

#spring.thymeleaf.content-type=text/html

# set to false for hot refresh

spring.thymeleaf.cache=false

 

编写模板文件src/main/resouces/templates/helloHtml.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"

      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

    <head>

        <title>Hello World!</title>

    </head>

    <body>

        <h1 th:inline="text">Hello.v.2</h1>

        <p th:text="${hello}"></p>

    </body>

</html>

编写访问路径(com.kfit.test.web.TemplateController):

package com.kfit.test.web;

 

import java.util.Map;

 

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

 

/**

 * 模板测试.

 * @author Administrator

 *

 */

@Controller

publicclass TemplateController {

   

    /**

     * 返回html模板.

     */

    @RequestMapping("/helloHtml")

    public String helloHtml(Map<String,Object> map){

       map.put("hello","from TemplateController.helloHtml");

       return"/helloHtml";

    }

   

}

 

启动应用,输入地址:http://127.0.0.1:8080/helloHtml 会输出:

Hello.v.2

from TemplateController.helloHtml

 

 

18.2 使用freemarker

使用freemarker也很简单,

在pom.xml加入freemarker的依赖:

<dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-freemarker</artifactId>

</dependency>

剩下的编码部分都是一样的,说下application.properties文件:

########################################################

###FREEMARKER (FreeMarkerAutoConfiguration)

########################################################

spring.freemarker.allow-request-override=false

spring.freemarker.cache=true

spring.freemarker.check-template-location=true

spring.freemarker.charset=UTF-8

spring.freemarker.content-type=text/html

spring.freemarker.expose-request-attributes=false

spring.freemarker.expose-session-attributes=false

spring.freemarker.expose-spring-macro-helpers=false

#spring.freemarker.prefix=

#spring.freemarker.request-context-attribute=

#spring.freemarker.settings.*=

#spring.freemarker.suffix=.ftl

#spring.freemarker.template-loader-path=classpath:/templates/#comma-separatedlist

#spring.freemarker.view-names= #whitelistofviewnamesthatcanberesolved

 

 com.kfit.test.web.TemplateController:

/**

     * 返回html模板.

     */

    @RequestMapping("/helloFtl")

    public String helloFtl(Map<String,Object> map){

       map.put("hello","from TemplateController.helloFtl");

       return"/helloFtl";

    }

 

src/main/resouces/templates/helloFtl.ftl

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"

      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

    <head>

        <title>Hello World!</title>

    </head>

    <body>

        <h1>Hello.v.2</h1>

        <p>${hello}</p>

    </body>

</html>

 

访问地址:http://127.0.0.1:8080/helloFtl

Hello.v.2

from TemplateController.helloFtl

 

thymeleaf和freemarker是可以共存的。

 

 

 

 

转:http://jisonami.iteye.com/blog/2301387,http://412887952-qq-com.iteye.com/blog/2292402

整体步骤:
(1)            在pom.xml中引入thymeleaf;
(2)            如何关闭thymeleaf缓存
(3)            编写模板文件.html

spring Boot默认就是使用thymeleaf模板引擎的,所以只需要在pom.xml加入依赖即可:

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <dependency>  
  2.          <groupId>org.springframework.boot</groupId>  
  3.   
  4.          <artifactId>spring-boot-starter-thymeleaf</artifactId>  
  5. </dependency>  

 

Thymeleaf缓存在开发过程中,肯定是不行的,那么就要在开发的时候把缓存关闭,只需要在application.properties进行配置即可:

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. ########################################################  
  2. ###THYMELEAF (ThymeleafAutoConfiguration)  
  3. ########################################################  
  4. #spring.thymeleaf.prefix=classpath:/templates/  
  5. #spring.thymeleaf.suffix=.html  
  6. #spring.thymeleaf.mode=HTML5  
  7. #spring.thymeleaf.encoding=UTF-8  
  8. # ;charset=<encoding> is added  
  9. #spring.thymeleaf.content-type=text/html  
  10. # set to false for hot refresh  
  11.   
  12. spring.thymeleaf.cache=false  


编写模板文件src/main/resouces/templates/helloHtml.html

 

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
  3.       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
  4.     <head>  
  5.         <title>Hello World!</title>  
  6.     </head>  
  7.     <body>  
  8.         <h1 th:inline="text">Hello.v.2</h1>  
  9.         <p th:text="${hello}"></p>  
  10.     </body>  
  11. </html>  

编写访问路径(com.kfit.test.web.TemplateController):

 

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. package com.kfit.test.web;  
  2.   
  3. import java.util.Map;  
  4. import org.springframework.stereotype.Controller;  
  5. import org.springframework.web.bind.annotation.RequestMapping;  
  6.   
  7.    
  8.   
  9. /**  
  10.   
  11.  * 模板测试.  
  12.   
  13.  * @author Administrator  
  14.   
  15.  *  
  16.   
  17.  */  
  18.   
  19. @Controller  
  20.   
  21. publicclass TemplateController {  
  22.     /**  
  23.   
  24.      * 返回html模板.  
  25.   
  26.      */  
  27.   
  28.     @RequestMapping("/helloHtml")  
  29.     public String helloHtml(Map<String,Object> map){  
  30.   
  31.        map.put("hello","from TemplateController.helloHtml");  
  32.        return"/helloHtml";  
  33.     }  
  34. }  


启动应用,输入地址:http://127.0.0.1:8080/helloHtml 会输出:

 

 

Hello.v.2

from TemplateController.helloHtml

使用freemarker
使用freemarker也很简单,
在pom.xml加入freemarker的依赖:

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <dependency>  
  2.         <groupId>org.springframework.boot</groupId>  
  3.         <artifactId>spring-boot-starter-freemarker</artifactId>  
  4. </dependency>  

剩下的编码部分都是一样的,说下application.properties文件:

 

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. ########################################################  
  2. ###FREEMARKER (FreeMarkerAutoConfiguration)  
  3. ########################################################  
  4. spring.freemarker.allow-request-override=false  
  5. spring.freemarker.cache=true  
  6. spring.freemarker.check-template-location=true  
  7. spring.freemarker.charset=UTF-8  
  8. spring.freemarker.content-type=text/html  
  9. spring.freemarker.expose-request-attributes=false  
  10. spring.freemarker.expose-session-attributes=false  
  11. spring.freemarker.expose-spring-macro-helpers=false  
  12. #spring.freemarker.prefix=  
  13. #spring.freemarker.request-context-attribute=  
  14. #spring.freemarker.settings.*=  
  15. #spring.freemarker.suffix=.ftl  
  16. #spring.freemarker.template-loader-path=classpath:/templates/#comma-separatedlist  
  17. #spring.freemarker.view-names= #whitelistofviewnamesthatcanberesolved  

com.kfit.test.web.TemplateController:

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. /**  
  2.   * 返回html模板.  
  3.   */  
  4.   
  5.     @RequestMapping("/helloFtl")  
  6.     public String helloFtl(Map<String,Object> map){  
  7.        map.put("hello","from TemplateController.helloFtl");  
  8.        return"/helloFtl";  
  9.     }  

 

 

访问地址:http://127.0.0.1:8080/helloFtl

Hello.v.2

from TemplateController.helloFtl

 

thymeleaf和freemarker是可以共存的。

------------------------------------------------------------------------------------------------------------------------------------------------

本文记录一下几点: 
一、资源文件的约定目录结构 
二、Maven配置 
三、开发时修改thymeleaf模板自动重新加载配置 
四、thymeleaf常用基础知识点

 

一、资源文件的约定目录结构 

Maven的资源文件目录:/src/Java/resources 
spring-boot项目静态文件目录:/src/java/resources/static 
spring-boot项目模板文件目录:/src/java/resources/templates 
spring-boot静态首页的支持,即index.html放在以下目录结构会直接映射到应用的根目录下:

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. classpath:/META-INF/resources/index.html    
  2. classpath:/resources/index.html    
  3. classpath:/static/index.html    
  4. calsspath:/public/index.html    

 

 

由于使用thymeleaf的HTML5模板,所以我将index.html模板文件直接放到了/src/java/resources/templates目录下。然而这个目录并不是首页文件的默认目录,所以我们需要手动将应用根路径映射到/src/java/resources/templates/index.html下。这个在spring-mvc的Controller下映射一下就可以了。

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. @RequestMapping("/")    
  2.     public String index(){    
  3.         return "index";    
  4.   }   

在spring-boot下,默认约定了Controller试图跳转中thymeleaf模板文件的的前缀prefix是”classpath:/templates/”,后缀suffix是”.html” 
这个在application.properties配置文件中是可以修改的。 
如下配置可以修改试图跳转的前缀和后缀

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. spring.thymeleaf.prefix: /templates/    
  2. spring.thymeleaf.suffix: .html    


更过有关thymeleaf中的默认这是可以查看org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties这个类的属性 

 

二、Maven配置 
在pom.xml中加入如下依赖 

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <dependency>    
  2.             <groupId>org.springframework.boot</groupId>    
  3.             <artifactId>spring-boot-starter-thymeleaf</artifactId>    
  4. </dependency>  


原来关于spring-boot-starter-web等的依赖就可以去掉了,因为spring-boot-starter-thymeleaf是包含这些依赖的。而关于jsp的依赖也可以去掉了,因为我们已经完全抛弃jsp了。 


三、开发时修改thymeleaf模板自动重新加载配置 
Spring-boot使用thymeleaf时默认是有缓存的,即你把一个页面代码改了不会刷新页面的效果,你必须重新运行spring-boot的main()方法才能看到页面更改的效果。我们可以把thymeleaf的缓存关掉,用于支持页面修改后重新发布到spring-boot内嵌的tomcat中去。在application.properties配置文件中加入以下配置。

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. # Allow Thymeleaf templates to be reloaded at dev time    
  2. spring.thymeleaf.cache: false    
  3. server.tomcat.access_log_enabled: true    
  4. server.tomcat.basedir: target/tomcat   


四、thymeleaf常用基础知识点 


1、在html页面中引入thymeleaf命名空间,即<html xmlns:th=http://www.thymeleaf.org></html>,此时在html模板文件中动态的属性使用th:命名空间修饰 


2、引用静态资源文件,比如CSS和JS文件,语法格式为“@{}”,如@{/js/blog/blog.js}会引入/static目录下的/js/blog/blog.js文件 


3、访问spring-mvc中model的属性,语法格式为“${}”,如${user.id}可以获取model里的user对象的id属性 


4、循环,在html的标签中,加入th:each=“value:${list}”形式的属性,如<span th:each=”user:${users}”></span>可以迭代users的数据 


5、判断,在html标签中,加入th:if=”表达式”可以根据条件显示html元素 
<span th:if="${not #lists.isEmpty(blog.publishTime)}"> 
<span id="publishtime" th:text="${#dates.format(blog.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></span> 
</span> 
以上代码表示若blog.publishTime时间不为空,则显示时间 


6、时间的格式化, 
${#dates.format(blog.publishTime,'yyyy-MM-dd HH:mm:ss')} 
表示将时间格式化为”yyyy-MM-dd HH:mm:ss”格式化写法与Java格式化Date的写法是一致的。 


7、字符串拼接,有两种形式 
比如拼接这样一个URL:/blog/delete/{blogId} 
第一种:th:href="'/blog/delete/' + ${blog.id }" 
第二种:th:href="${'/blog/delete/' + blog.id }" 

© 著作权归作者所有

圆梦巨人
粉丝 13
博文 176
码字总数 148989
作品 0
西城
程序员
私信 提问
SpringBoot | 第十六章:web应用开发

前言 前面讲了这么多章节,都没有涉及到前端web和后端交互的部分。因为作者所在公司是采用方式进行项目开发了。所以都是后端提供接口,前端根据或者服务自行调用的。后台也有读者说为何没有关...

oKong
2018/08/07
685
0
SpringBoot笔记(五)模板引擎thymeleaf和freemarker

SpringBoot本来不应该关注这块,但是既然都学了,就看看吧 SpringBoot属于前后端分离的微服务框架,默认的模板引擎是thymeleaf,虽然也能支持JSP,但是比较麻烦,另外freemarker也是SpringB...

世外大帝
2018/04/25
0
0
Spring Boot和thymeleaf , freemarker , jsp三个前端模块的运用

spring boot和三个前端模块的运用 一 .Thymeleaf 在idea上创建spring boot 工程,勾选Thymeleaf前端模块,它会自动导入Thymeleaf的依赖 创建了spring boot工程后,勾选web和要用的前端模块 ...

咸鱼-李y
05/28
33
0
springboot系列十四 web模板 freemarker thymeleaf

Freemarker https://freemarker.apache.org/ http://freemarker.foofun.cn/ springboot中freemarker的默认配置 示例 依赖 简单配置 页面模板 在resource目录下新建目录 static,然后新建个文...

yimingkeji
2018/12/28
55
2
SpringBoot集成Thymeleaf

上一篇给大家介绍了springboot整合freemarker,这一片来继续为大家介绍一种模板thymeleaf。 首先在项目中增添thymeleaf依赖spring-boot-starter-thymeleaf 同时为了解决html严格校验报错的问...

dalaoyang
2018/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部