淘淘商城——网页静态化——把jsp改造为freemarker模板

上文我们分析了商品详情页面静态化方案，本文我将带着大家把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" />，如下图所示。

这样模板改造便完成了。