如何使用Freemarker生成静态页面
Freemarker
a>freemarker
freemarker一款优秀的模板引擎，能够生成静态页面，该技术能够减轻数据库访问压力。
其实就是系统的优化.这些静态化页面经过nginx服务器处理，访问非常快。
市场模板引擎： FreeMarker Thymeleaf、
b>使用freemarker产生静态化页面的步骤
步骤一：导入freemarker的依赖
步骤二：创建模板页面
步骤三：使用Freemarker API来完成向模板页面中填充数据
创建Configuration对象、
构建数据，一般会选择Map集合体
获取模板Template对象
通过输入流Writer将数据输出到指定的模板中
c>freemarker语法之表达式
${}
d>freemarker语法之指令
<#指令名称 参数></#指令名称>
1.定义全局变量
<#assign name1=value1 name2=value2 … nameN=valueN> 定义全局变量 value1…valueN值可以写死也可以value1是一个变量
2.条件判断
<#if condition>
<#elseif condition2>
<#else>
</#if>
3.页面包含嵌套子页面
<#include path>
4.循环遍历
<#list list集合 as item为每一份>
Part repeated for each item
</#list>
//循环map集合的3种方式<#list map集合 as key,value>Part repeated for each key-value pair</#list<#list map集合?keys as key>${map[key]}</#list><#list myHash?values as v>${v}</#list>
e>freemarker语法之内置函数
变量？函数名
1.获取集合大小===>?size
2.将json字符串转换成对象===>? eval
3.日期格式转换===>? date/time/datetime/string(xxx)
4.去掉数字中“,”===>? c
f>freemarker语法之特殊符号
？后面跟的内置函数
?? 判断是否为空
！除了判断为空，而且还可以对空值进行指定赋值
== 判断是否相等
(变量>值) >,<等值符号
(2)详情页面完成
a>spring和freemarker整合步骤
1.在spring的配置文件中配置spring和freemarker的配置
2.通过配置类得到Configuration
Configuration configuration = freeMarkerConfigurer.getConfiguration();
3.有Configuration得到Template对象
Template template=configuration.getTemlate(“具体的模板名称”)
template.process(模板填充的数据, writer);//out是writer可以采用FileWriter可以把内容输出去到文件中
b> item.ftl改造
根据商品ID查询如下数据塞入到Map中数据:
dataModel.put(“goods”, goods);
dataModel.put(“goodsDesc”, goodsDesc);
dataModel.put(“itemCat1”, itemCat1);
dataModel.put(“itemCat2”, itemCat2);
dataModel.put(“itemCat3”, itemCat3);
dataModel.put(“itemList”, itemList);
c>sku产生以及价格随之改变
1.请求详情页面
将默认的$scpe.specicficationItems=skuList[0].spec
每一个规格名称的样式都会判断对应的规格名称是否在specicficationItems 对象存在
2.用户选择的规格名称产生的不同的sku
只需要把用户选择的规格属性名和规格名称存入到
$scope.specicficationItems={“颜色”:“黑色”} 设计该对象的目的是判断样式是否要添加
3.用后选择的不同的sku就会产生不同的价格和标题
首先将goodsId关联的所有TbItem记录查询返回给页面，然后构建一个json数组对象
并且返回的skuList数组第1条记录是默认的sku。
用后选择的规格名称和skuList中每一个spec对象进行比较，key/value是否相等
如果相等，可
示例:
1.导入jar包
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency>
在spring文件中配置spring和freemarker整合的模板类
<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"><!-- 模板页面的路径--><property name="templateLoaderPath" value="/WEB-INF/ftl/"></property><!-- 设置编码 --><property name="defaultEncoding" value="UTF-8"></property></bean>
后端代码编写
//注解注入配置的freemarker模板类@Autowiredprivate FreeMarkerConfig freeMarkerConfig;public Boolean genItemHtml(Long goodsId) {// TODO Auto-generated method stubtry {Configuration configuration = freeMarkerConfig.getConfiguration();//配置模板Template template = configuration.getTemplate("item.ftl");//创建map集合Map<String,Object> map = new HashMap<>();//通过goodsid查询商品详情TbGoods goods = goodsMapper.selectByPrimaryKey(goodsId);//通过goodsid查询商品扩展属性TbGoodsDesc goodsDesc = goodsDescMapper.selectByPrimaryKey(goodsId);//通过商品Category1Id查询一级分类String itemCat1 = itemCatMapper.selectByPrimaryKey(goods.getCategory1Id()).getName();//通过商品Category2Id查询二级分类String itemCat2 = itemCatMapper.selectByPrimaryKey(goods.getCategory2Id()).getName();//通过商品Category3Id查询三级分类String itemCat3 = itemCatMapper.selectByPrimaryKey(goods.getCategory3Id()).getName();//通过goodsid查询商品sku列表TbItemExample example = new TbItemExample();com.pinyougou.pojo.TbItemExample.Criteria criteria = example.createCriteria();//按is_default分组,并且降序(查询默认)example.setOrderByClause("is_default desc");criteria.andStatusEqualTo("1");criteria.andGoodsIdEqualTo(goodsId);List<TbItem> itemList = itemMapper.selectByExample(example);//动态配置输出路径FileWriter out = new FileWriter("D:\\eclipse\\item\\"+goodsId+".html");map.put("goods", goods);map.put("goodsDesc", goodsDesc);map.put("itemCat1", itemCat1);map.put("itemCat2", itemCat2);map.put("itemCat3", itemCat3);map.put("itemList", itemList);//将数据输出到模板template.process(map, out);//关闭输出流out.close();return true;} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();return false;}
前台模板页面代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>产品详情页</title><link rel="icon" href="assets/img/favicon.ico"><link rel="stylesheet" type="text/css" href="css/webbase.css" /><link rel="stylesheet" type="text/css" href="css/pages-item.css" /><link rel="stylesheet" type="text/css" href="css/pages-zoom.css" /><link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/><link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/><script src="plugins/angularjs/angular.min.js"></script><script src="js/controller/base.js"></script><script src="js/controller/itemController.js"></script><script>var skuList = [<#list itemList as item>{"id":${item.id?c},"title":"${item.title!''}","price":${item.price?c},"spec":${item.spec}},</#list>]</script></head><body ng-app="app" ng-controller="itemController" ng-init="loadSku()"><!--页面顶部 开始--><#-- 引入页面(头) --><#include "head.ftl"/><#-- 图片列表 --><#assign imageList=goodsDesc.itemImages?eval /> <#-- spec列表 --><#assign specificationList=goodsDesc.specificationItems?eval /><#-- 扩展属性 --><#assign customAttributeList = goodsDesc.customAttributeItems?eval /><!--页面顶部 结束--><div class="py-container"><div id="item"><div class="crumb-wrap"><ul class="sui-breadcrumb"><li><a href="#">${itemCat1}</a></li><li><a href="#">${itemCat2}</a></li><li><a href="#">${itemCat3}</a></li><li class="active">iphone 6S系类</li></ul></div><!--product-info--><div class="product-info"><div class="fl preview-wrap"><!--放大镜效果--><div class="zoom"><!--默认第一个预览--><div id="preview" class="spec-preview"><#if (imageList?size>0)><span class="jqzoom"><img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400px" height="400px"/></span></#if></div><!--下方的缩略图--><div class="spec-scroll"><a class="prev"><</a><!--左右按钮--><div class="items"><ul><#if (imageList?size>0)><#list imageList as image><li><img src="${image.url}" bimg="${image.url}" onmousemove="preview(this)" /></li></#list></#if></ul></div><a class="next">></a></div></div></div><div class="fr itemInfo-wrap"><div class="sku-name"><h4>{{sku.title}}</h4></div><div class="news"><span>${goods.caption}</span></div><div class="summary"><div class="summary-wrap"><div class="fl title"><i>价格</i></div><div class="fl price"><i>¥</i><em>{{sku.price}}</em><span>降价通知</span></div><div class="fr remark"><i>累计评价</i><em>612188</em></div></div><div class="summary-wrap"><div class="fl title"><i>促销</i></div><div class="fl fix-width"><i class="red-bg">加价购</i><em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em></div></div></div><div class="support"><div class="summary-wrap"><div class="fl title"><i>支持</i></div><div class="fl fix-width"><em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div></div><div class="summary-wrap"><div class="fl title"><i>配 送 至</i></div><div class="fl fix-width"><em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em></div></div></div><div class="clearfix choose"><div id="specification" class="summary-wrap clearfix"><#if (specificationList?size>0)><#list specificationList as spec><dl><dt><div class="fl title"><i>${spec.attributeName}</i></div></dt><#list spec.attributeValue as value><dd><a href="javascript:;" ng-click="addItem('${spec.attributeName}','${value}')" class="{{isSelected('${spec.attributeName}','${value}')?'selected':''}}">${value}<span title="点击取消选择"> </span></a></dd></#list></dl></#list></#if></div><div class="summary-wrap"><div class="fl title"><div class="control-group"><div class="controls"><input autocomplete="off" type="text" value="{{number}}" minnum="1" class="itxt" /><a href="javascript:void(0)" class="increment plus" ng-click="addNum(1)">+</a><a href="javascript:void(0)" class="increment mins" ng-click="addNum(-1)">-</a></div></div></div><div class="fl"><ul class="btn-choose unstyled"><li><a href="cart.html" target="_blank" class="sui-btn btn-danger addshopcar" ng-click="addToChe()">加入购物车</a></li></ul></div></div></div></div></div><!--product-detail--><div class="clearfix product-detail"><div class="fl aside"><ul class="sui-nav nav-tabs tab-wraped"><li class="active"><a href="#index" data-toggle="tab"><span>相关分类</span></a></li><li><a href="#profile" data-toggle="tab"><span>推荐品牌</span></a></li></ul><div class="tab-content tab-wraped"><div id="index" class="tab-pane active"><ul class="part-list unstyled"><li>手机</li><li>手机壳</li><li>内存卡</li><li>Iphone配件</li><li>贴膜</li><li>手机耳机</li><li>移动电源</li><li>平板电脑</li></ul><ul class="goods-list unstyled"><li><div class="list-wrap"><div class="p-img"><img src="img/_/part01.png" /></div><div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div><div class="price"><strong><em>¥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a></div></div></li><li><div class="list-wrap"><div class="p-img"><img src="img/_/part02.png" /></div><div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div><div class="price"><strong><em>¥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a></div></div></li><li><div class="list-wrap"><div class="p-img"><img src="img/_/part03.png" /></div><div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div><div class="price"><strong><em>¥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a></div></div><div class="list-wrap"><div class="p-img"><img src="img/_/part02.png" /></div><div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div><div class="price"><strong><em>¥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a></div></div><div class="list-wrap"><div class="p-img"><img src="img/_/part03.png" /></div><div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div><div class="price"><strong><em>¥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a></div></div></li></ul></div><div id="profile" class="tab-pane"><p>推荐品牌</p></div></div></div><div class="fr detail"><div class="clearfix fitting"><h4 class="kt">选择搭配</h4><div class="good-suits"><div class="fl master"><div class="list-wrap"><div class="p-img"><img src="img/_/l-m01.png" /></div><em>￥5299</em><i>+</i></div></div><div class="fl suits"><ul class="suit-list"><li class=""><div id=""><img src="img/_/dp01.png" /></div><i>Feless费勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>39</span></label></li><li class=""><div id=""><img src="img/_/dp02.png" /> </div><i>Feless费勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>50</span></label></li><li class=""><div id=""><img src="img/_/dp03.png" /></div><i>Feless费勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>59</span></label></li><li class=""><div id=""><img src="img/_/dp04.png" /></div><i>Feless费勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>99</span></label></li></ul></div><div class="fr result"><div class="num">已选购0件商品</div><div class="price-tit"><strong>套餐价</strong></div><div class="price">￥5299</div><button class="sui-btn btn-danger addshopcar">加入购物车</button></div></div></div><div class="tab-main intro"><ul class="sui-nav nav-tabs tab-wraped"><li class="active"><a href="#one" data-toggle="tab"><span>商品介绍</span></a></li><li><a href="#two" data-toggle="tab"><span>规格与包装</span></a></li><li><a href="#three" data-toggle="tab"><span>售后保障</span></a></li><li><a href="#four" data-toggle="tab"><span>商品评价</span></a></li><li><a href="#five" data-toggle="tab"><span>手机社区</span></a></li></ul><div class="clearfix"></div><div class="tab-content tab-wraped"><div id="one" class="tab-pane active"><ul class="goods-intro unstyled"><li>分辨率：1920*1080(FHD)</li><li>后置摄像头：1200万像素</li><li>前置摄像头：500万像素</li><li>核 数：其他</li><li>频 率：以官网信息为准</li><li>品牌： Apple</li><li>商品名称：APPLEiPhone 6s Plus</li><li>商品编号：1861098</li><li>商品毛重：0.51kg</li><li>商品产地：中国大陆</li><li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li><li>系统：苹果（IOS）</li><li>像素：1000-1600万</li><li>机身内存：64GB</li></ul><div class="intro-detail"><img src="img/_/intro01.png" /><img src="img/_/intro02.png" /><img src="img/_/intro03.png" /></div></div><div id="two" class="tab-pane"><p>${goodsDesc.packageList}</p></div><div id="three" class="tab-pane"><p>${goodsDesc.saleService}</p></div><div id="four" class="tab-pane"><p>商品评价</p></div><div id="five" class="tab-pane"><p>手机社区</p></div></div></div></div></div><!--like--><div class="clearfix"></div><div class="like"><h4 class="kt">猜你喜欢</h4><div class="like-list"><ul class="yui3-g"><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike01.png" /></div><div class="attr"><em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em></div><div class="price"><strong><em>¥</em><i>3699.00</i></strong></div><div class="commit"><i class="command">已有6人评价</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike02.png" /></div><div class="attr"><em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em></div><div class="price"><strong><em>¥</em><i>4388.00</i></strong></div><div class="commit"><i class="command">已有700人评价</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike03.png" /></div><div class="attr"><em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em></div><div class="price"><strong><em>¥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人评价</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike04.png" /></div><div class="attr"><em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em></div><div class="price"><strong><em>¥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人评价</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike05.png" /></div><div class="attr"><em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em></div><div class="price"><strong><em>¥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人评价</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="img/_/itemlike06.png" /></div><div class="attr"><em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em></div><div class="price"><strong><em>¥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人评价</i></div></div></li></ul></div></div></div></div><!-- 底部栏位 --><!--页面底部 开始 --><#include "foot.ftl"/><!--页面底部 结束 --></body></html>
