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

页面的静态化  有的较多

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

第一个项目结构

代码的实现

[java] view plaincopy
  1. package cn.itcast.freemarker.model;
  2. public class Group {
  3. private String name;
  4. String id;
  5. public String getName() {
  6. return name;
  7. }
  8. public void setName(String name) {
  9. this.name = name;
  10. }
  11. public Group(String name) {
  12. super();
  13. this.name = name;
  14. }
  15. public Group() {
  16. }
  17. public void sayHello(){
  18. System.out.println("hello");
  19. }
  20. public void sayHello2(){
  21. System.out.println("hello");
  22. }
  23. public void sayHello1(){
  24. System.out.println("hello");
  25. System.out.println("hello2");
  26. System.out.println("hello3");
  27. }
  28. public void test(){
  29. System.out.println("lisi");
  30. System.out.println("wangwu");
  31. System.out.println("wangwu");
  32. }
  33. }
[java] view plaincopy
  1. package cn.itcast.freemarker.model;
  2. public class User {
  3. private int id;
  4. private String name;
  5. private int age;
  6. private Group group;
  7. private String ddd;
  8. public Group getGroup() {
  9. return group;
  10. }
  11. public void setGroup(Group group) {
  12. this.group = group;
  13. }
  14. public int getId() {
  15. return id;
  16. }
  17. public void setId(int id) {
  18. this.id = id;
  19. }
  20. public String getName() {
  21. return name;
  22. }
  23. public void setName(String name) {
  24. this.name = name;
  25. }
  26. public int getAge() {
  27. return age;
  28. }
  29. public void setAge(int age) {
  30. this.age = age;
  31. }
  32. public void remove(){
  33. }
  34. }
[java] view plaincopy
  1. package cn.itcast.util;
  2. import java.io.BufferedWriter;
  3. import java.io.File;
  4. import java.io.FileOutputStream;
  5. import java.io.OutputStreamWriter;
  6. import java.io.Writer;
  7. import java.util.Map;
  8. import freemarker.template.Configuration;
  9. import freemarker.template.Template;
  10. public class FMutil {
  11. /**
  12. *
  13. * @param ftlName:模板名称
  14. * @param fileName：生成的页面名称
  15. * @param map：数据
  16. * @throws Exception
  17. */
  18. public void ouputFile(String ftlName, String fileName,  Map<String, Object> map) throws Exception{
  19. //创建fm的配置
  20. Configuration config = new Configuration();
  21. //指定默认编码格式
  22. config.setDefaultEncoding("UTF-8");
  23. //设置模板的包路径,包的路径使用/来分隔
  24. config.setClassForTemplateLoading(this.getClass(), "/ftl");
  25. 获得包的模板
  26. Template template = config.getTemplate(ftlName);
  27. //指定文件输出的路径
  28. String path = "D:/fm";
  29. //定义输出流，注意的必须指定编码
  30. Writer writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File(path+"/"+fileName)),"UTF-8"));
  31. //生成模板
  32. template.process(map, writer);
  33. }
  34. }

fm1.ftl

[plain] view plaincopy
  1. ${username}

fm2.ftl

[plain] view plaincopy
  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 plaincopy
  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. <#if user.age lt 10>
  11. 小孩
  12. <#elseif user.age lt 16>
  13. 未成年
  14. <#else>
  15. 已经成年
  16. </#if>
  17. </body>
  18. </html>

fm4.ftl

[plain] view plaincopy
  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. </body>
  13. </html>

fm5.ftl

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

fm6.ftl

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

fm7.ftl

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

productDetail.ftl

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

top1.ftl

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

pom.xml

[java] view plaincopy
  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. <groupId>org.konghao.freemarker</groupId>
  5. <artifactId>freemarker-hello</artifactId>
  6. <version>0.0.1-SNAPSHOT</version>
  7. <packaging>jar</packaging>
  8. <name>freemarker-hello</name>
  9. <url>http://maven.apache.org</url>
  10. <properties>
  11. <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  12. </properties>
  13. <dependencies>
  14. <dependency>
  15. <groupId>junit</groupId>
  16. <artifactId>junit</artifactId>
  17. <version>4.7</version>
  18. <scope>test</scope>
  19. </dependency>
  20. <dependency>
  21. <groupId>org.freemarker</groupId>
  22. <artifactId>freemarker</artifactId>
  23. <version>2.3.19</version>
  24. </dependency>
  25. </dependencies>
  26. </project>

