如何使用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模板类
@Autowired
private FreeMarkerConfig freeMarkerConfig;
public Boolean genItemHtml(Long goodsId) {
// TODO Auto-generated method stub
try {
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 block
e.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>
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
