上文我们分析了商品详情页面静态化方案,本文我将带着大家把jsp页面改造为freemarker模板。
我们需要把原来属于jsp目录下面的文件都改造成freemarker模板,把taotao-item-web工程的jsp目录下的所有文件都放到ftl目录下,如下图所示。
先修改commons目录下的shortcut.jsp,将它的名字改为shortcut.htm,然后将文件头部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
去掉,该文件其它地方不用修改,如下图所示。
接着修改commons目录下的header.jsp,将它的名字改为header.htm,把文件头部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
去掉,然后将<jsp:include page="shortcut.jsp" />
这行代码修改为<#include "shortcut.htm" />
,如下图所示。
接着修改commons目录下的footer-links.jsp,将它的名字修改为footer-links.htm,打开它,把文件头部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
这行代码去掉,如下图所示。
接着我们修改commons目录下的footer.jsp,将它的名字修改为footer.htm,打开它,把文件头部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
这行代码去掉,如下图所示。
删除掉之后,找到<jsp:include page="footer-links.jsp"></jsp:include>
这行代码,并将其改为<#include "footer-links.htm"/>
,将var _searchValue = "${query}";
这行代码加上null值处理,即修改为var _searchValue = "${query!}";
,如下图所示。
下面我们把ftl目录下的item.jsp,把名字修改为item.htm,然后打开这个文件,把头部所有<%@
的引用都删掉,如下图所示。
然后找到<jsp:include page="commons/header.jsp" />
这行代码,并将其修改为<#include "commons/header.htm" />
,如下图所示。
找到价格这一行代码,如下所示:
<strong class="p-price" id="jd-price">¥<fmt:formatNumber groupingUsed="false" maxFractionDigits="2" minFractionDigits="2" value="${item.price / 100 }"/> </strong>
将其修改为:
<strong class="p-price" id="jd-price">¥${item.price / 100 }</strong>
如下图所示:
接着找到下面这段代码:
<c:forEach items="${item.images}" var="pic" varStatus="status">
<c:choose>
<c:when test="${status.index == 0 }">
<li>
<img data-img="1" class="img-hover" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
</li>
</c:when>
<c:otherwise>
<li>
<img data-img="1" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
</li>
</c:otherwise>
</c:choose>
</c:forEach>
将其修改为:
<#list item.images as pic>
<#if pic_index == 0>
<li>
<img data-img="1" class="img-hover" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
</li>
<#else>
<li>
<img data-img="1" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
</li>
</#if>
</#list>
接着再找到${itemParam}
,并将其修改为${itemParam!}
,如下图所示。
最后再找到<jsp:include page="commons/footer.jsp" />
这句代码,将其修改为<#include "commons/footer.htm" />
,如下图所示。
下面我们改造error目录下的exception.jsp,将它的名字修改为exception.htm,将头部的<%@
开头的引用都删除掉,如下图所示。
然后找到<jsp:include page="../commons/footer.jsp" />
这句代码,并将其修改为<#include "../commons/footer.htm" />
,如下图所示。
这样模板改造便完成了。