Freemarker讲解

FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成XML，JSP或Java 等。

 

页面的静态化  有的较多

中的注释都是以#号表示的

 

 

第一个项目结构

代码的实现

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package cn.itcast.freemarker.model;  
  2.   
  3. public class Group {  
  4.     private String name;  
  5.       
  6.     String id;  
  7.   
  8.     public String getName() {  
  9.         return name;  
  10.     }  
  11.   
  12.     public void setName(String name) {  
  13.         this.name = name;  
  14.     }  
  15.   
  16.     public Group(String name) {  
  17.         super();  
  18.         this.name = name;  
  19.     }  
  20.   
  21.     public Group() {  
  22.     }  
  23.       
  24.     public void sayHello(){  
  25.         System.out.println("hello");  
  26.     }  
  27.       
  28.   
  29.     public void sayHello2(){  
  30.         System.out.println("hello");  
  31.     }  
  32.       
  33.     public void sayHello1(){  
  34.         System.out.println("hello");  
  35.           
  36.         System.out.println("hello2");  
  37.           
  38.         System.out.println("hello3");  
  39.     }  
  40.       
  41.     public void test(){  
  42.   
  43.         System.out.println("lisi");  
  44.   
  45.         System.out.println("wangwu");  
  46.         System.out.println("wangwu");  
  47.     }  
  48. }  

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package cn.itcast.freemarker.model;  
  2.   
  3. public class User {  
  4.     private int id;  
  5.     private String name;  
  6.     private int age;  
  7.     private Group group;  
  8.       
  9.     private String ddd;  
  10.       
  11.     public Group getGroup() {  
  12.         return group;  
  13.     }  
  14.     public void setGroup(Group group) {  
  15.         this.group = group;  
  16.     }  
  17.     public int getId() {  
  18.         return id;  
  19.     }  
  20.     public void setId(int id) {  
  21.         this.id = id;  
  22.     }  
  23.     public String getName() {  
  24.         return name;  
  25.     }  
  26.     public void setName(String name) {  
  27.         this.name = name;  
  28.     }  
  29.     public int getAge() {  
  30.         return age;  
  31.     }  
  32.     public void setAge(int age) {  
  33.         this.age = age;  
  34.     }  
  35.       
  36.       
  37.     public void remove(){  
  38.           
  39.     }  
  40. }  

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package cn.itcast.util;  
  2.   
  3. import java.io.BufferedWriter;  
  4. import java.io.File;  
  5. import java.io.FileOutputStream;  
  6. import java.io.OutputStreamWriter;  
  7. import java.io.Writer;  
  8. import java.util.Map;  
  9.   
  10. import freemarker.template.Configuration;  
  11. import freemarker.template.Template;  
  12.   
  13. public class FMutil {  
  14.       
  15.     /** 
  16.      *  
  17.      * @param ftlName:模板名称 
  18.      * @param fileName：生成的页面名称 
  19.      * @param map：数据 
  20.      * @throws Exception 
  21.      */  
  22.     public void ouputFile(String ftlName, String fileName,  Map<String, Object> map) throws Exception{  
  23.         //创建fm的配置  
  24.         Configuration config = new Configuration();  
  25.         //指定默认编码格式  
  26.         config.setDefaultEncoding("UTF-8");  
  27.         //设置模板的包路径,包的路径使用/来分隔  
  28.         config.setClassForTemplateLoading(this.getClass(), "/ftl");  
  29.         获得包的模板  
  30.         Template template = config.getTemplate(ftlName);  
  31.         //指定文件输出的路径  
  32.         String path = "D:/fm";  
  33.         //定义输出流，注意的必须指定编码  
  34.         Writer writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File(path+"/"+fileName)),"UTF-8"));  
  35.         //生成模板  
  36.         template.process(map, writer);  
  37.     }  
  38.   
  39. }  


 

fm1.ftl

 

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. ${username}  

fm2.ftl

 

 

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <h1>${username}</h1>  
  9. </body>  
  10. </html>  

fm3.ftl

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <h1>${user.id}-------${user.name}-------${user.age}</h1>  
  9.   
  10.   
  11. <#-- 注释的写法-->  
  12.     <#if user.age lt 10>  
  13.         小孩  
  14.     <#elseif user.age lt 16>  
  15.         未成年  
  16.     <#else>  
  17.         已经成年  
  18.     </#if>  
  19.     
  20. </body>  
  21. </html>  


fm4.ftl

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <#list userList as user>  
  9.     <#-- list的索引变量名+"_index" -->  
  10.     ${user_index}---------${user.id}-----${user.name}-------${user.age}<br>  
  11. </#list>  
  12.   
  13. </body>  
  14. </html>  


fm5.ftl

 

 

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. <#include "/top1.ftl">  
  7. </head>  
  8. <body>  
  9. <#list userList as user>  
  10. ${user.id}-----${user.name}-------${user.age}<br>  
  11. </#list>  
  12. </body>  
  13. </html>  

fm6.ftl

 

 

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7. </head>  
  8. <body>  
  9. <#-- 如果所取的属性值为空默认不处理会报错，如果想显示空（xxx.yy）！-->  
  10. ${user.id}-----${user.name}-------${user.age}-----${(user.group)!}<br>  
  11.   
  12.   
  13. ${user.group!"空值"}  
  14. ${(user.group.name)!}  
  15. <#-- 三层以上不如不加括号用！直接取值不成功必须加括号，按规范无论几层都加括号-->  
  16.   
  17.   
  18. ${(a.b)!}  
  19.   
  20. <#-- ()??非空判断-->  
  21.   
  22. <#if (user.group)??>  
  23. 不为空  
  24. <#else>  
  25. 为空  
  26. </#if>  
  27.   
  28. </body>  
  29. </html>  

fm6.ftl

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7. </head>  
  8. <body>  
  9.   
  10. <#assign name="zhangsan">  
  11. ${name}  
  12.   
  13. <#assign num=10>  
  14. ${num+10}  
  15.    
  16. <#assign num="10">  
  17. ${num+10}  
  18. <#--布尔类型必须要转成字符串来输出-->  
  19. <#assign is=true>  
  20. ${is?string}  
  21.   
  22. ${(a.b)???string}  
  23.   
  24. <#-- 日期需要转成字符串输出 -->  
  25. ${now?string("yyyy-MM-dd HH:mm:ss")}  
  26.   
  27. <#--如果变量重复后边的变量值会覆盖前面的-->  
  28. <#assign bir="1985-04-22 12:33:33"?date("yyyy-MM-dd HH:mm:ss")>  
  29. ${bir}  
  30.   
  31. <br>  
  32. <#assign bir="1985-04-22 12:33:33"?datetime("yyyy-MM-dd HH:mm:ss")>  
  33.   
  34. ${bir}  
  35.   
  36. <#-- 把html转成文本类型 -->  
  37. ${"<br/>"?html}  
  38.   
  39. ${"abcd"?left_pad(10,"-")}  
  40.   
  41. ${1.6?int}  
  42.   
  43.   
  44. </body>  
  45. </html>  

fm7.ftl

 

 

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7. </head>  
  8. <body>  
  9.   
  10. <#assign name="zhangsan">  
  11. ${name}  
  12.   
  13. <#assign num=10>  
  14. ${num+10}  
  15.    
  16. <#assign num="10">  
  17. ${num+10}  
  18. <#--布尔类型必须要转成字符串来输出-->  
  19. <#assign is=true>  
  20. ${is?string}  
  21.   
  22. ${(a.b)???string}  
  23.   
  24. <#-- 日期需要转成字符串输出 -->  
  25. ${now?string("yyyy-MM-dd HH:mm:ss")}  
  26.   
  27. <#--如果变量重复后边的变量值会覆盖前面的-->  
  28. <#assign bir="1985-04-22 12:33:33"?date("yyyy-MM-dd HH:mm:ss")>  
  29. ${bir}  
  30.   
  31. <br>  
  32. <#assign bir="1985-04-22 12:33:33"?datetime("yyyy-MM-dd HH:mm:ss")>  
  33.   
  34. ${bir}  
  35.   
  36. <#-- 把html转成文本类型 -->  
  37. ${"<br/>"?html}  
  38.   
  39. ${"abcd"?left_pad(10,"-")}  
  40.   
  41. ${1.6?int}  
  42.   
  43.   
  44. </body>  
  45. </html>  

