本帖最后由 谷粒姐姐 于 2018-9-28 15:09 编辑
2.3 商品详情页模板构建 2.3.1 模板模块化引入 此时我们的 item.ftl 内容较多，当我们编辑时不容易快速找到编辑的位置，所以我们将头部分拆分到 head.ftl ,将尾部拆分到 foot.ftl ,用 include 指令在 item.ftl 中引入 。
内容详见配套代码
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>
| 
收藏
淘帖
踩
