Spring Boot使用模板freemarker【从零开始学Spring Boot(转)

 

 

 

  

 

 

       最近有好久没有更新博客了，感谢小伙伴的默默支持，不知道是谁又打赏了我一个小红包，谢谢。

       今天我们讲讲怎么在Spring Boot中使用模板引擎freemarker，先看看今天的大纲：

写道

(1) freemarker介绍；

(2) 新建spring-boot-freemarker工程；

(3) 在pom.xml引入相关依赖；

(4) 编写启动类；

(5) 编写模板文件hello.ftl;

(6) 编写访问类HelloController;

(7) 测试；

(8) freemarker配置；

(9) freemarker常用语法；

(10) freemarker layout 布局

 

 

(1) freemarker介绍；

       FreeMarker是一款模板引擎： 即一种基于模板和要改变的数据，   并用来生成输出文本（HTML网页、电子邮件、配置文件、源代码等）的通用工具。       它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

(2) 新建spring-boot-freeMarker工程；

       我们新建一个maven工程，取名为：spring-boot-freemarker

(3) 在pom.xml引入相关依赖；

       这里使用freeMarker需要引入相关依赖包：spring-boot-starter-freemarker，

 

2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
3.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
4.   <modelVersion>4.0.0</modelVersion>  
5.    
6.   <groupId>com.kfit</groupId>  
7.   <artifactId>spring-boot-velocity</artifactId>  
8.   <version>0.0.1-SNAPSHOT</version>  
9.   <packaging>jar</packaging>  
10.    
11.   <name>spring-boot-velocity</name>  
12.   <url>http://maven.apache.org</url>  
13.    
14.   <properties>  
15.     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
16.      <!-- jdk版本号，angel在这里使用1.8，大家修改为大家本地配置的jdk版本号即可 -->  
17.     <java.version>1.8</java.version>  
18.   </properties>  
19.    
20.     <!--  
21.        spring boot 父节点依赖,  
22.        引入这个之后相关的引入就不需要添加version配置，  
23.        spring boot会自动选择最合适的版本进行添加。  
24.      -->  
25.     <parent>  
26.        <groupId>org.springframework.boot</groupId>  
27.        <artifactId>spring-boot-starter-parent</artifactId>  
28.        <version>1.4.1.RELEASE</version><!-- 1.4.1.RELEASE , 1.3.3.RELEASE-->  
29.     </parent>  
30.    
31.   <dependencies>  
32.     <dependency>  
33.       <groupId>junit</groupId>  
34.       <artifactId>junit</artifactId>  
35.       <scope>test</scope>  
36.     </dependency>  
37.      
38.         <!-- spring boot web支持：mvc,aop... -->  
39.     <dependency>  
40.        <groupId>org.springframework.boot</groupId>  
41.        <artifactId>spring-boot-starter-web</artifactId>  
42.     </dependency>  
43.      
44.     <!-- 引入freeMarker的依赖包. -->  
45.     <dependency>     
46.         <groupId>org.springframework.boot</groupId>    
47.         <artifactId>spring-boot-starter-freemarker</artifactId>  
48.     </dependency>  
49.      
50.   </dependencies>  
51. </project>  

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
<groupId>com.kfit</groupId>

<artifactId>spring-boot-velocity</artifactId>

<version>0.0.1-SNAPSHOT</version>

<packaging>jar</packaging>
<name>spring-boot-velocity</name>

<url>http://maven.apache.org</url>
<properties>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<!-- jdk版本号，angel在这里使用1.8，大家修改为大家本地配置的jdk版本号即可 -->

<java.version>1.8</java.version>

</properties>

<!--
   spring boot 父节点依赖,
   引入这个之后相关的引入就不需要添加version配置，
   spring boot会自动选择最合适的版本进行添加。
 -->
<parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
   <version>1.4.1.RELEASE</version><!-- 1.4.1.RELEASE , 1.3.3.RELEASE-->
</parent>

<dependencies>

<dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<scope>test</scope>

</dependency>

    <!-- spring boot web支持：mvc,aop... -->
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- 引入freeMarker的依赖包. -->
<dependency>   
    <groupId>org.springframework.boot</groupId>  
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

</dependencies>

</project>

 

 