productDetail.ftl

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="author" content="http://www.asiainfo-linkage.com/" />  
  6. <meta name="copyright" content="asiainfo-linkage.com 版权所有，未经授权禁止链接、复制或建立镜像。" />  
  7. <meta name="description" content="中国移动通信 name.com"/>  
  8. <meta name="keywords" content="中国移动通信 name.com"/>  
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0"/>  
  10. <meta name="apple-mobile-web-app-capable" content="yes" />  
  11. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />  
  12. <title>商品详细_移动商城_中国移动通信</title>  
  13. <link rel="icon" href="/favicon.ico" type="image/x-icon" />  
  14. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />  
  15. <link rel="search" type="application/opensearchdescription+xml" href="../opensearch.xml" title="移动购物" />  
  16. <link rel="stylesheet" href="../res/css/style.css" />  
  17. <script src="../res/js/jquery.js"></script>  
  18. <script src="../res/js/com.js"></script>  
  19. <script type="text/javascript">  
  20. <#assign path="http://localhost:8088/ecps-portal">  
  21. <#assign upload="http://localhost:8080/pic/">  
  22. $(function(){  
  23.     //拿到第一个a链接  
  24.     var firstA =  $(".box_orange li div a:first");  
  25.     //获取到sku的价钱  
  26.     var skuPrice = firstA.attr("skuPrice");  
  27.     //获取到市场价  
  28.     var marketPrice = firstA.attr("marketPrice");  
  29.     //设置sku价钱和市场价  
  30.     $("#skuPrice").html("￥"+skuPrice);  
  31.     $("#marketPrice").html("￥"+marketPrice);  
  32.     //获取sku的Id  
  33.     var skuId = firstA.attr("skuId");  
  34.     //验证sku的库存  
  35.     $.ajax({  
  36.         url:"${path}/item/validateStock.do",  
  37.         type:"post",  
  38.         dataType:"text",  
  39.         data:{  
  40.             skuId:skuId  
  41.         },  
  42.         success:function(responseText){  
  43.             if(responseText == "no"){  
  44.                 //如果没有库存对购买和加入购物车的按钮来做隐藏  
  45.                 $("#isStock").html("缺货");  
  46.                 $("#buyNow").hide();  
  47.                 $("#addCart").hide();  
  48.             }else{  
  49.                 //如果有库存对购买和加入购物车的按钮来做显示  
  50.                 $("#isStock").html("有货");  
  51.                 $("#buyNow").show();  
  52.                 $("#addCart").show();  
  53.             }  
  54.         },  
  55.         error:function(){  
  56.             alert("系统错误");  
  57.         }  
  58.           
  59.     })  
  60.     //点击sku的a链接的时候  
  61.     $(".box_orange li a").click(function(){  
  62.         //移除所用选中的样式  
  63.         $(".box_orange li div a").each(function(){  
  64.             $(this).removeClass();  
  65.         });  
  66.         //点击的sku加上选中样式  
  67.         $(this).attr("class","here");  
  68.         var skuPrice = $(this).attr("skuPrice");  
  69.         var marketPrice = $(this).attr("marketPrice");  
  70.         $("#skuPrice").html("￥"+skuPrice);  
  71.         $("#marketPrice").html("￥"+marketPrice);  
  72.         var skuId = $(this).attr("skuId");  
  73.         $.ajax({  
  74.             url:"${path}/item/validateStock.do",  
  75.             type:"post",  
  76.             dataType:"text",  
  77.             data:{  
  78.                 skuId:skuId  
  79.             },  
  80.             success:function(responseText){  
  81.                 if(responseText == "no"){  
  82.                     $("#isStock").html("缺货");  
  83.                     $("#buyNow").hide();  
  84.                     $("#addCart").hide();  
  85.                 }else{  
  86.                     $("#isStock").html("有货");  
  87.                     $("#buyNow").show();  
  88.                     $("#addCart").show();  
  89.                 }  
  90.             },  
  91.             error:function(){  
  92.                 alert("系统错误");  
  93.             }  
  94.               
  95.         })  
  96.           
  97.     });  
  98.   
  99.     $("#loginAlertIs").click(function(){  
  100.         tipShow('#loginAlert');  
  101.     });  
  102.   
  103.     $("#promptAlertIs").click(function(){  
  104.         tipShow('#promptAlert');  
  105.     });  
  106.   
  107.     $("#transitAlertIs").click(function(){  
  108.         tipShow('#transitAlert');  
  109.     });  
  110.   
  111.     var $smallList = $(".smallList"),  
  112.         $smallL = $(".smallL"),  
  113.         $smallR = $(".smallR"),  
  114.         smallLen = $(".smallList a").length,  
  115.         smallNum = 0;  
  116.     $smallList.css("width",(smallLen*60));  
  117.     $smallL.live("click",function(){  
  118.         if(smallNum > 0){  
  119.             $smallList.stop(true,true).animate({  
  120.                 "left":"+="+60  
  121.             },400);  
  122.             smallNum--;  
  123.         }  
  124.     });  
  125.     $smallR.live("click",function(){  
  126.         if(smallNum <= (smallLen-5)){  
  127.             $smallList.stop(true,true).animate({  
  128.                 "left":"-="+60  
  129.             },400);  
  130.             smallNum++;  
  131.         }  
  132.     });  
  133.   
  134.     $('#ecpsShareIcon a').click(function(){  
  135.           
  136.         var type   = $(this).attr('class');  
  137.           
  138.         var title  = document.title;  
  139.         var url    = window.location.href;  
  140.         var imgUrl = '';  
  141.         var href   = '';  
  142.   
  143.         var share  = [  
  144.             {id:'0',type:'sinawb',name:'分享到新浪微博', href: ['http://v.t.sina.com.cn/share/share.php?url=',  encodeURIComponent(url), '&title=', encodeURIComponent(title)].join(''), bp: '0px 0px'},  
  145.             {id:'1',type:'qqwb',name: '分享到腾讯微博', href: ['http://v.t.qq.com/share/share.php?url=',  encodeURIComponent(url), '&title=', encodeURIComponent(title)].join(''), bp: '0px -16px'},  
  146.             {id:'2',type:'renren',name: '分享到人人网', href: ['http://www.connect.renren.com/share/sharer?url=',  encodeURIComponent(url), '&title=', encodeURIComponent(title)].join(''), bp: '0px -32px'},  
  147.             {id:'3',type:'qqzone',name: '分享到QQ空间', href: ['http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=',  encodeURIComponent(url), '&title=', encodeURIComponent(title)].join(''), bp: '0px -48px'},  
  148.             {id:'4',type:'sohuwb',name: '分享到搜狐微博', href: ['http://t.sohu.com/third/post.jsp?content=utf-8&url=',  encodeURIComponent(url), '&title=', encodeURIComponent(title)].join(''), bp: '0px -64px'},  
  149.             {id:'5',type:'',name: '分享到开心网', href: ['http://www.kaixin001.com/repaste/bshare.php?rurl=',  encodeURIComponent(url), '&rtitle=', encodeURIComponent(title)].join(''), bp: '0px -80px'},  
  150.             {id:'6',type:'',name: '分享到51社区', href: ['http://share.51.com/share/outSiteShare.php?uri=' , encodeURIComponent(url) ,'&title=' ,encodeURIComponent(title)].join(''), bp: '0px -96px'}  
  151.         ];  
  152.   
  153.         for(var i=0; i<share.length; i++){  
  154.             if(type == share[i].type){  
  155.                 href = share[i].href;  
  156.             };  
  157.         }  
  158.   
  159.         if(type == 'copy'){  
  160.   
  161.             var copyText = url.replace(/[.]{1}\d[.]{1}/gi, ".");  
  162.             copyText = copyText.replace(/\.+u+\d+\.+html/,".html");  
  163.             copyText = title + "\r\n" + copyText + "\r\n";  
  164.             if (window.clipboardData){  
  165.                 window.clipboardData.setData("Text", copyText);  
  166.                 alert('复制成功！');  
  167.             }  
  168.         }else{  
  169.             $(this).attr('href',href);  
  170.         }  
  171.   
  172.     });  
  173.   
  174.     $('.sub').mousedown(function(){  
  175.         var num = $('.num').val();  
  176.         --num;  
  177.         if(num == 0){  
  178.             $('#sub_add_msg').html('您填写的数字超过购买下限，单次购买下限为<var>1</var>件。');  
  179.             $('#sub_add_msg').show();  
  180.             return;  
  181.         }else{  
  182.             $('#sub_add_msg').hide();     
  183.         }  
  184.         $('.num').val(num);  
  185.           
  186.     });  
  187.   
  188.     $('.add').mousedown(function(){  
  189.         var num = $('.num').val();  
  190.         ++num;  
  191.         if(num == 6){  
  192.             $('#sub_add_msg').html('您填写的数字超过购买上限，单次购买上限为<var>5</var>件。');  
  193.             $('#sub_add_msg').show();  
  194.             return;  
  195.         }else{  
  196.             $('#sub_add_msg').hide();  
  197.         }  
  198.         $('.num').val(num);  
  199.     });  
  200.       
  201. });  
  202. function buy(){  
  203.     window.location.href = "./shop/confirmProductCase.jsp";  
  204. }  
  205.   
  206. function addCart(){  
  207.     window.location.href = "./shop/car.jsp";  
  208. }  
  209. </script>  
  210. </head>  
  211. <body>  
  212. <div id="tipAlert" class="w tips">  
  213.     <p class="l">本网站将于4月11日12:00进行系统维护，维护期间，本站将暂停业务办理等相关业务，敬请见谅。</p>  
  214.     <p class="r"><a href="javascript:void(0);" title="关闭" onclick="$('#tipAlert').hide();"></a></p>  
  215. </div>  
  216.   
  217. <div class="bar"><div class="bar_w">  
  218.     <p class="l">  
  219.         <!-- 未登录 -->  
  220.         <b class="l">  
  221.             <a href="#" title="个人客户" class="here">个人客户</a>  
  222.             <a href="#" title="企业客户">企业客户</a>  
  223.         </b>  
  224.         <span class="l">  
  225.             欢迎来到中国移动！<a href="javascript:void(0);" title="登录" id="loginAlertIs" class="orange"><samp>[</samp>请登录<samp>]</samp></a> <a href="passport/register.html" title="免费注册">免费注册</a>  
  226.             <a href="javascript:void(0);" id="promptAlertIs" title="promptAlert">promptAlert</a>  
  227.             <a href="javascript:void(0);" id="transitAlertIs" title="transitAlert">transitAlert</a>  
  228.         </span>  
  229.         <!-- 登录后  
  230.         <span class="l">  
  231.             您好，<a href="passport/personalInfo.html" title="13717782727">13717782727</a>！   <a href="#" title="我的账户" class="blue">我的账户</a>   <a href="#" title="我要办理" class="blue">我要办理</a>  <a href="passport/loginOut.html" title="退出" class="orange"><samp>[</samp>退出<samp>]</samp></a>  
  232.         </span>  
  233.         -->  
  234.     </p>  
  235.     <ul class="r uls">  
  236.     <!--  
  237.     <li class="dev"><a href="#" title="我的订单">我的订单</a></li>  
  238.     <li class="dev"><a href="#" title="我的收藏">我的收藏</a></li>  
  239.     <li class="dev"><a href="#" title="帮助中心">帮助中心</a></li>  
  240.     -->  
  241.     <li class="dev"><a href="#" title="在线客服">在线客服</a></li>  
  242.     <li class="dev"><a href="#" title="关于中国移动">关于中国移动</a></li>  
  243.     <li class="dev after"><a href="#" title="English">English</a></li>  
  244.       
  245.     </ul>  
  246. </div></div>  
  247.   
  248. <div class="w header">  
  249.     <h1><a href="http://www.bj.10086.cn" title="中国移动通信">中国移动通信</a></h1>  
  250.     <div class="area">  
  251.         <dl id="city">  
  252.             <dt><a href="javascript:void(0);" title="贵州">贵州<samp class="inb"></samp></a></dt>  
  253.             <dd class="bx hidden">  
  254.                 <div class="tl"></div><div class="tr"></div>  
  255.                 <ul class="ul">  
  256.                 <li><a href="http://www.bj.10086.cn" title="北京">北京</a></li>  
  257.                 <li><a href="http://www.gd.10086.cn" title="广东">广东</a></li>  
  258.                 <li><a href="http://www.sh.10086.cn" title="上海">上海</a></li>  
  259.                 <li><a href="http://www.tj.10086.cn" title="天津">天津</a></li>  
  260.                 <li><a href="http://www.cq.10086.cn" title="重庆">重庆</a></li>  
  261.                 <li><a href="http://www.ln.10086.cn" title="辽宁">辽宁</a></li>  
  262.                 <li><a href="http://www.js.10086.cn" title="江苏">江苏</a></li>  
  263.                 <li><a href="http://www.he.10086.cn" title="河北">河北</a></li>  
  264.                 <li><a href="http://www.sc.10086.cn" title="四川">四川</a></li>  
  265.                 <li><a href="http://www.sn.10086.cn" title="陕西">陕西</a></li>  
  266.                 <li><a href="http://www.sx.10086.cn" title="山西">山西</a></li>  
  267.                 <li><a href="http://www.ha.10086.cn" title="河南">河南</a></li>  
  268.                 <li><a href="http://www.jl.10086.cn" title="吉林">吉林</a></li>  
  269.                 <li><a href="http://www.sd.10086.cn" title="山东">山东</a></li>  
  270.                 <li><a href="http://www.ah.10086.cn" title="安徽">安徽</a></li>  
  271.                 <li><a href="http://www.hn.10086.cn" title="湖南">湖南</a></li>  
  272.                 <li><a href="http://www.gx.10086.cn" title="广西">广西</a></li>  
  273.                 <li><a href="http://www.jx.10086.cn" title="江西">江西</a></li>  
  274.                 <li><a href="http://www.gz.10086.cn" title="贵州">贵州</a></li>  
  275.                 <li><a href="http://www.yn.10086.cn" title="云南">云南</a></li>  
  276.                 <li><a href="http://www.xz.10086.cn" title="西藏">西藏</a></li>  
  277.                 <li><a href="http://www.gs.10086.cn" title="甘肃">甘肃</a></li>  
  278.                 <li><a href="http://www.zj.10086.cn" title="浙江">浙江</a></li>  
  279.                 <li><a href="http://www.fj.10086.cn" title="福建">福建</a></li>  
  280.                 <li><a href="http://www.hi.10086.cn" title="海南">海南</a></li>  
  281.                 <li><a href="http://www.hb.10086.cn" title="湖北">湖北</a></li>  
  282.                 <li><a href="http://www.nx.10086.cn" title="宁夏">宁夏</a></li>  
  283.                 <li><a href="http://www.qh.10086.cn" title="青海">青海</a></li>  
  284.                 <li><a href="http://www.xj.10086.cn" title="新疆">新疆</a></li>  
  285.                 <li><a href="http://www.hl.10086.cn" title="黑龙江">黑龙江</a></li>  
  286.                 <li class="col6"><a href="http://www.nm.10086.cn" title="内蒙古">内蒙古</a></li>  
  287.                 <li class="col3"><a href="http://www.chinamobileltd.com" title="China Mobile Ltd">China Mobile Ltd</a></li>  
  288.                 <li class="col3"><a href="http://labs.10086.cn" title="中国移动研究院">中国移动研究院</a></li>  
  289.                 <li class="col3"><a href="http://www.cmdi.10086.cn" title="中国移动设计院">中国移动设计院</a></li>  
  290.                 </ul>  
  291.                 <div class="fl"></div><div class="fr"></div>  
  292.             </dd>  
  293.         </dl>  
  294.     </div>  
  295.     <p title="移动改变生活"><span>移动</span>改变生活<samp>>></samp></p>  
  296. </div>  
  297.   
  298. <div class="w nav">  
  299.     <ul class="uls">  
  300.     <li><a href="#" title="服务与支持" class="a"><b>服务与支持</b></a></li>  
  301.     <li id="shop" class="here"><a href="#" title="网上营业厅" class="a"><b>网上营业厅</b></a>  
  302.         <div class="col4 hidden">  
  303.             <dl class="col">  
  304.                 <dt title="手机商城">手机商城</dt>  
  305.                 <dd><a href="#" title="诺基亚">诺基亚</a></dd>  
  306.                 <dd><a href="#" title="华为">华为</a></dd>  
  307.                 <dd><a href="#" title="三星">三星</a></dd>  
  308.                 <dd><a href="#" title="最新优惠">中兴</a></dd>  
  309.             </dl>  
  310.             <dl class="col2">  
  311.                 <dt title="网上选号">网上选号</dt>  
  312.                 <dd><a href="#" title="全球通">全球通</a></dd>  
  313.                 <dd><a href="#" title="动感地带">动感地带</a></dd>  
  314.                 <dd><a href="#" title="神州行">神州行</a></dd>  
  315.             </dl>  
  316.             <dl class="col3">  
  317.                 <dt title="优惠活动">优惠活动</dt>  
  318.                 <dd><a href="#" title="购机返话费">购机返话费</a></dd>  
  319.                 <dd><a href="#" title="优惠购机">优惠购机</a></dd>  
  320.             </dl>  
  321.             <span></span>  
  322.         </div>  
  323.     </li>  
  324.     <li id="my"><a href="#" title="我的移动" class="a"><b>我的移动</b></a>  
  325.         <div class="col2 hidden">  
  326.             <dl class="col">  
  327.                 <dt title="我的账户">我的账户</dt>  
  328.                 <dd><a href="#" title="套餐余量查询">套餐余量查询</a></dd>  
  329.                 <dd><a href="#" title="积分查询">积分查询</a></dd>  
  330.                 <dd><a href="#" title="业务状态查询">业务状态查询</a></dd>  
  331.                 <dd><a href="#" title="充值缴费" class="red">充值缴费</a></dd>  
  332.                 <dd><a href="#" title="详单查询">详单查询</a></dd>  
  333.                 <dd><a href="#" title="余额查询">余额查询</a></dd>  
  334.                 <dd><a href="#" title="账单查询">账单查询</a></dd>  
  335.             </dl>  
  336.             <dl class="col2">  
  337.                 <dt title="我要办理">我要办理</dt>  
  338.                 <dd><a href="#" title="快速查找">快速查找</a></dd>  
  339.                 <dd><a href="#" title="产品推荐">产品推荐</a></dd>  
  340.                 <dd><a href="#" title="生活配对">生活配对</a></dd>  
  341.                 <dd><a href="#" title="最新优惠">最新优惠</a></dd>  
  342.             </dl>  
  343.             <dl class="col3">  
  344.                 <dt title="移动生活">移动生活</dt>  
  345.                 <dd><a href="#" title="手机阅读">手机阅读</a></dd>  
  346.                 <dd><a href="#" title="无线音乐俱乐部">无线音乐俱乐部</a></dd>  
  347.                 <dd><a href="#" title="手机游戏">手机游戏</a></dd>  
  348.             </dl>  
  349.             <span></span>  
  350.         </div>  
  351.     </li>  
  352.     <li><a href="#" title="首页" class="a"><b>首页</b></a></li>  
  353.     </ul>  
  354. </div>  
  355.   
  356. <div class="w sch">  
  357.     <div class="l">  
  358.         <dl class="goto">  
  359.             <dt title="快捷办理通道">快捷办理通道<i class="inb"></i></dt>  
  360.             <dd class="hidden">  
  361.                 <a href="#" target="_blank" title="移动数据流量详单">移动数据流量详单</a>  
  362.                 <a href="#" target="_blank" title="家庭亲情网">家庭亲情网</a>  
  363.                 <a href="#" target="_blank" title="虚拟网业务">虚拟网业务</a>  
  364.                 <a href="#" target="_blank" title="全球通商旅套餐">全球通商旅套餐</a>  
  365.                 <a href="#" target="_blank" title="短信业务">短信业务</a>  
  366.                 <a href="#" target="_blank" title="彩铃业务">彩铃业务</a>  
  367.                 <a href="#" target="_blank" title="WLAN业务(含校园版)">WLAN业务(含校园版)</a>  
  368.                 <a href="#" target="_blank" title="G3可视电话">G3可视电话</a>  
  369.                 <a href="#" target="_blank" title="全球通上网套餐">全球通上网套餐</a>  
  370.                 <a href="#" target="_blank" title="飞信业务">飞信业务</a>  
  371.             </dd>  
  372.         </dl>  
  373.         <p><a href="#" title="购机选号">购机选号</a><samp>|</samp><a href="#" title="网上交费">网上交费</a><samp>|</samp><a href="#" title="积分商城">积分商城</a><samp>|</samp><a href="http://www.gz.10086.cn/zf/" target="_blank">资费专区</a></p>  
  374.     </div>  
  375.   
  376.     <form method="post" action="" name="" class="r">  
  377.         热门搜索：<a href="#" title="GPRS">GPRS</a><samp>|</samp><a href="#" title="全球通新88套餐">全球通新88套餐</a>  
  378.         <select name="screahType" id="screahType">  
  379.             <option>商城</option>  
  380.             <option>号卡</option>  
  381.             <option>门户</option>  
  382.         </select><input type="text" class="txt_sch gray" id="screahWord" name="screahWord" onfocus="if(this.value=='请输入商品名称关键字'){this.value='';this.className='txt_sch'}" onblur="if(this.value==''){this.value='请输入商品名称关键字';this.className='txt_sch gray'}" value="请输入商品名称关键字" /><input type="submit" value="搜索" class="hand btn60x26" /></form>  
  383. </div>  
  384.   
  385. <div class="w loc">  
  386.       
  387.     <p class="l"><a href="#" title="商城首页">商城首页</a><samp>|</samp><a href="#" title="我的商城">我的商城</a></p>  
  388.   
  389.     <dl id="cart" class="cart l">  
  390.         <dt><a href="#" title="结算">结算</a>购物车:<b id="">123</b>件</dt>  
  391.         <dd class="hidden">  
  392.             <p class="alg_c hidden">购物车中还没有商品，赶紧选购吧！</p>  
  393.             <h3 title="最新加入的商品">最新加入的商品</h3>  
  394.             <ul class="uls">  
  395.                 <li>  
  396.                     <a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L"><img src="../res/img/pic/p50x50.jpg" alt="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L" /></a>  
  397.                     <p class="dt"><a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L">倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L</a></p>  
  398.                     <p class="dd">  
  399.                         <b><var>¥3599</var><span>x1</span></b>  
  400.                         <a href="javascript:void(0);" title="删除" class="del">删除</a>  
  401.                     </p>  
  402.                 </li>  
  403.                 <li>  
  404.                     <a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L"><img src="../res/img/pic/p50x50b.jpg" alt="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L" /></a>  
  405.                     <p class="dt"><a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L">倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L</a></p>  
  406.                     <p class="dd">  
  407.                         <b><var>¥3599</var><span>x1</span></b>  
  408.                         <a href="javascript:void(0);" title="删除" class="del">删除</a>  
  409.                     </p>  
  410.                 </li>  
  411.                 <li>  
  412.                     <a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L"><img src="../res/img/pic/p50x50c.jpg" alt="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L" /></a>  
  413.                     <p class="dt"><a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L">倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L</a></p>  
  414.                     <p class="dd">  
  415.                         <b><var>¥3599</var><span>x1</span></b>  
  416.                         <a href="javascript:void(0);" title="删除" class="del">删除</a>  
  417.                     </p>  
  418.                 </li>  
  419.                 <li>  
  420.                     <a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L"><img src="../res/img/pic/p50x50.jpg" alt="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L" /></a>  
  421.                     <p class="dt"><a href="#" title="倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L">倍力通(Prestone)超级全合成机油5W-40 SM级 4L倍力通(Prestone)超级全合成机油5W-40 SM级 4L</a></p>  
  422.                     <p class="dd">  
  423.                         <b><var>¥3599</var><span>x1</span></b>  
  424.                         <a href="javascript:void(0);" title="删除" class="del">删除</a>  
  425.                     </p>  
  426.                 </li>  
  427.             </ul>  
  428.             <div>  
  429.                 <p>共<b>4</b>件商品    共计<b class="f20">¥3599.00</b></p>  
  430.                 <a href="#" title="去购物车结算" class="inb btn120x30c">去购物车结算</a>  
  431.             </div>  
  432.         </dd>  
  433.     </dl>  
  434.   
  435.     <p class="r"><a href="index.html" title="商城首页">商城首页</a><samp>></samp><a href="#" title="手机商城">手机商城</a><samp>></samp><a href="#" title="HTC">HTC</a><samp>></samp><span class="gray">HTC A6390</span></p>  
  436.   
  437. </div>  
  438.   
  439. <div class="w ofc mt">   
  440.     <div class="l wl">  
  441.   
  442.         <h2 class="h2 h2_l"><em title="商品分类">商品分类</em><cite></cite></h2>  
  443.         <div class="box bg_gray">  
  444.             <ul class="ul left_nav">  
  445.                 <li><a href="#" title="网上选号"><img src="../res/img/gray/ln01.gif" alt="网上选号" />网上选号</a></li>  
  446.                 <li><a href="#" title="手机商城"><img src="../res/img/gray/ln02.gif" alt="手机商城" />手机商城</a></li>  
  447.                 <li><a href="#" title="优惠活动"><img src="../res/img/gray/ln03.gif" alt="优惠活动" />优惠活动</a></li>  
  448.             </ul>  
  449.         </div>  
  450.   
  451.         <h2 class="h2 h2_l mt"><em title="销量排行榜">销量排行榜</em><cite></cite></h2>  
  452.         <div class="box bg_white">  
  453.             <ul class="uls x_150x150">  
  454.                 <li class="here">  
  455.                     <var class="sfont">1.</var>  
  456.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  457.                     <dl>  
  458.                         <!-- dt 11个文字+... -->  
  459.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉摩托罗拉托罗拉...</a></dt>  
  460.                         <!-- dd 23个文字+... -->  
  461.                         <dd class="h40">摩托罗拉摩托罗拉托罗拉拉摩托罗拉摩托罗拉托罗罗...</dd>  
  462.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  463.                     </dl>  
  464.                 </li>  
  465.                 <li>  
  466.                     <var class="sfont">2.</var>  
  467.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  468.                     <dl>  
  469.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  470.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  471.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  472.                     </dl>  
  473.                 </li>  
  474.                 <li>  
  475.                     <var class="sfont">3.</var>  
  476.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  477.                     <dl>  
  478.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  479.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  480.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  481.                     </dl>  
  482.                 </li>  
  483.                 <li>  
  484.                     <var class="sfont">4.</var>  
  485.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  486.                     <dl>  
  487.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  488.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  489.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  490.                     </dl>  
  491.                 </li>  
  492.                 <li>  
  493.                     <var class="sfont">5.</var>  
  494.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  495.                     <dl>  
  496.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  497.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  498.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  499.                     </dl>  
  500.                 </li>  
  501.                 <li>  
  502.                     <var class="sfont">6.</var>  
  503.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  504.                     <dl>  
  505.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  506.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  507.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  508.                     </dl>  
  509.                 </li>  
  510.                 <li>  
  511.                     <var class="sfont">7.</var>  
  512.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  513.                     <dl>  
  514.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  515.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  516.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  517.                     </dl>  
  518.                 </li>  
  519.                 <li>  
  520.                     <var class="sfont">8.</var>  
  521.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  522.                     <dl>  
  523.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  524.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  525.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  526.                     </dl>  
  527.                 </li>  
  528.                 <li>  
  529.                     <var class="sfont">9.</var>  
  530.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  531.                     <dl>  
  532.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  533.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  534.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  535.                     </dl>  
  536.                 </li>  
  537.                 <li>  
  538.                     <var class="sfont">10.</var>  
  539.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  540.                     <dl>  
  541.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  542.                         <dd class="h40">3G手机（黑）WCDMA/GSM 新品上市！！下单就返</dd>  
  543.                         <dd><span class="gray">抢购价：</span><var class="red b f14">￥3599</var></dd>  
  544.                     </dl>  
  545.                 </li>  
  546.             </ul>  
  547.             <script language="javascript" type="text/javascript">  
  548.             $('.x_150x150').each(function(i, items_list){   
  549.                 $(items_list).find('li').hover(function(){  
  550.                     $(items_list).find('li').each(function(j, li){  
  551.                         $(li).removeClass('here');  
  552.                     });  
  553.                     $(this).addClass('here');  
  554.                 },function(){});  
  555.             });  
  556.             </script>  
  557.         </div>  
  558.   
  559.         <h2 class="h2 h2_l mt"><em title="我的浏览记录">我的浏览记录</em><cite></cite></h2>  
  560.         <div class="box bg_white">  
  561.             <ul class="uls x_50x50">  
  562.                 <li>  
  563.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  564.                     <dl>  
  565.                         <!-- dt 8个文字+... -->  
  566.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉摩托罗拉拉...</a></dt>  
  567.                         <dd class="orange">￥3599 ~ ￥4599</dd>  
  568.                     </dl>  
  569.                 </li>  
  570.                 <li>  
  571.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  572.                     <dl>  
  573.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  574.                         <dd class="orange">￥3599 ~ ￥4599</dd>  
  575.                     </dl>  
  576.                 </li>  
  577.                 <li>  
  578.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  579.                     <dl>  
  580.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  581.                         <dd class="orange">￥3599 ~ ￥4599</dd>  
  582.                     </dl>  
  583.                 </li>  
  584.                 <li>  
  585.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  586.                     <dl>  
  587.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  588.                         <dd class="orange">￥3599 ~ ￥4599</dd>  
  589.                     </dl>  
  590.                 </li>  
  591.                 <li>  
  592.                     <a href="#" title="张同来" target="_blank" class="pic"><img src="../res/img/pic/p140X140b.png" alt="摩托罗拉XT319" /></a>  
  593.                     <dl>  
  594.                         <dt><a href="#" title="摩托罗拉XT319" target="_blank">摩托罗拉XT319</a></dt>  
  595.                         <dd class="orange">￥3599 ~ ￥4599</dd>  
  596.                     </dl>  
  597.                 </li>  
  598.             </ul>  
  599.         </div>  
  600.   
  601.         <div class="ad200x75 mt"><img src="../res/img/pic/ad200x75.jpg" alt="" /></div>  
  602.   
  603.         <div class="ad200x169 mt"><img src="../res/img/pic/ad200x169.jpg" alt="" /></div>  
  604.   
  605.         <div class="ad200x244 mt"><img src="../res/img/pic/ad200x244.jpg" alt="" /></div>  
  606.   
  607.     </div>  
  608.     <div class="r wr">  
  609.           
  610.         <div class="product">  
  611.             <h2>${item.itemName }<span class="gray f14">${item.promotion }</span></h2>  
  612.             <div class="showPro">  
  613.                 <div class="big"><a id="showImg" class="cloud-zoom" href="${upload }${item.imgSize1}" rel="adjustX:10,adjustY:-1"><img title="optional title display" alt="" src="${upload }${item.imgSize1}"></a></div>  
  614.                   
  615.                 <div class="small">  
  616.                     <span class="smallL" title="向左"> </span>  
  617.                     <div class="smallBox">  
  618.                         <div class="smallList">  
  619.                             <a class="cloud-zoom-gallery here" title="red" href="${upload }${item.imgSize1}" rel="useZoom: 'showImg', smallImage: '${upload }${item.imgSize1}'"><img alt="thumbnail 1" src="${upload }${item.imgSize1}"></a>  
  620.                             <a class="cloud-zoom-gallery" title="blue" href="${upload }${item.imgSize1}" rel="useZoom: 'showImg', smallImage: '${upload }${item.imgSize1}'"><img alt="thumbnail 2" src="${upload }${item.imgSize1}"></a>  
  621.                             <a class="cloud-zoom-gallery" title="blue" href="${upload }${item.imgSize1}" rel="useZoom: 'showImg', smallImage: '${upload }${item.imgSize1}'"><img alt="thumbnail 3" src="${upload }${item.imgSize1}"></a>  
  622.                             <a class="cloud-zoom-gallery" title="blue" href="${upload }${item.imgSize1}" rel="useZoom: 'showImg', smallImage: '${upload }${item.imgSize1}'"><img alt="thumbnail 4" src="${upload }${item.imgSize1}"></a>  
  623.                             <a class="cloud-zoom-gallery" title="blue" href="${upload }${item.imgSize1}" rel="useZoom: 'showImg', smallImage: '${upload }${item.imgSize1}'"><img alt="thumbnail 5" src="${upload }${item.imgSize1}"></a>  
  624.                         </div>  
  625.                     </div>  
  626.                     <span class="smallR" title="向右"> </span>  
  627.                 </div>  
  628.   
  629.                 <div class="share mt">  
  630.       
  631.                     <div id="ecpsShareIcon">  
  632.                         <div class="iconSmall iconRight">  
  633.                             <span>分享到：</span><a href="javascript:void(0);" target="_blank" class="sinawb" title="分享到新浪微博"></a><a href="javascript:void(0);" target="_blank" class="qqwb" title="分享到腾讯微博"></a><a href="javascript:void(0);" target="_blank" class="renren" title="分享到人人网"></a><a href="javascript:void(0);" target="_blank" class="qqzone" title="分享到QQ空间"></a><a href="javascript:void(0);" target="_blank" class="sohuwb" title="分享到搜狐微博"></a><a href="javascript:void(0);" class="copy" title="复制链接">复制链接</a>  
  634.                         </div>  
  635.                     </div>  
  636.   
  637.                 </div>  
  638.   
  639.             </div>  
  640.   
  641.             <form method="post" action="" name="" class="infor">  
  642.                 <ul class="uls form">  
  643.                   
  644.                 <li><label>移 动 价：</label><span class="word"><b id="skuPrice" class="f14 red mr">￥3999.00</b>(市场价:<del id="marketPrice">￥5789.00</del>)</span></li>  
  645.                 <li><label>商品编号：</label><span class="word">${item.itemNo }</span></li>  
  646.                 <li><label>商品评价：</label><span class="word"><span class="val_no val3d4" title="4分">4分</span><var class="blue">(已有17人评价)</var></span></li>  
  647.                 <li><label>运　　费：</label><span class="word">包邮    <a href="javascript:void(0);" class="blue">配送区域</a></span></li>  
  648.                 <li><label>库　　存：</label><span id="isStock" class="word">有货</span></li>  
  649.                 <li><label>支付方式：</label><div class="pre word p16x16">  
  650.                     <span title="网银支付" class="bank">网银支付</span>  
  651.                     <span title="支付宝" class="pay">支付宝</span>  
  652.                     <span title="手机支付" class="moblie">手机支付</span>  
  653.                 </div></li>  
  654.                 </ul>  
  655.                   
  656.                 <div class="box_orange">  
  657.                     <ul class="uls form">  
  658.                     <li><label>规　　格：</label><div class="pre spec">  
  659.                         <#list item.skuList as sku>   
  660.                             <#if sku_index == 0>  
  661.                                 <a href="javascript:void(0);" skuId="${sku.skuId }" skuPrice="${sku.skuPrice }" marketPrice="${(sku.marketPrice)! }" class="here">  
  662.                                     <#list sku.specList as spec>  
  663.                                         ${spec.specValue }  
  664.                                     </#list>  
  665.                                 </a>  
  666.                             <#else>  
  667.                                 <a href="javascript:void(0);" skuId="${sku.skuId }" skuPrice="${sku.skuPrice }" marketPrice="${(sku.marketPrice)! }">  
  668.                                     <#list sku.specList as spec>  
  669.                                         ${spec.specValue }  
  670.                                     </#list>  
  671.                                 </a>  
  672.                             </#if>  
  673.                         </#list>  
  674.                           
  675.                     </div></li>  
  676.                     <li><label>我 要 买：</label><a href="javascript:void(0);" class="inb sub"></a><input readonly type="text" name="" value="1" class="num" size="3" /><a href="javascript:void(0);" class="inb add"></a><em id="sub_add_msg" class="red"></em></li>  
  677.                     <li class="submit"><input id="buyNow" type="button" value="" class="hand btn138x40" onclick="buy();"/><input id="addCart" type="button" value="" class="hand btn138x40b" onclick="addCart()"/><a href="#" title="加入收藏" class="inb fav">加入收藏</a></li>  
  678.                       
  679.                       
  680.                     </ul>  
  681.                 </div>  
  682.   
  683.               
  684.   
  685.             </form>  
  686.   
  687.         </div>  
  688.   
  689.         <div class="confirm mt">  
  690.             <div class="tl"></div><div class="tr"></div>  
  691.             <div class="ofc">  
  692.   
  693.                 <dl class="dl_msg">  
  694.                 <dt><b class="f14 blue">营销活动</b><span class="gray">选择营销活动以获得更多优惠。</span></dt>  
  695.                 <dd>1、全球通50优惠购机 <a href="#" title="title">[查看详情]</a></dd>  
  696.                 <dd>2、畅想计划 <a href="#" title="title">[查看详情]</a></dd>  
  697.                 <dd>3、2011全球通88套餐终端营销活动 <a href="#" title="title">[查看详情]</a></dd>  
  698.                 </dl>  
  699.   
  700.             </div>  
  701.             <div class="fl"></div><div class="fr"></div>  
  702.         </div>  
  703.   
  704.         <h2 class="h2 h2_ch mt"><em>  
  705.             <a href="javascript:void(0);" title="商品描述" rel="#detailTab1" class="here">商品描述</a>  
  706.             <a href="javascript:void(0);" title="规格参数" rel="#detailTab2">规格参数</a>  
  707.             <a href="javascript:void(0);" title="包装信息" rel="#detailTab3">包装信息</a></em><cite></cite></h2>  
  708.         <div class="box bg_white ofc">  
  709.           
  710.             <div id="detailTab1" class="detail">  
  711.   
  712.                 ${(item.itemClob.itemDesc)! }  
  713.   
  714.             </div>  
  715.               
  716.             <div id="detailTab2" style="display:none">  
  717.                           
  718.                 <table cellspacing="0" summary="" class="tab tab7">  
  719.                 <thead>  
  720.                 <tr>  
  721.                 <th colspan="2">基本参数</th>  
  722.                 </tr>       
  723.                 </thead>  
  724.                 <tbody>  
  725.                 <#list item.paraList as para>  
  726.                     <tr>  
  727.                         <th width="15%" class="alg_r">${para.featureName }</th>  
  728.                         <td>${para.paraValue }</td>  
  729.                     </tr>  
  730.                 </#list>  
  731.                           
  732.                   
  733.                 </tbody>  
  734.                 </table>  
  735.   
  736.             </div>  
  737.   
  738.             <div id="detailTab3" class="detail" style="display:none">  
  739.   
  740.     <pre class="f14">  
  741.     商品标配请您以包装清单为准：  
  742.     iPhone 4s *1，  
  743.     带遥控功能和麦克风的 Apple 耳机 *1，  
  744.     Dock Connector to USB 线缆 *1，  
  745.     USB 电源转换器 *1，  
  746.     SIM 弹出工具 *1，  
  747.     包装、说明书、保修卡*1，  
  748.     </pre>  
  749.   
  750.             </div>  
  751.   
  752.             <dl class="dl_help">  
  753.                 <dd>  
  754.                     本产品全国联保，享受三包服务，质保期为：一年质保<br />  
  755.                     如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！<br />  
  756.                     售后服务电话：<var class="blue">400-830-8300</var><br />  
  757.                     品牌官方网站：<var class="blue">http://www.huawei.com/cn/</var>  
  758.                 </dd>  
  759.                 <dt>服务承诺：</dt>  
  760.                 <dd>  
  761.                     中国移动手机购商城向您保证所售商品均为正品行货，自带机打发票，与商品一起寄送。凭质保证书及中国移动手机购商城发票，可享受全国联保服务，与您亲临商场选购的商品享受相同的质量保证。<br />  
  762.                     中国移动手机购商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！（钟表除外）<br />  
  763.                     <span class="blue"><b>注：</b>因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</span><br />  
  764.                 </dd>  
  765.                 <dt class="red">权利声明：</dt>  
  766.                 <dd>中国移动手机购商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是中国移动手机购商城重要的经营资源，未经许可，禁止非法转载使用。</dd>  
  767.             </dl>  
  768.   
  769.         </div>  
  770.   
  771.     </div>  
  772. </div>  
  773.   
  774. <div class="mode">  
  775.     <div class="tl"></div><div class="tr"></div>  
  776.     <ul class="uls">  
  777.         <li class="first">  
  778.             <span class="guide"></span>  
  779.             <dl>  
  780.             <dt title="购物指南">购物指南</dt>  
  781.             <dd><a href="#" title="在线购机/预约购机流程">在线购机/预约购机流程</a></dd>  
  782.             <dd><a href="#" target="_blank" title="预约选号流程">预约选号流程</a></dd>  
  783.             </dl>  
  784.         </li>  
  785.         <li>  
  786.             <span class="way"></span>  
  787.             <dl>  
  788.             <dt title="支付方式">支付方式</dt>  
  789.             <dd><a href="#" title="在线支付">在线支付</a></dd>  
  790.             <dd><a href="#" title="退款周期">退款周期</a></dd>  
  791.             </dl>  
  792.         </li>  
  793.         <li>  
  794.             <span class="help"></span>  
  795.             <dl>  
  796.             <dt title="配送方式">配送方式</dt>  
  797.             <dd><a href="#" title="配送说明">配送说明</a></dd>  
  798.             <dd><a href="#" title="配送时间">配送时间</a></dd>  
  799.             <dd><a href="#" title="配送费用">配送费用</a></dd>  
  800.             <dd><a href="#" title="货品签收">货品签收</a></dd>  
  801.             </dl>  
  802.         </li>  
  803.         <li>  
  804.             <span class="service"></span>  
  805.             <dl>  
  806.             <dt title="售后服务">售后服务</dt>  
  807.             <dd><a href="#" target="_blank" title="退换货流程">退换货流程</a></dd>  
  808.             <dd><a href="#" target="_blank" title="售后服务点">售后服务点</a></dd>  
  809.             </dl>  
  810.         </li>  
  811.         <li>  
  812.             <span class="problem"></span>  
  813.             <dl>  
  814.             <dt title="常见问题">常见问题</dt>  
  815.             <dd><a href="#" target="_blank" title="配送时限是几天？">配送时限是几天？</a></dd>  
  816.             <dd><a href="#" target="_blank"title="付款方式有哪些？">付款方式有哪些？</a></dd>  
  817.             <dd><a href="#" target="_blank"title="如何签收商品？">如何签收商品？</a></dd>  
  818.             <dd><a href="#" target="_blank"title="是否提供三包售后？">是否提供三包售后？</a></dd>  
  819.             </dl>  
  820.         </li>  
  821.     </ul>  
  822. </div>  
  823.   
  824. <div class="w footer">  
  825.     <p><a href="#" title="新闻公告">新闻公告</a><samp>|</samp><a href="#" title="法律声明">法律声明</a><samp>|</samp><a href="#" title="诚招英才">诚招英才</a><samp>|</samp><a href="#" title="联系我们">联系我们</a><samp>|</samp><a href="#" title="采购信息">采购信息</a><samp>|</samp><a href="#" title="企业合作">企业合作</a><samp>|</samp><a href="#" title="站点导航">站点导航</a><samp>|</samp><a href="#" title="网站地图">网站地图</a></p>  
  826.     <p>掌上营业厅：<a href="#" title="掌上营业厅：wap.10086.cn">wap.10086.cn</a>  语音自助服务：10086  短信营业厅：10086  <a href="http://www.bj.10086.cn/index/10086/channel/index.shtml">自助终端网点查询</a>  <a href="http://www.bj.10086.cn/index/10086/channel/index.shtml">满意100营业厅网点查询</a>  <a href="http://www.bj.10086.cn/index/10086/download/index.shtml">手机客户端下载</a></p>  
  827.     <p><a href="#" title="京ICP备05002571" class="inb i18x22"></a> 京ICP备05002571<samp>|</samp>中国移动通信集团 版权所有</p>  
  828. </div>  
  829.   
  830. <div id="loginAlert" class="alt login" style="display:none">  
  831.     <h2 class="h2"><em title="登录">登录</em><cite></cite></h2>  
  832.     <a href="javascript:void(0);" id="loginAlertClose" class="close" title="关闭"></a>  
  833.     <div class="cont">  
  834.         <ul class="uls form">  
  835.         <li id="loginAlertError" class="errorTip" style="display:none"></li>  
  836.         <li>  
  837.             <label>帐号类型：</label>  
  838.             <dl class="bg_text" style="z-index:3">  
  839.                 <dd class="hidden">  
  840.                     <a href="javascript:void(0);" title="手机号码">手机号码</a>  
  841.                     <a href="javascript:void(0);" title="用户名">用户名</a>  
  842.                 </dd>  
  843.                 <dt title="请选择帐号类型">请选择帐号类型</dt>  
  844.             </dl>  
  845.         </li>  
  846.         <li>  
  847.             <label>手机号码：</label>  
  848.             <span class="bg_text">  
  849.                 <input type="text" maxlength="50" vld="{required:true}" name="loginUserName" id="loginUserName" reg1="^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$" desc="用户名长度不超过50个，必须是邮箱格式！" />  
  850.                 <em id="userNameLabel" class="def">请输入手机号码</em>  
  851.             </span>  
  852.             <span class="word"><a title="免费注册" href="/ecps-portal/ecps/portal/register.do">免费注册</a></span>  
  853.         </li>  
  854.         <li>  
  855.             <label>登录模式：</label>  
  856.             <dl class="bg_text" style="z-index:2">  
  857.                 <dd class="hidden">  
  858.                     <a href="javascript:void(0);" title="服务密码">服务密码</a>  
  859.                     <a href="javascript:void(0);" title="网站密码">网站密码</a>  
  860.                 </dd>  
  861.                 <dt title="请选择帐号类型">请选择登录模式</dt>  
  862.             </dl>  
  863.         </li>  
  864.         <li><label>服务密码：</label>  
  865.             <span class="bg_text"><input type="password" vld="{required:true}" maxlength="20" name="loginPassword" id="loginPassword" value="" reg1="^.{6,20}$" desc="密码长度范围为6-20，允许为中英文、数字或特殊字符！" /></span>  
  866.         </li>  
  867.         <li>  
  868.             <label for="captcha">验 证 码：</label>  
  869.             <span class="bg_text small"><input type="text" vld="{required:true}" maxlength="7" name="loginCaptcha" id="loginCaptcha" value="" reg1="^\w{6}$" desc="验证码不正确" /></span>  
  870.             <img alt="换一张" id="loginCaptchaCode" class="code" onclick="this.src='/ecps-portal/captcha.svl?d='+new Date().getTime();" src="../res/img/pic/code.png" /><a href="#" onclick="document.getElementById('loginCaptchaCode').src='/ecps-portal/captcha.svl?d='+new Date().getTime();" title="换一张">换一张</a>  
  871.         </li>  
  872.         <li class="gray"><label> </label><input type="checkbox" name="">记住我的手机号码</li>  
  873.         <li><label> </label><input type="button" id="loginSubmit" class="hand btn66x23" value="登 录" onclick="loginAjax('/ecps-portal/ecps/portal/item/landingAjax.do');" ><a title="忘记密码？" href="/ecps-portal/ecps/portal/getpwd/getpwd1.do">忘记密码？</a></li>  
  874.         <!--li class="alg_c dev gray">还不是移动商城会员？<a title="免费注册" href="/ecps-portal/ecps/portal/register.do">免费注册</a></li-->  
  875.         </ul>  
  876.     </div>  
  877. </div>  
  878.   
  879. <div id="promptAlert" class="alt prompt" style="display:none">  
  880.     <h2 class="h2"><em title="提示">提示</em><cite></cite></h2>  
  881.     <a href="javascript:void(0);" id="promptAlertClose" class="close" title="关闭"></a>  
  882.     <div class="cont">  
  883.         <dl class="dl_msg">  
  884.             <dt>请在新页面完成支付！</dt>  
  885.             <dd>支付完成前请不要关闭此窗口，<br />完成支付后请根据您的情况点击下面的按钮。</dd>  
  886.             <dd><a href="#" title="遇到付款问题" class="inb btn96x23 mr20">遇到付款问题</a><a href="#" title="已完成支付" class="inb btn96x23">已完成支付</a></dd>  
  887.             <dd class="alg_r"><a href="#" title="返回选择其他支付方式">返回选择其他支付方式>></a></dd>  
  888.         </dl>  
  889.     </div>  
  890. </div>  
  891.   
  892. <div id="transitAlert" class="alt transit" style="display:none">  
  893.     <h2 class="h2"><em title="提示">提示</em><cite></cite></h2>  
  894.     <a href="javascript:void(0);" id="transitAlertClose" class="close" title="关闭"></a>  
  895.     <div class="cont">  
  896.         <div class="warningMsg">  
  897.             <p class="indent">您即将访问的网站不属于中国移动通信集团公司门户网站站群范围，任何通过使用中国移动通信集团公司门户网站站群链接到的第三方页面均系第三方平台制作或提供，您可能从该第三方网页上获得资讯及享用服务，中国移动通信集团公司对其合法性概不负责，也不承担任何法律责任。</p>  
  898.             <p class="alg_c"><input type="button" class="hand btn66x23" value="确 定" /></p>  
  899.         </div>  
  900.     </div>  
  901. </div>  
  902.   
  903. </body>  
  904. </html>  


