欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用Freemarker生成静态页面

程序员文章站 2022-03-07 22:22:02
...

如何使用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>
  1. 在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>
  1. 后端代码编写

//注解注入配置的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;
		}
  1. 前台模板页面代码
<!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">&lt;</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">&gt;</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="点击取消选择">&nbsp;</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>
相关标签： Freemarker

上一篇： PHP如何删除数组中的重复元素

下一篇： 基于maven的Freemarker 集成Spirn Mybatis SpringMV整合配置

推荐阅读