61分布式电商项目 - 商品详情页

需求分析

运用 Freemarker 技术来实现商品详细页的静态化。通过地址栏输入某地址，如下形式 http://localhost:9101/gen_item.do？goodsId=149187842867952 能在本地电脑某目录生成商品详细页，页面的名称为商品 id.html

工程搭建

1.服务接口层 创建 pinyougou-page-interface 工程，创建 com.pinyougou.page.service 包,包下创建接口

/**
* 商品详细页接口
* @author Administrator
*
*/
public interface ItemPageService {
/**
* 生成商品详细页
* @param goodsId
*/
public boolean genItemHtml(Long goodsId);
}

2.服务实现层

1）创建 war 工程 pinyougou-page-service

2）pom.xml 引入依赖 参见其它服务工程, 另外添加 freemarker 依赖

 org.freemarker 
	freemarker

（3）添加 web.xml 参见其它服务工程 （4）spring 配置文件 参见其它服务工程 ，另外配置：

（5）创建属性文件page.properties,用于配置网页生成目录，内容为：

pagedir=d:\\item\\

（6）建立 com.pinyougou.page.service.impl 包，包下建立类

@Service
public class ItemPageServiceImpl implements ItemPageService {

@Value("${pagedir}")
private String pagedir;

@Autowired
private FreeMarkerConfig freeMarkerConfig;

@Autowired
private TbGoodsMapper goodsMapper;

@Autowired
private TbGoodsDescMapper goodsDescMapper;

@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);Writer out=new FileWriter(pagedir+goodsId+".html");template.process(dataModel, out);out.close();return true;} 
	catch (Exception e) {
			e.printStackTrace();return false; 
		}
 	}
  }

（7）将 item.html 拷贝至 web-inf/ftl 下 ，修改扩展名为 ftl ,将商品名称用插值代替

	${goods.goodsName}

（8）在 D 盘建立文件夹 item,将必要的样式表和 Js 拷贝到此目录下，此目录为生成的目录

3 运营商管理后台

（1）pinyougou-manager-web 引入依赖 pinyougou-page-interface

（2）在 GoodsController.java 中新增方法

@Reference(timeout=40000)
private ItemPageService itemPageService;

/**
* 生成静态页（测试）
* @param goodsId
*/
@RequestMapping("/genHtml")
public void genHtml(Long goodsId){
	itemPageService.genItemHtml(goodsId);
}

商品详情页模板构建

1.模板模块化引入 此时我们的 item.ftl 内容较多，当我们编辑时不容易快速找到编辑的位置，所以我们将头部分拆分到 head.ftl ,将尾部拆分到 foot.ftl ,用 include 指令在 item.ftl 中引入 。 2. 生成基本数据 在模板中找到合适的位置，用插值替换静态文本

${goods.caption}

¥${goods.price}降价通知

 ${goodsDesc.introduction}

${goodsDesc.packageList}
${goodsDesc.saleService}

3 生成图片列表 编辑模板文件

这一句要转换图片列表的 json 字符串 图片部分的代码

	
	0)>
		
	
	



	

		

		
			

		
		
	

4 生成扩展属性列表 修改模板 首先进行 json 转换

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

	
		
${item.text} ：${item.value}
	

5 生成规格列表 修改模板 转换规格列表

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

	

	${specification.attributeName}



	${item}

6 生成商品类型面包屑 修改 ItemPageServiceImpl ，读取三级商品分类名称，加入到数据模型中

@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 blocke.printStackTrace();
return false; 
} 
} 
}

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

	
${itemCat1}
	
${itemCat2}
	
${itemCat3}

商品详细页是静态页，所以在开发阶段我们可以使用 tomcat 来进行测试。部署在生产环境是部署在 Nginx 中。