【郑州校区】Java之品优购课程讲义_day12（5） - 黑马程序员技术交流社区

2.3 商品详情页模板构建

2.3.1 模板模块化引入

此时我们的 item.ftl 内容较多，当我们编辑时不容易快速找到编辑的位置，所以我们将头部分拆分到 head.ftl ,将尾部拆分到 foot.ftl ,用 include 指令在 item.ftl 中引入。

图片2.png (4.49 KB, 下载次数: 3)

下载附件

2018-9-28 15:04 上传

内容详见配套代码

2.3.1 生成基本数据

在模板中找到合适的位置，用插值替换静态文本

[AppleScript] 纯文本查看 复制代码

<div  class="news"><span>${goods.caption}</span></div>

[AppleScript] 纯文本查看 复制代码

<div  class="fl  price"><i>¥</i><em>${goods.price}</em><span>降价通知</span></div>

[AppleScript] 纯文本查看 复制代码

<div  class="intro-detail"><!--  商品详情 --> ${goodsDesc.introduction}</div>

[AppleScript] 纯文本查看 复制代码

<div  id="two"  class="tab-pane"><p>${goodsDesc.packageList}</p></div>



<div  id="three"  class="tab-pane"><p>${goodsDesc.saleService}</p></div>

运行控制层代码，测试生成效果

http://localhost:9101/goods/genHtml.do?goodsId=149187842867960

2.3.1 生成图片列表

[AppleScript] 纯文本查看 复制代码

<#--图片列表 -->



<#assign  imageList=goodsDesc.itemImages?eval  />

这一句要转换图片列表的 json 字符串

图片部分的代码

[AppleScript] 纯文本查看 复制代码

<!--默认第一个预览-->



<div  id="preview"  class="spec-preview">



<span  class="jqzoom">



<#if  (imageList?size>0)>



<img  jqimg="${imageList[0].url}"  src="${imageList[0].url}" width="400px"  height="400px"  />



</#if>



</span>



</div>

<!--下方的缩略图--><div  class="spec-scroll">



<div  class="items">



<ul>



<#list  imageList  as  item>



<li><img  src="${item.url}"  bimg="${item.url}"  /></li>



</#list>



</ul>



</div>



</div>

生成效果如下：

2.3.1 生成扩展属性列表

修改模板首先进行 json 转换

[AppleScript] 纯文本查看 复制代码

<#--扩展属性列表 -->



<#assign  customAttributeList=goodsDesc.customAttributeItems?eval  />

显示扩展属性数据，如果扩展属性为空则不显示此条数据

[AppleScript] 纯文本查看 复制代码

<#list  customAttributeList  as  item>



<#if  item.value??>



<li>${item.text}  ：${item.value}</li>



</#if>



</#list>

2.3.1 生成规格列表

修改模板转换规格列表

[AppleScript] 纯文本查看 复制代码

<#--规格列表 -->



<#assign  specificationList=goodsDesc.specificationItems?eval  />

此时，我们需要使用嵌套循环

[AppleScript] 纯文本查看 复制代码

<#list  specificationList  as  specification>



<dl>



<dt>



<div  class="fl  title">



<i>${specification.attributeName}</i>



</div>



</dt>

<#list  specification.attributeValue  as  item>



<dd><a  href="javascript:;"  >${item}</a></dd>



</#list>



</dl>



</#list>

2.3.1 生成商品类型面包屑

修改 ItemPageServiceImpl ，读取三级商品分类名称，加入到数据模型中

[AppleScript] 纯文本查看 复制代码

@Service



public  class  ItemPageServiceImpl  implements  ItemPageService  {







@Autowired



private  FreeMarkerConfig  freeMarkerConfig;







@Autowired



private  TbGoodsMapper  goodsMapper;







@Autowired



private  TbGoodsDescMapper  goodsDescMapper;







@Autowired



private  TbItemCatMapper  itemCatMapper;

@Override





public  boolean  genItemHtml(Long  goodsId){









try {





Configuration  configuration  =  freeMarkerConfig.getConfiguration(); Template  template  =  configuration.getTemplate("item.ftl");

Map  dataModel=new  HashMap<>();







//1.加载商品表数据



TbGoods  goods  =  goodsMapper.selectByPrimaryKey(goodsId); dataModel.put("goods",  goods);





//2.加载商品扩展表数据



TbGoodsDesc  goodsDesc  =  goodsDescMapper.selectByPrimaryKey(goodsId); dataModel.put("goodsDesc",  goodsDesc);





//3.商品分类String  itemCat1  =

itemCatMapper.selectByPrimaryKey(goods.getCategory1Id()).getName();





String  itemCat2  = itemCatMapper.selectByPrimaryKey(goods.getCategory2Id()).getName();



String  itemCat3  = itemCatMapper.selectByPrimaryKey(goods.getCategory3Id()).getName();



dataModel.put("itemCat1",  itemCat1);

dataModel.put("itemCat2",  itemCat2); dataModel.put("itemCat3",  itemCat3);







Writer  out=new  FileWriter("d:\\item\\"+goodsId+".html"); template.process(dataModel,  out);

out.close();





return  true;





}  catch  (Exception  e)  {





//  TODO  Auto-generated  catch  block e.printStackTrace();

return  false;





}





}





}

修改模板，展示商品分类面包屑

[AppleScript] 纯文本查看 复制代码

<ul  class="sui-breadcrumb">



<li><a  href="#">${itemCat1}</a></li>



<li><a  href="#">${itemCat2}</a></li>



<li><a  href="#">${itemCat3}</a></li>



</ul>