使用Freemarker生成静态页面

如何使用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">&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>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

品优购商城项目（四）搜索：高亮显示、面板搜索
这个模块的搜索主要是使用了 solr搜索引擎Ik分词包，并结合缓存redis实现的一块业务。 1.品优购-高亮显示需求将用户输入的关键字在标题中以红色的字体显示出来，就是搜索中常用的高亮显示。主要实现的思路是：在后台在查询到的内容中在搜素关…...
2024/4/21 16:45:46
源代码生成流程图软件
2019独角兽企业重金招聘Python工程师标准>>> 源码与流程图转换 1 流程图生成源代码软件 2 源代码生成流程图软件 2.1 Crystal FLOW 一款回顾和可视的从源代码中得到流程图的软件。并且支持C语言的语法高亮显示。 2.1.1 Crystal FLOW for C 获得一个带有流程图的…...
2024/4/21 16:45:45
微前端概念
本文描述了采用不同 JavaScript 技术框架的多个团队中协同构建一个现代化前端 Web 应用所需要的技术、策略和方法。什么是微前端？ 微前端这个术语最初来自 2016 年的 ThoughtWorks 技术雷达[ https://www.thoughtworks.com/radar/techniques/micro-frontends ]&a…...
2024/4/21 16:45:44
练手项目1笔记 day05
目标完成商品分类功能了解电商概念SPU和SKU 掌握富文本编辑器的使用掌握上传服务器FastDFS 掌握angularJS图片上传 1. 商品分类 1. 需求分析实现三级商品分类列表查询功能首先显示一级分类；点击列表行的查询下级按钮，进入下级分类列表&#xff…...
2024/4/21 16:45:44
品优购05——商品录入
1. 商品分类 1.1 表结构 tb_item_cat 商品分类表字段类型长度含义 Id Bigint 主键 Parent_id Bigint 上级ID Name varchar 分类名称 Type_id Bigint 类型模板ID 1.2 商品列表 1.2.1 后端代码 1）服务接口 pinyougou-sellergood…...
2024/4/21 16:45:43
freemaker 课程
品优购电商系统开发第12章网页静态化解决方案-Freemarker 传智播客.黑马程序员 1.网页静态化技术Freemarker 1.1为什么要使用网页静态化技术网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。对于电…...
2024/4/21 16:45:41
双眼皮去皮眼尾耸拉
...
2024/4/21 16:45:41
双眼皮前眼角过短图片
...
2024/4/21 16:45:39
双眼皮皮下增生
...
2024/4/21 16:45:38
双眼皮能不难做
...
2024/4/20 14:15:18
双眼皮埋线有什么缺点
...
2024/4/20 14:15:15
双眼皮埋下哪家好
...
2024/4/20 14:15:15
双眼皮埋的线会吸收吗
...
2024/4/20 14:15:13
《菜鸟教程》| Egret微信小游戏好友排行榜教程
写在前面：随着越来越多的新人开始接触白鹭引擎，创作属于自己的游戏。考虑到初学者会遇到一些实际操作问题，我们近期整理推出“菜鸟”系列技术文档，以便更好的让这些开发者们快速上手，Egret大神们可以自动忽略此类内容。今天我们分享的菜鸟文档将介绍微信小游戏好友排行榜的…...
2024/4/28 6:49:27
双眼皮两到印子图片
...
2024/5/5 4:02:15
双眼皮宽凹
...
2024/5/1 22:35:14
双眼皮济南美莱
...
2024/4/25 10:53:24
双眼皮恢复期间大小眼
...
2024/5/3 2:57:02
双眼皮恢复后眼睑太厚
...
2024/5/2 23:43:20
双眼皮恢复后上眼睑厚
...
2024/4/21 16:45:35

使用Freemarker生成静态页面

如何使用Freemarker生成静态页面

相关文章

最新文章