转载于:https://www.cnblogs.com/JimBo-Wang/p/6552372.html

Freemarker讲解相关推荐

  1. spring boot整合freemarker及freemarker基础语法超详细讲解

    采用模板+数据=HTML 实现页面的静态化. 也就是服务端的页面静态化技术. JSP/Freemarker/Thymeleaf是常见的模板引擎. 引依赖 okhttp与HttpClient一样的作用, ...

  2. FreeMarker模板使用方法讲解

    项目需要,刚接触,正在学习. FreeMarker简介       FreeMarker模板文件主要由如下4个部分组成:          1,文本:直接输出的部分          2,注释:< ...

  3. java培训学习阶段步骤讲解

    目前的培训机构行业比较热门的IT技术就是java技术,java技术在近几年广受关注,java所涉及的技术知识也比较广泛,下面小编就为大家详细的介绍一下java培训学习多有哪几个阶段? java培训学习 ...

  4. freemarker自定义标签（二十一）

    一,讲解一 假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术 ...

  5. springboot shiro和freemarker集成之权限控制完全参考手册（跳过认证，登录由三方验证，全网首发）...

    本文主要考虑单点登录场景,登录由其他系统负责,业务子系统只使用shiro进行菜单和功能权限校验,登录信息通过token从redis取得,这样登录验证和授权就相互解耦了. 用户.角色.权限进行集中式管理 ...

  6. java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...

    本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 还是老规矩,看效果图 可 ...

  7. bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能

    本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...

  8. 史上最全的ECharts讲解与使用

    首先搞清楚,什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库. ECharts支持数据类型 支持直接传入包括二维表,key-value 等多种格式的数据源.常 ...

  9. freeMarker fmpp 解析PowerDesign PDM探索

    为什么80%的码农都做不了架构师?>>>    前一段时间一直是使用同事写的fmpp 解析csv文件生成 Spring+Hibernate+Struts+vm(velocity模版) ...

最新文章

  1. 在CentOS 6.3 64bit上安装Nginx 1.8.0
  2. 为何那么多人的网名都叫易天啊
  3. POJ 3169 差分约束
  4. stm32f103rb升级到stm32f103rc时代码移植注意事项
  5. 经典论文复现 | 基于标注策略的实体和关系联合抽取
  6. cdn需要备案吗_车子贴改色膜需要到车管所备案吗？
  7. java按钮改变窗口大小_java – 当我们调整窗口大小时,Container中的元素如何调整？...
  8. 前端js嵌套遍历优化_2020web前端最新面试面经：阿里、字节、小红书
  9. 九宫怎么排列和使用_别人家连客厅茶几都不要了，你却还在纠结挂画怎么挂
  10. 学习ARM的一些基本知识，个人整理
  11. PHP点餐系统源码附小程序点餐系统
  12. 计算机处理技术职业道德与论文,计算机职业道德j论文.doc
  13. 中国拖车洒水器市场趋势报告、技术动态创新及市场预测
  14. Django中使用163邮箱发送邮件
  15. Goldendict 及其词典详述
  16. 金蝶 系统服务器繁忙,金蝶登录时提示云服务器繁忙
  17. Matplotlib 配色表
  18. Intellij中格式化mapper.xml整齐
  19. 电脑公司GHOST WIN7 SP1 2011装机旗舰版
  20. 虚幻4渲染编程（环境模拟篇）【第五卷：可交互物理植被模拟 - 上】

热门文章

  1. ROS SMACH示例教程(三)
  2. word2013插入excel对象报错_教大家Excel2013如何插入对象文件
  3. html手机和电脑一致,浏览器兼容性(手机、电脑。js、html、css)
  4. 行人重识别(ReID) ——技术实现及应用场景
  5. 单片机学习和应用百问大全
  6. 什么是中台(个人理解)
  7. MATLAB完成BSC信道
  8. 【算法】震惊！！！史上最详细的卡特兰数浅谈！！！
  9. python学习课件
  10. 六、v8引擎执行JS文件