页面静态化之FreeMarker技术

在Eclipse工具中使用FreeMarker

点击Window，选择preference，弹出如下框
找到：General–Editors–File Associations
如下，如果有*.ftl文件，就不用点击上面的Add。如果没有，就点击Add新建
点击此页面下面的Add按钮
选择General–Content Types
创建后缀为ftl的文件类型
创建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();
			}
		}
	}

}

创建模版文件存储目录
在src/main/webapp/WEB-INF/下新建一个template目录，用来存放模版文件
创建生成的静态页面存储目录
在tomcat/webapps/下新建一个cmstemp，用来存放生成的静态页面。
放在tomcat/webapps目录下避免因重新发布项目而自动消失
修改t_job表结构增加一列

ALTER TABLE t_job ADD COLUMN detailsPath VARCHAR(100) DEFAULT NULL;

编写模版文件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>

页面静态化之FreeMarker技术

在Eclipse工具中使用FreeMarker

猜你喜欢