学习淘淘商城第七十一课（网页静态化-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值处理，修改为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" />

        这样模板改造便完成了。