前面學習了Thymleaf和Velocity模板渲染,今天接觸第三種模板渲染技術FreeMaker!
知識點預習:
- 通過PrintWriter out = resp.getWriter();可以獲取輸出流
- 依賴爲freemarker
- 使用前需要獲取其下的配置對象Configuration cfg
- 通過cfg.setDirectoryForTemplateLoading()讀取模板文件目錄
- 通過cfg.getTemplate("test.html")加載模板目錄下指定名稱的模板
- 渲染材料封裝於Map中
- 通過template.process(material,out)將渲染數據後的頁面響應給前端
- 通過FrameMaker渲染的模板不單單侷限於html結構的文件,也可以是ftl後綴的文件
下面通過案例展示如何渲染兩種格式模板的過程!
一.案例展示
1.測試準備
項目工程(maven下的webapp骨架)
2.代碼展示
***pom.xml
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.28</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
***test.ftl
我是${name},今年${age}歲,只有一個愛好就是${hobby}!
***test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FrameMaker</title>
</head>
<body>
<#--註釋的寫法-->
<h1>${title}</h1>
<fieldset>
<span>${existPreMap.attention}</span>
<span>${existPreMap.message}</span>
</fieldset>
<fieldset>
多級變量獲取省->市->區<br>
<span>${location.province.city.area}</span>
</fieldset>
<fieldset>
if的用法<br>
<span>
<#if sex==1><div>我是男人</div>
<#else><div>我是女人</div>
</#if>
</span>
</fieldset>
<fieldset>
switch的用法<br>
<span>
<#switch sex>
<#case 0>
I am girl!
<#break>
<#case 1>
I am boy!
<#break>
<#default>
I am nothing!
</#switch>
</span>
</fieldset>
<fieldset>
set集合<br>
<span><#list cities as city>${city},</#list></span><br>
</fieldset>
<fieldset>
list集合<br>
<span><#list names as name>${name},</#list></span><br>
</fieldset>
<fieldset>
數組<br>
<span><#list stars as star>${star},</#list><br>
數組加角標<br>
<span>${stars[0]}</span>
</fieldset>
<fieldset>
數值計算<br>
<#--加減乘除運算-->
<span>1+2/3=${1+2/3}</span>
<#--取整-->
<span>1+2/3=${(1+2/3)?int}</span>
</fieldset>
<fieldset>
<#--遍歷list-->
<div>
<label>list</label>
<span>
<#list ["a","f","b"]+["aa","rr","cc"] as temp>
${temp},
</#list>
</span>
</div>
<#--加號連接兩個哈希表,如果有重複的話,那麼選擇+號右側的優先。注意<#assign只有頭,沒有結尾-->
<div>
<label>list</label>
<span>
<#assign ages={"Joe":21,"KK":33}+{"Joe":30,"BB":60}>
Joe:${ages.Joe}
BB:${ages.BB}
</span>
</div>
</fieldset>
</body>
</html>
***FTLServlet.java
package com.howie;
import freemarker.template.Configuration;
import freemarker.template.Template;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
/**
* @Author weihuanwen
* @Date 2019/8/23 13:49
* @Version 1.0
*/
@WebServlet("/fs")
public class FTLServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//獲取輸出流
PrintWriter out = resp.getWriter();
//1.獲取framemaker的配置對象
Configuration cfg=new Configuration();
cfg.setDefaultEncoding("UTF-8");
//2.獲取項目根路徑->指向classes
String path = FTLServlet.class.getResource("/").getPath();
//3.配置中添加項目模板文件夾
cfg.setDirectoryForTemplateLoading(new File(path+"template"));
//4.加載模板
Template template=cfg.getTemplate("test.ftl");
//5.封裝渲染材料
Map map=new HashMap();
map.put("name","堂吉訶德");
map.put("age","99");
map.put("hobby","躺着");
//6.渲染模板並將渲染後的頁面響應前端
template.process(map,out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
***HtmlServlet.java
package com.howie;
import freemarker.template.Configuration;
import freemarker.template.Template;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;
/**
* @Author weihuanwen
* @Date 2019/8/23 14:17
* @Version 1.0
*/
@WebServlet("/hs")
public class HtmlServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//獲取輸出流
PrintWriter out = resp.getWriter();
//1.獲取framemaker的配置對象
Configuration cfg=new Configuration();
cfg.setDefaultEncoding("UTF-8");
//2.獲取項目根路徑->指向classes
String path = FTLServlet.class.getResource("/").getPath();
//3.配置中添加項目模板文件夾
cfg.setDirectoryForTemplateLoading(new File(path+"template"));
//4.加載模板
Template template=cfg.getTemplate("test.html");
//5.封裝渲染材料
Map material=new HashMap();
material.put("title", "FreeMaker");
Map existPreMap=new HashMap();
material.put("existPreMap", existPreMap);
existPreMap.put("attention", "請注意!");
existPreMap.put("message", "有消息!");
//設置所在地(多級變量)
Map area=new HashMap();
area.put("area", "西虹");
Map city=new HashMap();
city.put("city", area);
Map province=new HashMap();
province.put("province", city);
material.put("location", province);
//設置性別
material.put("sex",1);
//設置城市集合
Set cities=new TreeSet();
cities.add("河北");
cities.add("河南");
cities.add("河東");
cities.add("河西");
cities.add("南京");
cities.add("北京");
material.put("cities", cities);
//List
ArrayList names =new ArrayList();
names.add("Jhon");
names.add("Lily");
names.add("Smith");
names.add("Jack");
material.put("names", names);
//數組
String[] stars=new String[]{"☆","☆☆","☆☆☆"};
material.put("stars", stars);
//6.渲染模板並將渲染後的頁面響應前端
template.process(material,out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
3.測試
①啓動項目後訪問請求路徑:http://localhost:8080/fs,頁面展示如下:
②繼續訪問請求路徑:http://localhost:8080/hs,頁面展示如下: