A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 谷粒姐姐 于 2018-9-28 15:09 编辑

2.3 商品详情页模板构建
2.3.1 模板模块化引入
此时我们的 item.ftl 内容较多,当我们编辑时不容易快速找到编辑的位置,所以我们将头部分拆分到 head.ftl ,将尾部拆分到 foot.ftl ,用 include 指令在 item.ftl 中引入 。

图片2.png
内容详见配套代码

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>
生成效果如下:
图片3.png
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>




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马