JWeb之FreeMaker模板渲染

前面學習了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,頁面展示如下:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章