网页静态化-freemarker模板改造、网页静态化-业务逻辑及测试

网页静态化-freemarker模板改造

上节课我们一起学习了网页静态化的方案，这节课我们一起学习下freemarker模板改造。

我们需要把原来属于jsp下面的文件都改造成静态网页，把taotao-item-web工程下的jsp目录下的所有文件都放到ftl目录下，如下图所示。

先修改commons目录下的shortcut.jsp，将它的名字改为shortcut.ftl，然后将文件头部的<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>去掉。该文件其它不用修改。

接着修改commons目录下的header.jsp，将它的名字改为header.ftl，把头部<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>去掉，然后将<jsp:include page=“shortcut.jsp” />这行代码修改为<#include “shortcut.ftl” />

接着修改commons目录下的footer-links.jsp，将它的名字修改为footer-links.ftl，打开它，将头部<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>这行代码去掉。

接着我们修改commons目录下的footer.jsp，将它的名字修改为footer.ftl，打开它，将头部<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>这行代码去掉。将<jsp:include page=“footer-links.jsp”></jsp:include>这行代码修改为<#include “footer-links.ftl”/>。将var _searchValue = “$query";这行代码加上null值处理，修改为va{r}_{s}earchValue="${query!}”;

下面我们把ftl目录下的item.jsp，把名字修改为item.ftl，然后打开这个文件，把头部所有"<%@“的引用都删掉，把”<jsp:include page=“commons/header.jsp” />“修改为”<#include “commons/header.ftl” />"。将价格这一行代码￥<fmt:formatNumber groupingUsed=“false” maxFractionDigits=“2” minFractionDigits=“2” value="$item.price/100"/></strong>修改为<strongclass="p-price"id="jd-price">￥${item.price / 100 }。将下面这段代码

<c:forEach items="$item.images"var="pic"varStatus="status"><c:choose><c:whentest="${status.index == 0 }">

• 
  
  
• 
  </c:when>
  <c:otherwise>
  
• 
  
  
• 
  </c:otherwise>
  </c:choose>
  </c:forEach>
  修改为如下：
  <#list item.images as pic>
  <#if pic_index == 0>
  
• 
  
  
• 
  <#else>
  
• 
  
  
• 
  </#if>
  </#list>

  接着将$itemParam修改为${itemParam!}。将<jsp:include page=“commons/footer.jsp” />这行代码修改为<#include “commons/footer.ftl” />

  下面我们改造error目录下的exception.jsp，将它的名字修改为exception.ftl，将头部的"<%@“开头的引用都删除掉，然后将<jsp:include page=”…/commons/footer.jsp" />修改为<#include “…/commons/footer.ftl” />

  这样模板改造便完成了。

  网页静态化-业务逻辑及测试

  首先，需要在taotao-item-web工程添加对activemq的依赖

  下面我们需要把taotao-search-web工程下的applicationContext-activemq.xml文件拷贝到taotao-item-web工程下的spring目录下并且更名为springmvc-activemq.xml，要加载spring目录下的两个xml文件则需要修改taotao-item-web工程的web.xml文件，将原来扫描的springmvc.xml修改为springmvc*.xml

  另外springmvc-activemq.xml文件也需要做些修改

  上面配置文件中配置了一个监听器，我们需要创建这么一个监听器，当监听到有添加商品的消息时便去生成静态页面，监听类如下ItemAddMessageListener.java

  代码中输出的文件路径配置在配置文件中

  写完了代码，下面我们来测试一下，先启动五个服务（zookeeper、image、solr、redis、activemq），然后依次启动taotao-manager、taotao-content、taotao-search、taotao-manager-web、taotao-portal-web、taotao-search-web、taotao-item-web工程。启动完后，我们在淘淘商城后台页面添加一个商品

  添加完商品后，我们到静态文件目录下查看生成的静态文件，如下图所示。我们双击生成的静态页面。

  可以看到生成的静态页面是没有样式的，这是因为我们没有把样式文件放到相应的目录下。

  为了让样式好看，我们把taotao-item-web工程的webapp目录下的css、images、js文件拷贝到"E:/freemarker"目录下也就是要与"out"目录在同一级别。

  要想看到页面正常效果，我们可以先使用windows版的nginx，大家可以到nginx官网下载一个windows版本的安装包，我下载的是1.8.1版本，解压后进入它的conf目录下，打开nginx.conf文件，修改location下面的root目录为"E:/freemarker/"。

  修改完后，回到上一级目录，双击nginx.exe运行nginx，会看到一闪而过，这时nginx便启动了。

  下面我们便使用nginx来访问我们的静态网页，在地址栏中输入http://localhost/out/149520429903365.html即可看到如下图所示界面，页面正常展示出了商品详情页面。

  
  

  商品详情页面静态化总结

  
  发送的消息就是：商品的ID

  网页的静态化方案
  输出文件的名称：商品id+“.html”
  输出文件的路径：工程外部的任意目录。
  网页访问：使用nginx访问网页。在此方案下tomcat只有一个作用就是生成静态页面。
  工程部署：可以把taotao-item-web部署到多个服务器上。
  生成静态页面的时机：商品添加后，生成静态页面。可以使用Activemq，订阅topic（商品添加）
  
  多台服务器订阅一个主题（topic） 多台服务器生成的html都是一样。

  接收消息：
   编写listener （实现messagelistener接口）
   配置消息相关的配置文件(包括目的地，默认的消息监听容器)
   获取消息中的商品ID (查询出数据集商品的基本信息和描述信息)

  生成静态页面需要（模板 和 数据 ）

  生成静态网页的逻辑：
  做的事情：准备模板文件，准备数据集，数据集由消息获取商品ID查询数据库获取。

  1、配置freemarker 的配置文件（模板的目录，默认字符集）
  2、获取configuration
  3、设置数据集
  4、加载模板
  5、设置输出目录文件(FileWriter)
  6、生成文件，关闭流（输出文件的名称：商品id+“.html”）
  7、部署http服务器（推荐使用nginx）

  注意：为了后续的学习，这里只是演示如何生成静态页面，因为需要先生成静态页面才能访问，生成比较麻烦，所以后面的学习依旧使用动态页面展示商品详情。