購物商城---freemarker在項目中的應用

一
1.經過模板+數據–》生成靜態化頁面
2.缺點：數據不實時
3.適用於於數據長時間不更新的狀況

2、在項目中搭建freemarker
freemarker.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">


    <!--配置freemarker的實現類 -->
    <bean id="staticPageService" class="cn.zhou.core.service.staticpage.StaticPageServiceImpl">
        <!-- set注入 -->
        <property name="freeMarkerConfigurer">
            <bean  class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
                <!--配置模板加載路徑 -->
                <property name="templateLoaderPath" value="/WEB-INF/ftl/"></property>
                <!--配置讀取模板的語言格式 -->
                <property name="defaultEncoding" value="UTF-8"></property>
            </bean>
        </property>
    </bean>
</beans>

jar包

<dependency>
            <groupId>freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.9</version>
        </dependency>

適用於單獨某個網頁的靜態化 這裏對productDetail.html作靜態化
調用：生產靜態化界面了，下次訪問設置不去controller層，直接跳轉靜態化頁面

/** * * 生成靜態頁面 * * @author Administrator * */ // 實現接口ServletContextAware，是爲了獲取servletContext，進而獲取項目路徑 public class StaticPageServiceImpl implements StaticPageService, ServletContextAware { // @Autowired // private Configuration conf;//注入配置對象 private Configuration conf; // 不用註解注入，set注入 // private FreeMarkerConfigurer freeMarkerConfigurer;//注入配置對象 // freeMarkerConfig 註解獲得，獲得後經過getConfiguration（），將值注入conf,因此conf也不要註解 public void setFreeMarkerConfigurer(FreeMarkerConfigurer freeMarkerConfigurer) { this.conf = freeMarkerConfigurer.getConfiguration(); } // 靜態方法，rootMap填充數據 public void productIndex(Map<String, Object> rootMap,Integer id) { // conf.setDirectoryForTemplateLoading(new File(""));//設置模板加載路徑，已經在freemark.xml中配置 // 獲取模板 // 輸出流 從內存寫到磁盤中UTF-8格式 Writer out = null; String path = getPath("/html/product/"+id+".html"); File file=new File(path); // /html/product/這個文件不存在 if(!file.getParentFile().exists()){ //建立/html/product/文件夾，mkdirs多級建立 file.getParentFile().mkdirs(); } try { // 從從磁盤讀到內存中UTF-8格式,已經在freemark.xml中配置 //模板：productDetail.html 實際是/WEB-INF/ftl/productDetail.html  Template template = conf.getTemplate("productDetail.html"); out = new OutputStreamWriter(new FileOutputStream(file), "UTF-8"); //填充數據 template.process(rootMap, out); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } finally { if (out != null) { try { out.flush(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } // 獲取名稱對應的路徑 public String getPath(String name) { return servletContext.getRealPath(name); } private ServletContext servletContext; public void setServletContext(ServletContext servletContext) { // set注入 this.servletContext = servletContext; } } 

靜態化頁面在項目中的生成，這裏以商品上架的時候，同時生產靜態化頁面

