网页静态化-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 = “
q
u
e
r
y
"
;
这
行
代
码
加
上
n
u
l
l
值
处
理
,
修
改
为
v
a
r
s
e
a
r
c
h
V
a
l
u
e
=
"
{query}";这行代码加上null值处理,修改为var _searchValue = "
query";这行代码加上null值处理,修改为varsearchValue="{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=" i t e m . p r i c e / 100 " / > < / s t r o n g > 修 改 为 < s t r o n g c l a s s = " p − p r i c e " i d = " j d − p r i c e " > ¥ {item.price / 100 }"/> </strong>修改为<strong class="p-price" id="jd-price">¥ item.price/100"/></strong>修改为<strongclass="p−price"id="jd−price">¥{item.price / 100 }。将下面这段代码
<c:forEach items="
i
t
e
m
.
i
m
a
g
e
s
"
v
a
r
=
"
p
i
c
"
v
a
r
S
t
a
t
u
s
=
"
s
t
a
t
u
s
"
>
<
c
:
c
h
o
o
s
e
>
<
c
:
w
h
e
n
t
e
s
t
=
"
{item.images}" var="pic" varStatus="status"> <c:choose> <c:when test="
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>接着将 i t e m P a r a m 修 改 为 {itemParam}修改为 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)注意:为了后续的学习,这里只是演示如何生成静态页面,因为需要先生成静态页面才能访问,生成比较麻烦,所以后面的学习依旧使用动态页面展示商品详情。