Freemaker技术
1.概要
1. Struts2默认使用freemarker实现自定义标签模板,项目导入Struts2,就已经导入的freemarker.
2. 模板引擎:
1) 一种基于模板, 用来生成输出文件(任何来自于html的文本用来自动生成源代码)的通用工具.
2) freemarker实际上被设计出来用来生成html页面;
3) freemarker(模板文件) + java数据对象 == 输出(任何格式的文本);
3. freemarker模板文件, 通常扩展名为 .ftl;
2.开发
1. sts/eclipse中安装freemarker eclipse编辑插件
将freemarker eclipse 复制到eclipse的dropins文件夹, 重启开发工具.
2. 编辑模板文件:
通常模板文件放在 web-inf文件夹下 template;
<html>
<title>
${title}
</title>
<body>
${msg}
</body>
</html>
${变量}, 需要在程序中指定变量,合并到模板文件一同输出.
3.后台模板代码实现
@Test
public void testOutput(){
Configuration configurarion = new Configuration(Configuration.VERSION_2_3_22);
configurarion.setDirectoryForTemplateLoading(
new File("src/main/webapp/WEB-INF/templates"));
Template template = configurarion.getTemplate("hello.ftl");
Map<String, Object> map = new HashMap<String, Object>();
map.put("title","oranges");
map.put("msg", "hello freemarker...");
template.process(map, new PrintWriter(System.out));
}
4.实际案例
前端代码:
1. promotion.html
这里携带对象的id
<div class="caption">
<p><a href="#/promotion_detail/{{item.id}}">{{item.title}}</a></p>
<p class="text-right status">
<span ng-show="item.status == '1'">进行中</span>
<span ng-show="item.status == '2'">已结束</span>
</p>
<p class="text-right grey">{{item.startDate}}—{{item.endDate}}</p>
<p class="text-right grey">{{item.activeScope}}</p>
</div>
2. index.html
<script type="text/javascript">
var bosfore_app = angular.module("bosfore_app", ['ngRoute']);
bosfore_app.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/", {
templateUrl: 'main.html'
}).when("/order", {
templateUrl: 'order.html'
}).when("/express_manage", {
templateUrl: 'express_manage.html'
}).when("/userinfo", {
templateUrl: 'userinfo.html'
}).when("/search", {
templateUrl: 'search.html'
}).when("/myhome", {
templateUrl: 'myhome.html'
}).when("/promotion", {
templateUrl: 'promotion.html'
}).when("/promotion_detail/:id", {
templateUrl: function ($routeParams) {
return "promotion_showDetail.action?id=" + $routeParams.id;
}
}).otherwise({
redirectTo: '/'
})
}]);
<link rel="stylesheet" type="text/css" href="css/promotion_detail.css">
<div class="container promotions" >
<div class="col-md-2 prolist">
<h5 class="title"><a href="#/promotion"><strong>返回促销列表</strong></a></h5>
<img src="images/pro.jpg" class="img-responsive">
</div>
<div class="col-md-1f0 procontent">
<h5 class="title">${promotion.title}</h5>
<div class="intro">
<p>活动范围: ${promotion.activeScope}</p>
<p>活动时间: ${promotion.startDate?string("yyyy-MM-dd")}
- ${promotion.endDate?string("yyyy-MM-dd")}</p>
</div>
<div class="partline clearfix"></div>
<div class="promotionbox">
${promotion.description}
</div>
</div>
</div>
6.后台代码
/**
* 页面静态化的实现
*/
@Action(value = "promotion_showDetail")
public String showDetail() throws Exception {
String htmlRealPath = ServletActionContext.getServletContext().getRealPath("/freemarker");
File htmlFile = new File(htmlRealPath + "/" + model.getId() + ".html");
if(!htmlFile.exists()){
Configuration configuration = new Configuration(Configuration.VERSION_2_3_22);
configuration.setDirectoryForTemplateLoading(new File(ServletActionContext.
getServletContext().getRealPath("/WEB-INF/template")));
Template template = configuration.getTemplate("promotion_detail.ftl");
Promotion promotion = WebClient.create("http://localhost:9999/services/promotionService/promotion/"
+ model.getId()).accept(MediaType.APPLICATION_JSON).get(Promotion.class);
Map<String, Object> map = new HashMap<>();
map.put("promotion", promotion);
template.process(map, new OutputStreamWriter(new FileOutputStream(htmlFile), "utf-8"));
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
FileUtils.copyFile(htmlFile, response.getOutputStream());
return NONE;
}