(4) 编写启动类；

       启动类没有什么特别之处，不过多介绍，请看代码：

 

2. package com.kfit;  
3.    
4. import org.springframework.boot.SpringApplication;  
5. import org.springframework.boot.autoconfigure.SpringBootApplication;  
6.    
7. /** 
8.  * 
9.  * @author Angel --守护天使 
10.  * @version v.0.1 
11.  * @date 2016年10月4日 
12.  */  
13. @SpringBootApplication  
14. public class App {  
15.     publicstaticvoid main(String[] args) {  
16.        SpringApplication.run(App.class, args);  
17.     }  
18. }  

package com.kfit;
import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;
/**

*

• @author Angel --守护天使
• @version v.0.1
• @date 2016年10月4日
  */
  @SpringBootApplication
  public class App {
  publicstaticvoid main(String[] args) {
  SpringApplication.run(App.class, args);
  }
  }

 

 

(5) 编写模板文件hello.ftl;

       编写一个hello.ftl文件，此文件的路径在src/main/resources/templates下，其中hello.ftl文件的内容如下：

 

2. <html>   
3. <body>   
4.     welcome ${name}  to freemarker!  
5. </body>   
6. </html>  

<html> 
<body> 
    welcome ${name}  to freemarker!
</body> 
</html>

 

 

(6) 编写访问类HelloController;

       有了模板文件之后，我们需要有个Controller控制类，能够访问到hello.ftl文件，这里也很简单，具体看如下代码：

 

2. package com.kfit.demo.web;  
3.    
4. import java.util.Map;  
5.    
6. import org.springframework.stereotype.Controller;  
7. import org.springframework.web.bind.annotation.RequestMapping;  
8.    
9. /** 
10.  * 测试velocity; 
11.  * @author Angel --守护天使 
12.  * @version v.0.1 
13.  * @date 2016年10月4日 
14.  */  
15. @Controller  
16. public class HelloController {  
17.      
18.     @RequestMapping("/hello")  
19.     public String hello(Map<String,Object> map){  
20.        map.put("name", "[Angel -- 守护天使]");  
21.        return "hello";  
22.     }  
23.      
24. }  

package com.kfit.demo.web;
import java.util.Map;
import org.springframework.stereotype.Controller;

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

• 测试velocity;
• @author Angel --守护天使
• @version v.0.1
• @date 2016年10月4日
  */
  @Controller
  public class HelloController {
  @RequestMapping("/hello")
  public String hello(Map<String,Object> map){
  map.put("name", "[Angel -- 守护天使]");
  return "hello";
  }

}

 

 

(7) 测试；

       好了，到这里，我们就可以启动我们的程序进行测试了，访问地址：

 如果你在浏览器中看到如下信息：

welcome [Angel -- 守护天使] to freemarker!

那么说明你的demo ok 了。

 

(8) freemarker配置；

       在spring boot的application.properties属性文件中为freemarker提供了一些常用的配置,如下：

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

###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-separated list

#spring.freemarker.view-names= # whitelist of view names that can be resolved

 

(9) freemarker常用语法；

       freemarker的语法并不是本节的重点，这里还是简单的介绍下几个常用的if else,list；

       首先我们改造下HelloController的hello方法

 

2. @RequestMapping("/hello")  
3.    public String hello(Map<String,Object> map){  
4.        map.put("name", "[Angel -- 守护天使]");  
5.        map.put("gender",1);//gender:性别，1：男；0：女；  
6.         
7.        List<Map<String,Object>> friends =new ArrayList<Map<String,Object>>();  
8.        Map<String,Object> friend = new HashMap<String,Object>();  
9.        friend.put("name", "张三");  
10.        friend.put("age", 20);  
11.        friends.add(friend);  
12.        friend = new HashMap<String,Object>();  
13.        friend.put("name", "李四");  
14.        friend.put("age", 22);  
15.        friends.add(friend);  
16.        map.put("friends", friends);  
17.        return "hello";  
18.     }  

