1.工程引入依赖
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.23</version>
</dependency>
**
2. 创建模板文件
**
模板文件中四种元素
1、 文本，直接输出的部分
2、 注释，即<#–…-->格式不会输出
3、 插值（Interpolation）：即${…}部分,将使用数据模型中的部分替代输出
4、 FTL 指令：FreeMarker 指令，和 HTML 标记类似，名字前加#予以区分，不会输出。
我们现在就创建一个简单的创建模板文件 test.ftl
<html>
<head>
<meta charset="utf-8">
<title>Freemarker入门小DEMO </title>
</head>
<body>
<#--我只是一个注释，我不会有任何输出 -->
${name},你好。${message}
</body>
</html>
这里有文本、插值和注释
3.生成文件
使用步骤：
第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker 的版本号。
第二步：设置模板文件所在的路径。第三步：设置模板文件使用的字符集。一般就是 utf-8. 第四步：加载一个模板，创建一个模板对象。
第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。第六步：创建一个 Writer 对象，一般创建一 FileWriter 对象，指定生成的文件名。
第七步：调用模板对象的 process 方法输出文件。
第八步：关闭流
代码：
创建 Test 类 main 方法如下：
//1.创建配置类
Configuration configuration=new Configuration(Configuration.getVersion());
//2.设置模板所在的目录
configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));
//3.设置字符集
configuration.setDefaultEncoding("utf-8");
//4.加载模板
Template template = configuration.getTemplate("test.ftl");
//5.创建数据模型
Map map=new HashMap();
map.put("name", "张三 ");
map.put("message", "欢迎来到神奇的品优购世界！");
//6.创建Writer对象
Writer out =new FileWriter(new File("d:\\test.html"));
//7.输出
template.process(map, out);
//8.关闭Writer对象
out.close();
执行后，在 D 盘根目录即可看到生成的 test.html ，打开看看
4 FTL 指令
4.1 assign指令
此指令用于在页面上定义一个变量
（1） 定义简单类型：
（2） 定义对象类型：
<#assign linkman="周先生"> 联系人：${linkman}
4.2 include 指令
此指令用于模板文件的嵌套
创建模板文件 head.ftl
我们修改 test.ftl，在模板文件中使用 include 指令引入刚才我们建立的模板
<#include "head.ftl">
4.3 if 指令
在模板文件上添加
<#if success=true>
你已通过实名认证
<#else>
你未通过实名认证
</#if>
在代码中对 str 变量赋值
map.put("success", true);
在 freemarker 的判断中，可以使用= 也可以使用==
4.4 list 指令
需求，实现商品价格表，如下图：
（1） 代码中对变量 goodsList 赋值
List goodsList=new ArrayList();
Map goods1=new HashMap();
goods1.put("name", "苹果");
goods1.put("price", 5.8); Map goods2=new HashMap();
goods2.put("name", "香蕉");
goods2.put("price", 2.5); Map goods3=new HashMap();
goods3.put("name", "橘子");
goods3.put("price", 3.2);
goodsList.add(goods1);
goodsList.add(goods2);
goodsList.add(goods3); map.put("goodsList", goodsList);
（2） 在模板文件上添加
----商品价格表----
<#list goodsList as goods> ${goods_index+1} 商品名称： ${goods.name} 价格：${goods.price}<br> </#list>
如果想在循环中得到索引，使用循环变量+_index 就可以得到。
4.5 内建函数
内建函数语法格式： 变量+?+函数名称
4.5.1 获取集合大小
我们通常要得到某个集合的大小，如下图：
我们使用 size 函数来实现，代码如下：
共 ${goodsList?size} 条记录
4.5.2 转换 JSON 字符串为对象
我们通常需要将 json 字符串转换为对象，那如何处理呢？看代码
<#assign text="{'bank':'工商银行','account':'10101920201920212'}" />
<#assign data=text?eval />
开户行：${data.bank} 账号：${data.account}
4.5.3 日期格式化
代码中对变量赋值：
dataModel.put("today", new Date());
在模板文件中加入
当前日期：${today?date} <br> 当前时间：${today?time} <br> 当前日期+时间：${today?datetime} <br> 日期格式化： ${today?string("yyyy年MM月")}
4.5.4 数字转换为字符串
代码中对变量赋值：
map.put("point", 102920122);
修改模板：
累计积分：${point}
页面显示：
我们会发现数字会以每三位一个分隔符显示，有些时候我们不需要这个分隔符，就需要将数字转换为字符串,使用内建函数 c
累计积分：${point?c}
页面显示效果如下：
4.6 空值处理运算符
如果你在模板中使用了变量但是在代码中没有对变量赋值，那么运行生成时会抛出异常。但是有些时候，有的变量确实是 null，怎么解决这个问题呢？
4.6.1 判断某变量是否存在:“??”
用法为:variable??,如果该变量存在,返回 true,否则返回 false
<#if aaa??>
aaa变量存在
<#else>
aaa变量不存在
</#if>
4.6.2 缺失变量默认值:“!”
我们除了可以判断是否为空值，也可以使用!对 null 值做转换处理
在模板文件中加入
${aaa!'-'}
在代码中不对 aaa 赋值，也不会报错了 ，当 aaa 为 null 则返回！后边的内容-
===========================================================================
<!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" />
<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" 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="pinyougou" ng-controller="itemController" ng-init="num=1;loadSku()">
<!--页面顶部 开始-->
<#include "head.ftl">
<#--图片列表-->
<#assign imageList=goodsDesc.itemImages?eval>
<#--扩展属性-->
<#assign customAttributeList=goodsDesc.customAttributeItems?eval>
<#--规格-->
<#assign specificationList=goodsDesc.specificationItems?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>
</ul>
</div>
<!--product-info-->
<div class="product-info">
<div class="fl preview-wrap">
<!--放大镜效果-->
<div class="zoom">
<!--默认第一个预览-->
<div id="preview" class="spec-preview">
<span class="jqzoom">
<#if (imageList?size>0)>
<img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400px" height="400px" />
</#if>
</span>
</div>
<!--下方的缩略图-->
<div class="spec-scroll">
<a class="prev"><</a>
<!--左右按钮-->
<div class="items">
<ul>
<#list imageList as item>
<li><img src="${item.url}" bimg="${item.url}" onmousemove="preview(this)" /></li>
</#list>
</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">
<#list specificationList as spec>
<dl>
<dt>
<div class="fl title">
<i>${spec.attributeName}</i>
</div>
</dt>
<#list spec.attributeValue as item>
<dd><a href="javascript:;"
class="{{isSelected('${spec.attributeName}','${item}')?'selected':''}}"
ng-click="selectSpecification('${spec.attributeName}','${item}')">${item}
<span title="点击取消选择"> </span>
</a></dd>
</#list>
</dl>
</#list>
</div>
<div class="summary-wrap">
<div class="fl title">
<div class="control-group">
<div class="controls">
<input autocomplete="off" ng-model="num" type="text" value="1" 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="#" class="sui-btn btn-danger addshopcar" ng-click="addToCart()">加入购物车</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">
<#list customAttributeList as item>
<#if item.value??>
<li>${item.text}：${item.value}</li>
</#if>
</#list>
</ul>
<div class="intro-detail">
${goodsDesc.introduction}
</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>
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
