品优购电商系统开发
第12章
网页静态化解决方案-Freemarker
传智播客.黑马程序员
1.网页静态化技术Freemarker
1.1为什么要使用网页静态化技术
网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。
对于电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决。
网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。
另外我们如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。Nginx可以承载5万的并发，而Tomcat只有几百。关于Nginx我们在后续的课程中会详细讲解。
今天我们就研究网页静态化技术----Freemarker 。
1.2什么是 Freemarker
FreeMarker 是一个用 Java 语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与 Web 容器无关，即在 Web 运行时，它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成 XML，JSP 或 Java 等。
1.3 Freemarker入门小DEMO
1.3.1工程引入依赖
| <dependencies> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency> </dependencies> <build> <plugins> <!-- java编译插件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.2</version> <configuration> <source>1.7</source> <target>1.7</target> <encoding>UTF-8</encoding> </configuration> </plugin> </plugins> </build> |
1.3.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> |
这里有文本、插值和注释
1.3.3生成文件
使用步骤：
第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker的版本号。
第二步：设置模板文件所在的路径。
第三步：设置模板文件使用的字符集。一般就是 utf-8.
第四步：加载一个模板，创建一个模板对象。
第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。
第六步：创建一个 Writer 对象，一般创建一 FileWriter 对象，指定生成的文件名。
第七步：调用模板对象的 process 方法输出文件。
第八步：关闭流
代码：
创建Test类 main方法如下：
| public static void main(String[] args) throws Exception{ //1.创建配置类 Configuration configuration=new Configuration(Configuration.getVersion()); //2.设置模板所在的目录 String dir = "D:\\workspacepyg\\spring-demo-freemarker\\src\\main\\resources\\"; configuration.setDirectoryForTemplateLoading(new File(dir)); //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(dir + "test.html")); //7.输出 template.process(map, out); //8.关闭Writer对象 out.close(); } |
执行后，在D盘根目录即可看到生成的test.html ，打开看看
是不是有些小激动呢？
1.4 FTL指令
1.4.1 assign指令
此指令用于在页面上定义一个变量
（1）定义简单类型：
| <#assign linkman="周先生"> 联系人：${linkman} |
（2）定义对象类型：
| <#assign info={"mobile":"13301231212",'address':'北京市昌平区王府街'} > 电话：${info.mobile} 地址：${info.address} |
运行效果：
1.4.2 include指令
此指令用于模板文件的嵌套
创建模板文件head.ftl
| <h1>黑马信息网</h1> |
我们修改test.ftl，在模板文件中使用include指令引入刚才我们建立的模板
| <#include "head.ftl"> |
1.4.3 if指令
在模板文件上添加
| <#if success> 你已通过实名认证 <#else> 你未通过实名认证 </#if> |
在代码中对str变量赋值
| map.put("success", true); |
在freemarker的判断中，可以使用= 也可以使用==
1.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）在模板文件上添加
| ----商品价格表----<br> <#list goodsList as goods> ${goods_index+1} 商品名称： ${goods.name} 价格：${goods.price}<br> </#list> |
如果想在循环中得到索引，使用循环变量+_index就可以得到。
1.5 内建函数
内建函数语法格式： 变量+?+函数名称
1.5.1获取集合大小
我们通常要得到某个集合的大小，如下图：
我们使用size函数来实现，代码如下：
| 共 ${goodsList?size} 条记录 |
1.5.2转换JSON字符串为对象
我们通常需要将json字符串转换为对象，那如何处理呢？看代码
| <#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> <#assign data=text?eval /> 开户行：${data.bank} 账号：${data.account} |
1.5.3日期格式化
代码中对变量赋值：
| map.put("today", new Date()); |
在模板文件中加入
| 当前日期：${today?date} <br> 当前时间：${today?time} <br> 当前日期+时间：${today?datetime} <br> 日期格式化： ${today?string("yyyy年MM月")} |
运行效果如下：
1.5.4数字转换为字符串
代码中对变量赋值：
| map.put("point", 102920122); |
修改模板：
| 累计积分：${point} |
页面显示：
我们会发现数字会以每三位一个分隔符显示，有些时候我们不需要这个分隔符，就需要将数字转换为字符串,使用内建函数c
| 累计积分：${point?c} |
页面显示效果如下：
1.6空值处理运算符
如果你在模板中使用了变量但是在代码中没有对变量赋值，那么运行生成时会抛出异常。但是有些时候，有的变量确实是null，怎么解决这个问题呢？
1.6.1判断某变量是否存在:“??”
用法为:variable??,如果该变量存在,返回true,否则返回false
| <#if aaa??> aaa变量存在 <#else> aaa变量不存在 </#if> |
1.6.2缺失变量默认值:“!”
我们除了可以判断是否为空值，也可以使用!对null值做转换处理
在模板文件中加入
| ${aaa!'-'} |
在代码中不对aaa赋值，也不会报错了 ，当aaa为null则返回！后边的内容-
1.7运算符
1.7.1算数运算符
FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , %
1.7.2逻辑运算符
逻辑运算符有如下几个:
逻辑与:&&
逻辑或:||
逻辑非:!
逻辑运算符只能作用于布尔值,否则将产生错误
1.7.3比较运算符
表达式中支持的比较运算符有如下几个:
1 =或者==:判断两个值是否相等.
2 !=:判断两个值是否不等.
3 >或者gt:判断左边值是否大于右边值
4 >=或者gte:判断左边值是否大于等于右边值
5 <或者lt:判断左边值是否小于右边值
6 <=或者lte:判断左边值是否小于等于右边值
注意: =和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)>
2.商品详情页-数据显示
2.1需求分析
运用Freemarker技术来实现商品详细页的静态化。通过地址栏输入某地址，如下形式
http://localhost:9001/149187842867973.html
能在本地电脑某目录生成商品详细页，页面的名称为商品id.html
2.2工程搭建
2.2.1服务接口层
在interface工程下创建接口ItemPageService
2.2.2服务实现层
（1）工程service-sellergoods
（2）添加web.xml 参见其它服务工程
（3）spring配置文件 参见其它服务工程 ，另外配置：
| <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="templateLoaderPath" value="/WEB-INF/ftl/" /> <property name="defaultEncoding" value="UTF-8" /> </bean> |
（4）建立cn.itcast.core.service包，包下建立类
| /** * 生成商品详情页面 * @author lx * */ @Service public class ItemPageServiceImpl implements ItemPageService,ServletContextAware{ @Autowired private FreeMarkerConfigurer freeMarkerConfigurer; @Autowired private GoodsDao goodsDao; @Autowired private GoodsDescDao goodsDescDao; @Autowired private ItemDao itemDao; @Autowired private ItemCatDao itemCatDao; //通过商品ID 生成商品详情页面 public void genItemHtml(Long goodsId){ Map<String,Object> root = new HashMap<String,Object>(); //商品表 SPU 小字段 Goods goods = goodsDao.selectByPrimaryKey(goodsId); root.put("goods", goods); //商品详情表 SPU 大字段 root.put("goodsDesc", goodsDescDao.selectByPrimaryKey(goodsId)); //商品表结果集SKU ItemQuery itemQuery = new ItemQuery(); itemQuery.createCriteria().andGoodsIdEqualTo(goodsId).andStatusEqualTo("1"); List<Item> itemList = itemDao.selectByExample(itemQuery); root.put("itemList", itemList); root.put("itemCat1", itemCatDao.selectByPrimaryKey(goods.getCategory1Id()).getName()); root.put("itemCat2", itemCatDao.selectByPrimaryKey(goods.getCategory2Id()).getName()); root.put("itemCat3", itemCatDao.selectByPrimaryKey(goods.getCategory3Id()).getName()); //Freemarker Configuration configuration = freeMarkerConfigurer.getConfiguration(); //静态页面生成的真实路径 String realPath = getRealPath(goodsId + ".html"); Writer out = null; try { Template template = configuration.getTemplate("item.ftl"); //流 out = new FileWriter(new File(realPath)); template.process(root, out); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { if(null != out){ try { out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } /** * 返回真实路径 * @param path * @return */ private String getRealPath(String path) { return servletContext.getRealPath(path); } private ServletContext servletContext; @Override public void setServletContext(ServletContext servletContext) { // TODO Auto-generated method stub this.servletContext = servletContext; } } |
(5) 拷贝js,css等静态资源到page-service的webapp目录下
（6）将item.html拷贝至/WEB-INF/ftl下 ，修改扩展名为ftl ,将商品名称用插值代替
| <div class="sku-name"> <h4>${goods.goodsName}</h4> </div> |
（7）生成的文件在eclipse工作空间的.metadata\.plugins\org.eclipse.wst.server.core\tmp\wtpwebapps目录下
2.3商品详情页模板构建
2.3.1模板模块化引入
此时我们的item.ftl内容较多，当我们编辑时不容易快速找到编辑的位置，所以我们将头部分拆分到head.ftl ,将尾部拆分到foot.ftl ,用include指令在item.ftl中引入 。
内容详见配套代码
2.3.2生成基本数据
在模板中找到合适的位置，用插值替换静态文本
| <div class="news"><span>${goods.caption}</span></div> |
| <div class="fl price"><i>¥</i><em>${goods.price}</em><span>降价通知</span></div> |
| <div class="intro-detail"><!-- 商品详情 --> ${goodsDesc.introduction}</div> |
| <div id="two" class="tab-pane"><p>${goodsDesc.packageList}</p></div> <div id="three" class="tab-pane"><p>${goodsDesc.saleService}</p></div> |
运行控制层代码，测试生成效果
http://localhost:9001/149187842867973.html
2.3.3生成图片列表
编辑模板文件
| <#--图片列表 --> <#assign imageList=goodsDesc.itemImages?eval /> |
这一句要转换图片列表的json字符串
图片部分的代码
| <!--默认第一个预览--> <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"> <div class="items"> <ul> <#list imageList as item> <li><img src="${item.url}" bimg="${item.url}" onmousemove="preview(this)" /></li> </#list> </ul> </div> </div> |
生成效果如下：
2.3.4生成扩展属性列表
修改模板 首先进行json转换
| <#--扩展属性列表 --> <#assign customAttributeList=goodsDesc.customAttributeItems?eval /> |
显示扩展属性数据，如果扩展属性为空则不显示此条数据
| <#list customAttributeList as item> <#if item.value??> <li>${item.text} ：${item.value}</li> </#if> </#list> |
2.3.5生成规格列表
修改模板 转换规格列表
| <#--规格列表 --> <#assign specificationList=goodsDesc.specificationItems?eval /> |
此时，我们需要使用嵌套循环
| <#list specificationList as specification> <dl> <dt> <div class="fl title"> <i>${specification.attributeName}</i> </div> </dt> <#list specification.attributeValue as item> <dd><a href="javascript:;" >${item}</a></dd> </#list> </dl> </#list> |
修改模板，展示商品分类面包屑
| <ul class="sui-breadcrumb"> <li><a href="#">${itemCat1}</a></li> <li><a href="#">${itemCat2}</a></li> <li><a href="#">${itemCat3}</a></li> </ul> |
3.商品详情页-前端逻辑
3.1购买数量加减操作
3.1.1加入angularJS库
将angularJS库加入d:\item下
3.1.2前端控制层
将base.js拷贝到page-service项目js目录下
在js目录下构建controller文件夹，创建itemController.js
| //商品详细页（控制层） app.controller('itemController',function($scope){ //数量操作 $scope.addNum=function(x){ $scope.num=$scope.num+x; if($scope.num<1){ $scope.num=1; } } }); |
在方法中控制数量不能小于1
3.1.3模板
引入js
| <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> |
添加指令
| <body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1"> |
调用操作数量的方法
| <div class="controls"> <input autocomplete="off" type="text" value="{{num}}" 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> |
3.2规格选择
最终我们需要实现的效果：
3.2.1前端控制层
修改itemController.js
| $scope.specificationItems={};//记录用户选择的规格 //用户选择规格 $scope.selectSpecification=function(name,value){ $scope.specificationItems[name]=value; } //判断某规格选项是否被用户选中 $scope.isSelected=function(name,value){ if($scope.specificationItems[name]==value){ return true; }else{ return false; } } |
3.2.2模板
页面调用控制器的方法
| <dd> <a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}" ng-click="selectSpecification('${specification.attributeName}','${item}')"> ${item} <span title="点击取消选择"> </span> </a> </dd> |
4.商品详情页-读取SKU信息
需求：当我们选择规格后，应该在页面上更新商品名称为SKU的商品标题，价格也应该为SKU的商品价格。
4.1模板
修改模板：
| <script> //SKU商品列表 var skuList=[ <#list itemList as item> { "id":${item.id?c}, "title":"${item.title!''}", "price":${item.price?c}, "spec": ${item.spec} } , </#list> ]; </script> |
测试生成，发现页面源代码中生成了变量
4.2显示SKU标题和价格
4.2.1加载默认SKU信息
修改itemController.js
| //加载默认SKU $scope.loadSku=function(){ $scope.sku=skuList[0]; $scope.specificationItems= JSON.parse(JSON.stringify($scope.sku.spec)) ; } |
修改模板item.ftl
| <body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1;loadSku()"> |
修改模板，显示标题
| <div class="sku-name"><h4>{{sku.title}}</h4></div> |
显示价格
| <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> |
4.2.2选择规格更新SKU
修改itemController.js , 编写匹配对象的方法
| //匹配两个对象 matchObject=function(map1,map2){ for(var k in map1){ if(map1[k]!=map2[k]){ return false; } } for(var k in map2){ if(map2[k]!=map1[k]){ return false; } } return true; } |
编写方法，在SKU列表中查询当前用户选择的SKU
| //查询SKU searchSku=function(){ for(var i=0;i<skuList.length;i++ ){ if( matchObject(skuList[i].spec ,$scope.specificationItems ) ){ $scope.sku=skuList[i]; return ; } } $scope.sku={id:0,title:'--------',price:0};//如果没有匹配的 } |
在用户选择规格后触发读取方法
| //用户选择规格 $scope.selectSpecification=function(name,value){ $scope.specificationItems[name]=value; searchSku();//读取sku } |
4.3添加商品到购物车
修改itemController.js
| //添加商品到购物车 $scope.addToCart=function(){ alert('skuid:'+$scope.sku.id); } |
修改模板：
| <li><a href="#" target="_blank" class="sui-btn btn-danger addshopcar" ng-click="addToCart()">加入购物车</a></li> |
5.系统模块对接
5.1运营商后台调用页面生成服务
修改sellerGoods项目的GoodsServiceImpl.java
| @Autowired private ItemPageService itemPageService; //更新状态 审核通过 或驳回 public void updateStatus(Long[] ids,String status){ Goods goods = new Goods(); goods.setAuditStatus(status); for (Long id : ids) { goods.setId(id); goodsDao.updateByPrimaryKeySelective(goods); //判断是否为审核通过 if("1".equals(status)){ //保存商品信息到索引库 importList(id); //静态化 itemPageService.genItemHtml(id); } } } |
5.2 搜索系统与商品详细页对接
修改search-web 的search.html，修改点击图片的链接为http://localhost:9001/{{item.goodsId}}.html
说明：商品详细页是静态页，所以在开发阶段我们可以使用tomcat来进行测试。部署在生产环境是部署在Nginx中。