//商品上架
    @RequestMapping(value="/product/isShow.do")
    public String isShow(Integer[] ids,Integer pageNo,String name,Integer brandId,Integer isShow,ModelMap modelMap){
        //Integer[] ids 爲商品id數組
        Product product=new Product();
        //設置上架
        product.setIsShow(1);
        if(ids!=null && ids.length>0){
            for (Integer id : ids) {
                product.setId(id);
                productService.updateProductByKey(product);

                //freemarker靜態化
                Map<String, Object> rootMap=new HashMap<String, Object>();
                // sku集合
                List<Sku> skuList = skuService.getStock(id);
                rootMap.put("skuList", skuList);
                // 商品集合
                  product = productService.getProductByKey(id);
                  rootMap.put("product", product);
                // 顏色集合
                List<Color> colors = new ArrayList<Color>();
                //去重複
                for (Sku sku : skuList) {
                    //判斷集合中是否已經有此顏色對象了
                    if (!colors.contains(sku.getColor())) {
                        colors.add(sku.getColor());
                    }
                }
                rootMap.put("colors", colors);
                //生成靜態化頁面
                staticPageService.productIndex(rootMap, id);
            }
        }

頁面模板

<script type="text/javascript"> //刷新頁面第一個a標籤觸發click事件 $(function(){ $("#colors a:first").trigger("click"); //商品購買+- //商品+，jquery點擊觸發事件 $("#add").click(function(){ //獲取件數 var num=$("#num").val(); num++; if(num>buyLimit){ alert("此商品只能買"+buyLimit+"件"); return; } //賦值 $("#num").val(num); }); //商品-，jquery點擊觸發事件 $("#sub").click(function(){ //獲取件數 var num=$("#num").val(); num--; if(num==0){ return; } //賦值 $("#num").val(num); }); }) //全局變量 var colorId;//顏色Id var skuId;//skuId var buyLimit;//限購 //點擊選擇顏色id爲顏色的ID function colorToRed(target,id){ //給全局變量賦值 colorId=id; //清理其餘顏色 $("#colors a").each(function(){ $(this).attr("class","changToWhite"); }); //先清理尺碼 都變成不可點 $("#sizes a").each(function(){ $(this).attr("class","not-allow"); }); //點擊變紅 $(target).attr("class","changToRed"); //第一次尺寸默認變紅 var flag=0; //判斷尺寸 <!--靜態化填充數據 --> <#list skuList as sku> //判斷sku中與當前選擇顏色Id同樣的，將獲取全部的尺碼 if(id=='${sku.colorId}'){ if(flag==0){//第一個尺寸，並獲取第一個尺寸的價格 //第一次尺寸默認變紅,例如海藍色id=2的有尺寸 s,m,x,那麼s位紅，m,x爲白 $("#"+'${sku.size}').attr("class","changToRed"); flag=1; //填充數據 //巴巴價 $("#price").html('${sku.skuPrice}'); //市場價 $("#mprice").html('${sku.marketPrice}'); //運費 $("#fee").html('${sku.deliveFee}'); //庫存 $("#stock").html('${sku.stockInventory}'); //skuid skuId='${sku.id}'; //限購 buyLimit='${sku.skuUpperLimit}'; //默認給購買件數賦值爲1 $("#num").val(1); }else{ //非第一次尺寸默認變白,例如海藍色id=2的有尺寸 s,m,x,那麼s位紅，m,x爲白 $("#"+'${sku.size}').attr("class","changToWhite"); } } </#list> } //點擊選擇顏色id爲尺碼s,m,l... function sizeToRed(target,id){ //先清理尺碼 都變成不可點 //若是當前是不可點的不能點 var cc=$(target).attr("class"); if(cc=="not-allow"){ return; } $("#sizes a").each(function(){ var c=$(this).attr("class"); //排除了不開點的後，其他的都變白 if(c!="not-allow"){ $(this).attr("class","changToWhite"); } }); //當前的變紅 $(target).attr("class","changToRed"); <!--靜態化填充數據 --> <#list skuList as sku > //判斷sku中與當前選擇顏色Id同樣的，將獲取全部的尺碼 if(colorId=='${sku.colorId}'&&id=='${sku.size}'){ //填充數據 //巴巴價 $("#price").html('${sku.skuPrice}'); //市場價 $("#mprice").html('${sku.marketPrice}'); //運費 $("#fee").html('${sku.deliveFee}'); //庫存 $("#stock").html('${sku.stockInventory}'); //skuid skuId='${sku.id}'; //限購 buyLimit='${sku.skuUpperLimit}'; //默認給購買件數賦值爲1 $("#num").val(1); } </#list> } //加入購物車 function addCart(){ alert("添加購物車成功!"); } //當即購買 function buy(){ window.location.href='cart.jsp'; //skuId productId 件數 限購 } </script>
</head>
<body>

    <div class="w ofc mt">
        <div class="l">
            <div class="showPro">
                <div class="big">
                    <a id="showImg" class="cloud-zoom" href="${product.img.allUrl }" rel="adjustX:10,adjustY:-1"><img alt="" src="${product.img.allUrl }"></a>
                </div>
            </div>
        </div>
        <div class="r" style="width: 640px">
            <ul class="uls form">
                <!--靜態化填充數據 -->
                <li><h2>${product.name }</h2></li>
                <li><label>巴 巴 價：</label>
                    <span class="word"><b class="f14 red mr" id="price">￥128.00</b>(市場價:<del id="mprice">￥150.00</del>)</span></li>
                <li><label>商品評價：</label>
                    <span class="word"> <span class="val_no val3d4" title="4分">4分 </span> <var class="blue">(已有888人評價)</var>
                    </span> </li>
                <li><label>運 費：</label><span class="word" id="fee">10元</span></li>
                <li><label>庫 存：</label><span class="word" id="stock">100</span><span class="word">件</span></li>
                <li><label>選擇顏色：</label>

                    <div id="colors" class="pre spec">
                    <!--靜態化填充數據 -->
                        <#list colors as color> 
                        <a onclick="colorToRed(this,${color.id })" href="javascript:void(0)" title="${color.name }" class="changToWhite">
                            <img width="25" height="25" data-img="1" src="/res/img/pic/ppp00.jpg" alt="${color.name }">
                            <i>${color.name}</i>
                        </a> 
                        </#list>

                    </div></li>
                <li id="sizes"><label>尺 碼：</label> <a href="javascript:void(0)" class="not-allow" onclick="sizeToRed(this,'S')" id="S">S</a> <a  href="javascript:void(0)" class="not-allow" onclick="sizeToRed(this,'M')" id="M">M</a> <a  href="javascript:void(0)" class="not-allow" onclick="sizeToRed(this,'L')" id="L">L</a> <a  href="javascript:void(0)" class="not-allow" onclick="sizeToRed(this,'XL')" id="XL">XL</a> <a  href="javascript:void(0)" class="not-allow" onclick="sizeToRed(this,'XXL')" id="XXL">XXL</a></li>
                <li><label>我 要 買：</label>
                 <a id="sub" class="inb arr" style="border: 1px solid #919191; width: 10px; height: 10px; line-height: 10px; text-align: center;" title="減" href="javascript:void(0);">-</a> 
                    <input id="num" type="text" value="1" name="" size="1" readonly="readonly">
                    <a id="add" class="inb arr" style="border: 1px solid #919191; width: 10px; height: 10px; line-height: 10px; text-align: center;" title="加" href="javascript:void(0);">+</a>
                </li>
                <li class="submit"><input type="button" value="" class="hand btn138x40" onclick="buy();" />
                <input type="button" value="" class="hand btn138x40b" onclick="addCart()" /></li>
            </ul>
        </div>
    </div>

</body>