top1.ftl

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <h1>欢迎${username}</h1>  
[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.rl.test;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.Date;  
  5. import java.util.HashMap;  
  6. import java.util.List;  
  7. import java.util.Map;  
  8.   
  9. import org.junit.Before;  
  10. import org.junit.Test;  
  11.   
  12. import cn.itcast.freemarker.model.User;  
  13. import cn.itcast.util.FMutil;  
  14.   
  15. public class FMTest {  
  16.       
  17.     FMutil fm;  
  18.     Map<String, Object> map ;  
  19.   
  20.     @Before  
  21.     public void setUp() throws Exception {  
  22.         fm = new FMutil();  
  23.         map = new HashMap<String, Object>();  
  24.     }  
  25.   
  26.     //静态页面生成 zhangsan  
  27.     @Test  
  28.     public void test1() throws Exception {  
  29.         map.put("username", "zhangsan");  
  30.         fm.ouputFile("fm1.ftl", "fm1.html", map);  
  31.     }  
  32.     @Test  
  33.     public void test2() throws Exception {  
  34.         map.put("username", "zhangsan");  
  35.         fm.ouputFile("fm2.ftl", "fm2.html", map);  
  36.     }  
  37.       
  38.     @Test  
  39.     public void test3() throws Exception {  
  40.         User user = new User();  
  41.         user.setId(1);  
  42.         user.setName("dalang");  
  43.         user.setAge(30);  
  44.           
  45.         map.put("user", user);  
  46.         fm.ouputFile("fm3.ftl", "fm3.html", map);  
  47.     }  
  48.       
  49.     @Test  
  50.     public void test4() throws Exception {  
  51.         List<User> userList = new ArrayList<User>();  
  52.         for(int i = 0 ; i < 10; i++){  
  53.             User user = new User();  
  54.             user.setId(1+i);  
  55.             user.setName("dalang");  
  56.             user.setAge(13+i);  
  57.             userList.add(user);  
  58.         }  
  59.         map.put("userList", userList);  
  60.         fm.ouputFile("fm4.ftl", "fm4.html", map);  
  61.     }  
  62.       
  63.     @Test  
  64.     public void test5() throws Exception {  
  65.         List<User> userList = new ArrayList<User>();  
  66.         for(int i = 0 ; i < 10; i++){  
  67.             User user = new User();  
  68.             user.setId(1+i);  
  69.             user.setName("dalang");  
  70.             user.setAge(13+i);  
  71.             userList.add(user);  
  72.         }  
  73.         map.put("userList", userList);  
  74.         map.put("username", "西门庆");  
  75.         fm.ouputFile("fm5.ftl", "fm5.html", map);  
  76.     }  
  77.       
  78.     @Test  
  79.     public void test6() throws Exception {  
  80.         User user = new User();  
  81.         user.setId(1);  
  82.         user.setName("dalang");  
  83.         user.setAge(13);  
  84.         map.put("user", user);  
  85.         fm.ouputFile("fm6.ftl", "fm6.html", map);  
  86.     }  
  87.     @Test  
  88.     public void test7() throws Exception {  
  89.         map.put("now", new Date());  
  90.         fm.ouputFile("fm7.ftl", "fm7.html", map);  
  91.     }  
  92.   
  93. }  

pom.xml

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
    1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    2.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
    3.   <modelVersion>4.0.0</modelVersion>  
    4.   
    5.   <groupId>org.konghao.freemarker</groupId>  
    6.   <artifactId>freemarker-hello</artifactId>  
    7.   <version>0.0.1-SNAPSHOT</version>  
    8.   <packaging>jar</packaging>  
    9.   
    10.   <name>freemarker-hello</name>  
    11.   <url>http://maven.apache.org</url>  
    12.   
    13.   <properties>  
    14.     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
    15.   </properties>  
    16.   
    17.   <dependencies>  
    18.     <dependency>  
    19.       <groupId>junit</groupId>  
    20.       <artifactId>junit</artifactId>  
    21.       <version>4.7</version>  
    22.       <scope>test</scope>  
    23.     </dependency>  
    24.     <dependency>  
    25.       <groupId>org.freemarker</groupId>  
    26.       <artifactId>freemarker</artifactId>  
    27.       <version>2.3.19</version>  
    28.     </dependency>  
    29.   </dependencies>  
    30. </project>  
posted on 2017-03-15 08:59  JimBo-Hero  阅读(760)  评论(0)  编辑  收藏  举报
Copyright © 2024 JimBo-Hero
Powered by .NET 9.0 on Kubernetes Powered By: 博客园