頁面靜態化之FreeMarker技術

在Eclipse工具中使用FreeMarker

  1. 點擊Window,選擇preference,彈出如下框
    找到:General–Editors–File Associations
    如下,如果有*.ftl文件,就不用點擊上面的Add。如果沒有,就點擊Add新建
    在這裏插入圖片描述

  2. 點擊此頁面下面的Add按鈕
    在這裏插入圖片描述

  3. 選擇General–Content Types
    在這裏插入圖片描述

  4. 創建後綴爲ftl的文件類型
    在這裏插入圖片描述

  5. 創建freemaker工具類

package cn.itsource.utils;

import java.io.File;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import cn.itsource.domain.Job;
import freemarker.template.Configuration;
import freemarker.template.Template;

public class FreeMarkerUtils {
	
	/**
	 * 生成職位詳情靜態頁面
	 * @param t	職位對象
	 * @param req	請求對象
	 * @param isAdmin 爲true表示生成後臺職位詳情頁面,爲false表示生成前臺職位詳情頁面
	 */
	public static void generateHtml(Job t, HttpServletRequest req, Boolean isAdmin){
		//處理業務邏輯【生成職位詳情靜態頁面】
		//創建模板文件
		//生成html文件
		//將生成html文件路徑保存到當前對象中,插入到數據庫中
		PrintWriter pw = null;
		try {
			//創建配置對象
			Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
			File f = new File(req.getServletContext().getRealPath("/WEB-INF/template"));
			//設置模版文件的存放路徑
			cfg.setDirectoryForTemplateLoading(f);
			//設置模板編碼
			cfg.setDefaultEncoding("UTF-8");
			//設置異常處理cfg.setTemplateExceptionHandler(TemplateExceptionHandler.HTML_DEBUG_HANDLER);
			//獲取模板對象
			Template template = cfg.getTemplate("jobDetails.ftl");
			
			//使用Map集合準備模板數據【模板數據一般是具有層級結構的數據】
			Map<String, Object> data = new HashMap<String, Object>();
			String basePath = req.getScheme()+"://"+req.getServerName()+":"+req.getServerPort()+ req.getContextPath() +"/";
			data.put("basePath", basePath);
			data.put("job", t);
			data.put("isAdmin", isAdmin);
			
			//文件名稱不能寫死
			String fileName = UUID.randomUUID().toString();
			//創建輸出流
			pw = new PrintWriter(req.getServletContext().getRealPath("/details/") + fileName + ".html");
			//輸出靜態HTML文檔內容
			template.process(data, pw);
			
			//設置job對象的detailsPath屬性【保存到數據庫中】
			if(isAdmin){
				t.setDetailsPath("details/" + fileName + ".html");
			}else{
				t.setDetailsPath2("details/" + fileName + ".html");
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(null != pw) pw.close();
		}
	}
	
	/**
	 * 刪除職位對象原來已經生成過的職位詳情靜態頁面
	 * @param t
	 * @param req
	 */
	public static void deleteJobDetailsFile(Job t, HttpServletRequest req){
		//噹噹前職位對象的detailsPath屬性值不爲空的時候,先刪除原來的靜態文件
		if(null != t.getDetailsPath() && !"".equals(t.getDetailsPath())){
			File f = new File(req.getServletContext().getRealPath(t.getDetailsPath()));
			if(f.exists()){
				f.delete();
			}
		}
		//噹噹前職位對象的detailsPath2屬性值不爲空的時候,先刪除原來的靜態文件
		if(null != t.getDetailsPath2() && !"".equals(t.getDetailsPath2())){
			File f = new File(req.getServletContext().getRealPath(t.getDetailsPath2()));
			if(f.exists()){
				f.delete();
			}
		}
	}

}

  1. 創建模版文件存儲目錄
    在src/main/webapp/WEB-INF/下新建一個template目錄,用來存放模版文件
  2. 創建生成的靜態頁面存儲目錄
    在tomcat/webapps/下新建一個cmstemp,用來存放生成的靜態頁面。
    放在tomcat/webapps目錄下避免因重新發布項目而自動消失
  3. 修改t_job表結構增加一列
ALTER TABLE t_job ADD COLUMN detailsPath VARCHAR(100) DEFAULT NULL;
  1. 編寫模版文件jobDetails.ftl(將jobDetails.jsp的內容複製過來修改即可)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
		<title>物流校招</title>
		<link rel="stylesheet" href="${basePath}css/bootstrap-theme.min.css" />
		<!--引入bootstrap樣式文檔-->
		<link rel="stylesheet" href="${basePath}css/bootstrap.min.css" />
		<script type="text/javascript" src="${basePath}js/jquery.min.js"></script>
		<script type="text/javascript" src="${basePath}js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="${basePath}css/commons.css" />
	</head>
	<body>
		<div class="breadcrumbs" id="breadcrumbs">
			<!-- 麪包屑導航 -->
			<ul class="breadcrumb">
				<li>
					<a href="javascript:void(0);">Home</a>
				</li>
				<li>
					<a href="${basePath}admin/jobs">職位管理</a>
				</li>
				<li class="active">職位詳情</li>
			</ul>
		</div>
		<!--職位詳情-->
		<div class="container nav-next-element" style="border: 1px solid #dcdcdc;padding-top: 30px;padding-bottom: 30px;">
			<span>
				<img src="${basePath}imgs/join_us_title.jpg" alt="">
			</span>
			<!--職位名稱-->
			<div class="col-md-offset-1" style="padding-top: 30px;">
				<img src="${basePath}imgs/join_us_icon.jpg" style="float: left;margin-right: 30px;" />
				<h3>${job.jobName}</h3>
			</div>
			<!--職位描述-->
			<div class="col-md-offset-1" style="padding-top: 36px;">
				<h4 style="float: left;margin-right: 30px;">職位描述:</h4>
				<p style="float: left;font-size: 12px;color: #575656;line-height: 40px;">
					<div style="clear: both;"></div>
					${job.intro}
				</p>
				<div style="clear: both;"></div>
			</div>
			<!--任職要求-->
			<div class="col-md-offset-1" style="padding-top: 36px;">
				<h4 style="float: left;margin-right: 30px;">任職要求:</h4>
				<p style="float: left;font-size: 12px;color: #575656;line-height: 40px;">
					<div style="clear: both;"></div>
					${job.requires}
				</p>
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章