上节课我们一起学习了网页静态化的方案,这节课我们一起学习下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值处理,修改为var _searchValue = "${query!}";
下面我们把ftl目录下的item.jsp,把名字修改为item.ftl,然后打开这个文件,把头部所有"<%@"的引用都删掉,把"<jsp:include page="commons/header.jsp" />"修改为"<#include "commons/header.ftl" />"。将价格这一行代码<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.ftl" />
下面我们改造error目录下的exception.jsp,将它的名字修改为exception.ftl,将头部的"<%@"开头的引用都删除掉,然后将<jsp:include page="../commons/footer.jsp" />修改为<#include "../commons/footer.ftl" />
这样模板改造便完成了。