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

页面的静态化  有的较多

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

第一个项目结构

代码的实现

  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. }
  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. }
  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

  1. ${username}

fm2.ftl

  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

  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

  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

  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

  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

  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

  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

  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="关闭" onclick="$('#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" 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>
  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" onclick="buy();"/><input id="addCart" type="button" value="" class="hand btn138x40b" onclick="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" 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>
  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="登 录" onclick="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

  1. <h1>欢迎${username}</h1>
  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

    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>

Freemarker讲解的更多相关文章

  1. (原创)ssm sql 例子(freemarker+jsp)

    ssm整合地址:http://www.cnblogs.com/xiaohuihui96/p/6104351.html 接下讲解一个插入语句的流程和顺带讲解freemarker+jsp视图的整合 初次接 ...

  2. 页面静态化技术Freemarker技术的介绍及使用实例.

    一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...

  3. SSH中的jar包讲解(1)

    我们在搭建SSH框架的时候,需要引入各自的一些jar包,相信很多初学者跟我一样,搜个资料,照搬过来(当然版本还得对应),至于为什么要引入这些个jar包,引入它们的作用是啥子,一头雾水,今天我就来跟这些 ...

  4. SpringMVC讲解

    2．1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...

  5. Struts.xml讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  6. Freemarker 浅析 (zhuan)

    http://blog.csdn.net/marksinoberg/article/details/52006311 ***************************************** ...

  7. Struts2配置文件讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  8. 使用Freemarker创建word文档

    最近做一个项目,本来是直接在网页上查看文本信息,然后给客户直接打印的,但是发现也许是浏览器还是打印机的原因,总之,有个客户打印出来的格式始终与其他的不同,没办法,最后想到了直接将数据库中的信息生成一个 ...

  9. SpringMVC源码情操陶冶-FreeMarker之web配置

    前言:本文不讲解FreeMarkerView视图的相关配置,其配置基本由FreeMarkerViewResolver实现,具体可参考>>>SpringMVC源码情操陶冶-ViewRe ...

随机推荐

  1. 机器学习实战（1）- KNN

    KNN:k近邻算法-在训练样本中找到与待测样本距离相近的N个样本,并用这N个样本中所属概率最大的类别作为待测样本的类别. 算法步骤: 1.对训练中的样本数据的不同属性进行归一化处理. 2.计算待测样本 ...

  2. Matlab中画图数学公式的输出格式

    1.可以在输出参数中选择 ('Interpreter', 'latex'). 2.字符序列中的数学表达式需用$$等形式括起来. 例子: text(6, 0.3, '$\leftarrow  y= 2^ ...

  3. mapper.xml等资源导入的问题

    在pom.xml中的下导入如下字段 <resources> <resource> <directory>src/main/java</directory> ...

  4. 使用composer下载依赖包下载失败的解决方法

    下载好的composer默认的下载地址是国外的,在下载的过程中网络不好或者可能被墙,将下载的地址换成国内的地址即可 有两种方式启用本镜像服务: 系统全局配置: 即将配置信息添加到 Composer 的 ...

  5. Fluent 批量添加线面、点面、平面的scheme实现  【转载】

    转载自http://chan1629.blog.163.com/blog/static/19595703220137219166686 新建一个filename.scm,文件,用记事本打开. 在文件中 ...

  6. 数据结构Java版之堆&堆排序（九）

    堆分为大顶堆,和小顶堆. 什么是堆? 堆可以看成是一棵二叉树,二叉树的元素是一个数组不断的从左到右轮训放置.如果是大顶堆,则大的数放上面一层,小的数放下面一层.上一层的数,一定大于下一层的数.小顶堆则 ...

  7. 【JVM】虚拟机字节码执行引擎

    概念模型上,典型的帧栈结构如下(栈是线程私有的,也就是每个线程都会有自己的栈).                     典型的帧栈结构 局部变量表 存放方法参数和方法内部定义的局部变量.在编译阶段, ...

  8. css去除图片间隙

    问题如下图 把图片转换成块状元素即可 .img{ display: block; } 解决后:

  9. if ( ! defined('BASEPATH')) exit('No direct script access allowed')的作用

    在看源代码时,发现codeigniter框架的控制器中,总是加上这样一段话: if(!defined('BASEPATH'))exit('No direct script access allowed ...

  10. [Web前端] WEEX、React-Native开发App心得 （转载）

    转自: https://www.jianshu.com/p/139c5074ae5d 2018 JS状态报告: https://2018.stateofjs.com/mobile-and-deskto ...