@RequestMapping("/hello")
   public String hello(Map<String,Object> map){
       map.put("name", "[Angel -- 守护天使]");
       map.put("gender",1);//gender:性别，1：男；0：女；
   List<Map<String,Object>> friends =new ArrayList<Map<String,Object>>();
   Map<String,Object> friend = new HashMap<String,Object>();
   friend.put("name", "张三");
   friend.put("age", 20);
   friends.add(friend);
   friend = new HashMap<String,Object>();
   friend.put("name", "李四");
   friend.put("age", 22);
   friends.add(friend);
   map.put("friends", friends);
   return "hello";
}</pre>


       这里我们返回了gender和friends的列表；
      接下来我们看看怎么在freemarker进行展示呢?



Html代码  

1. 

2. <!DOCTYPE html>  
3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
4.       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
5.     <head>  
6.         <title>Hello World!</title>  
7.     </head>  
8.     <body>  
9.        <p>  
10.            welcome ${name}  to freemarker!  
11.        </p>        
12.         
13.         
14.        <p>性别：  
15.            <#if gender==0>  
16.               女  
17.            <#elseif gender==1>  
18.               男  
19.            <#else>  
20.               保密     
21.            </#if>  
22.         </p>  
23.         
24.         
25.        <h4>我的好友：</h4>  
26.        <#list friends as item>  
27.            姓名：${item.name} , 年龄${item.age}  
28.            <br>  
29.        </#list>  
30.         
31.     </body>  
32. </html>  
33. 



<!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>
       <p>
           welcome ${name}  to freemarker!
       </p>      
   <p>性别：
       <#if gender==0>
          女
       <#elseif gender==1>
          男
       <#else>
          保密   
       </#if>
    </p>


   <h4>我的好友：</h4>
   <#list friends as item>
       姓名：${item.name} , 年龄${item.age}
       <br>
   </#list>

</body>

</html>



(10) freemarker layout
       freemarker layout主要处理具有相同内容的页面，比如每个网站的header和footer页面。
       freemarker 的布局主要常见的两种方式是#import(“文件路径”)和#include(“文件路径”)，其中import和include的区别在于，include常用于公共部分的页面，如果要使用<#assign username=“张三”>涉及到内部函数以及变量声明之类的，使用import进行导入，如果在import中的页面含有页面当前将不会进行渲染。   我们编写一个header和footer，其中的header使用include引入，footer页面也使用include引入。（当然freemarker 还有别的布局方式，这里只是介绍一种，请自行学习研究）
       header.ftl内容：


Html代码  

1. 

2. <header>  
3.     This is a header,welcome  ${name} to my web site!  
4. </header>  
5. <hr>  
6. 



<header>
    This is a header,welcome  ${name} to my web site!
</header>
<hr>



       footer.ftl内容：


Html代码  

1. 

2. <hr>  
3. <footer>  
4.     This is a footer,welcome  ${name} to my web site!  
5. </footer>  
6. 



<hr>
<footer>
    This is a footer,welcome  ${name} to my web site!
</footer>

       修改hello.ftl：


Html代码  

1. 

2. <!DOCTYPE html>  
3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
4.       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
5.     <head>  
6.         <title>Hello World!</title>  
7.     </head>  
8.     <body>  
9.      
10.         <#include "/header.ftl" >  
11.          
12.        <p>  
13.            welcome ${name}  to freemarker!  
14.        </p>        
15.         
16.         
17.        <p>性别：  
18.            <#if gender==0>  
19.               女  
20.            <#elseif gender==1>  
21.               男  
22.            <#else>  
23.               保密     
24.            </#if>  
25.         </p>  
26.         
27.         
28.        <h4>我的好友：</h4>  
29.        <#list friends as item>  
30.            姓名：${item.name} , 年龄${item.age}  
31.            <br>  
32.        </#list>  
33.         
34.         
35.        <#include "/footer.ftl" >  
36.     </body>  
37. </html>  
38. 



<!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>
    <#include "/header.ftl" >

   <p>
       welcome ${name}  to freemarker!
   </p>      


   <p>性别：
       <#if gender==0>
          女
       <#elseif gender==1>
          男
       <#else>
          保密   
       </#if>
    </p>


   <h4>我的好友：</h4>
   <#list friends as item>
       姓名：${item.name} , 年龄${item.age}
       <br>
   </#list>


   <#include "/footer.ftl" >
</body>

</html>



       到这里就ok了，我们访问/hello页面，应该会看到如下图的效果：




103. Spring Boot Freemarker特别篇之contextPath【从零开始学Spring Boot】