Freemarker商品详情页静态化服务调用处理

简介: ---------------------------------------------------------------------------------------------[版权申明:本文系作者原创,转载请注明出处] 文章出处:http://blog.csdn.net/sdksdk0/article/details/53151462作者:朱培      ID:sdksdk0  
---------------------------------------------------------------------------------------------

[版权申明:本文系作者原创,转载请注明出处] 

文章出处:http://blog.csdn.net/sdksdk0/article/details/53151462

作者:朱培      ID:sdksdk0     

--------------------------------------------------------------------------------------------

最近在做一个移动电子商城的项目,在商品详情页处理这里处理的时候,因为我项目基本上都是用的jsp来写的页面,但是对于一个大型的购物网站来说,要解决掉速度的问题,所以需要把jsp换成html,这里我们可以使用Freemarker模板引擎来把jsp换成html供用户来访问.本文主要介绍的是如何使用Freemarker模板引擎来构建商品详情页,以及使用 CXF 做 webservice 发布服务,供后台添加商品时自动发布html网页。使用的是maven+SSM框架


一、FreeMarker

FreeMarker模板文件主要由如下4个部分组成:

1,文本:直接输出的部分 
2,注释:<#-- ... -->格式部分,不会输出 
3,插值:即${...}或#{...}格式的部分,将使用数据模型中的部分替代输出 
4,FTL指令:FreeMarker指定,和HTML标记类似,名字前加#予以区分,不会输出


关于FreeMarker的语法使用等这里不再重复说明,有需要的朋友可以自行查阅相关资料。


步骤:1,在core项目的resource文件下新建:productDetail.ftl文件,放在cn.tf.ecps.ftl目录下。

关键代码内容如下:就是通过FreeMarker的语法进行取值。

<div class="r wr">
		<div class="product">
        	<h2>${item.itemName }<span class="gray f14">${item.promotion }</span></h2>
			<div class="showPro">
				<div class="big"><a id="showImg" class="cloud-zoom" href="${file_path }${item.imgs}" rel="adjustX:10,adjustY:-1"><img title="optional title display" alt="" src="${file_path }${item.imgs}"></a></div>
				<div class="small">
					<span class="smallL" title="向左"> </span>
					<div class="smallBox">
						<div class="smallList">
							<a class="cloud-zoom-gallery here" title="red" href="${file_path }${item.imgs}" rel="useZoom: 'showImg', smallImage: '${file_path }${item.imgs}'"><img alt="thumbnail 1" src="${file_path }${item.imgs}"></a>
							<a class="cloud-zoom-gallery" title="blue" href="${file_path }${item.imgs}" rel="useZoom: 'showImg', smallImage: '${file_path }${item.imgs}'"><img alt="thumbnail 2" src="${file_path }${item.imgs}"></a>
							<a class="cloud-zoom-gallery" title="blue" href="${file_path }${item.imgs}" rel="useZoom: 'showImg', smallImage: '${file_path }${item.imgs}'"><img alt="thumbnail 3" src="${file_path }${item.imgs}"></a>
							<a class="cloud-zoom-gallery" title="blue" href="${file_path }${item.imgs}" rel="useZoom: 'showImg', smallImage: '${file_path }${item.imgs}'"><img alt="thumbnail 4" src="${file_path }${item.imgs}"></a>
							<a class="cloud-zoom-gallery" title="blue" href="${file_path }${item.imgs}" rel="useZoom: 'showImg', smallImage: '${file_path }${item.imgs}'"><img alt="thumbnail 5" src="${file_path }${item.imgs}"></a>
						</div>
					</div>
					<span class="smallR" title="向右"> </span>
				</div>
				<div class="share mt">
	
					<div id="ecpsShareIcon">
						<div class="iconSmall iconRight">
							<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>
						</div>
					</div>
				</div>
			</div>

			<form method="post" action="" name="" class="infor">
				<ul class="uls form">
				
				<li><label>移 动 价:</label><span class="word"><b id="skuPrice" class="f14 red mr">¥3999.00</b>(市场价:<del id="marketPrice">¥5789.00</del>)</span></li>
				<li><label>商品编号:</label><span class="word">${item.itemNo }</span></li>
				<li><label>商品评价:</label><span class="word"><span class="val_no val3d4" title="4分">4分</span><var class="blue">(已有17人评价)</var></span></li>
				<li><label>运  费:</label><span class="word">包邮    <a href="javascript:void(0);" class="blue">配送区域</a></span></li>
				<li><label>库  存:</label><span id="stockState" class="word">有货</span></li>
				<li><label>支付方式:</label><div class="pre word p16x16">
					<span title="网银支付" class="bank">网银支付</span>
					<span title="支付宝" class="pay">支付宝</span>
					<span title="手机支付" class="moblie">手机支付</span>
				</div></li>
				</ul>
				<div class="box_orange">
					<ul class="uls form">
					<li><label>规  格:</label><div class="pre spec">
					<#list item.skuList as sku>
							<#if sku_index == 0>
								<a href="javascript:void(0);"  class="here" skuId="${sku.skuId?c }">
									<#list sku.specList as spec>
										${spec.specValue }
									</#list>						
								</a>
							<#else>
								<a href="javascript:void(0);" skuId="${sku.skuId?c }">
									<#list sku.specList as spec>
										${spec.specValue }
									</#list>						
								</a>
							</#if>
					</#list>	
					</div></li>
<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><li class="submit"><input id="buyNow" type="button" value="" class="hand btn138x40" onclick="buy();"/><input id="addMyCart" type="button" value="" class="hand btn138x40b" onclick="addCart()"/><a href="#" title="加入收藏" class="inb fav">加入收藏</a></li></ul></div></form></div>

2、FMUtils文件

在/src/main/java/目录中新建一个util文件,这是用来处理的一个工具类。

public class FMutil {
	
	/**
	 * 
	 * @param ftlName:模板名字
	 * @param fileName:生成的html的名字
	 * @param map:数据,在freemarket模板中取数据都使用map
	 * @throws Exception
	 */
	public void ouputFile(String ftlName, String fileName,  Map<String, Object> map) throws Exception{
		//创建fm的配置
		Configuration config = new Configuration();
		//指定默认编码格式
		config.setDefaultEncoding("UTF-8");
		//设置模板的包路径
		config.setClassForTemplateLoading(this.getClass(), "/cn/tf/ecps/ftl");
		//获得包的模板
		Template template = config.getTemplate(ftlName);
		//指定文件输出的路径
		String path = "E:/myeclipse_work/ECPS/ecps-parent/ecps-portal/src/main/webapp/html";
		//定义输出流,注意的必须指定编码
		Writer writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File(path+"/"+fileName)),"UTF-8"));
		//生成模板
		template.process(map, writer);
	}
}

3、测试

@Autowired
	private EbItemService itemService;

	@Test
	public void testGeneraHtml() throws Exception {
		Map<String,Object>  map=new HashMap<String,Object> ();
		EbItem item=itemService.selectItemDetailById(3080);
		map.put("item", item);
		
		map.put("path", ECPSUtil.readProp("portal_path"));
		map.put("file_path", ECPSUtil.readProp("FILE_PATH"));
		FMutil fm=new FMutil();

	     fm.ouputFile("productDetail.ftl", item.getItemId()+".html", map);
	
	}
	

这个时候我们就可以看到页面效果出来了,在我们设置好的html目录下:就可以找到生成的html文件3080.html了




当然,在这里提一句的是,这个项目非常复杂,我只是简要的介绍一下使用FreeMarker的流程,而不是要介绍怎么做这个详情页最小单元的处理。

二、CXF服务调用

我们在做完这个模板处理之后,记u需要后台通过添加商品之后就可以将这个页面生成出来,例如我后台有10万个商品,那么我就需要生成10万个静态的html页面保存在我的html文件服务器上面。

例如我这个后台,点击发布按钮之后,就可以自动生成一个html文件,把商品下相关信息保存在那个html中,每次更新商品时重新点击发布就可以了,非常方便。



那么我们想要点击发布按钮之后就要生成代码,自然需要我们的FreeMarker了,在真实生产环境中,都是分布式的,不在同一台机器上面,所以这就涉及到了我们的webService调用了。这里使用的是appach的cxf来处理。

下载地址:http://cxf.apache.org/download.html


1、新建一个ws的接口类:EbWSItemService,这里的接口我使用了md5加密加盐处理。

@WebService
public interface EbWSItemService {
	
	public String publishItem(Long itemId,String password);

}

实现其方法

@Service
public class EbWSItemServiceImpl  implements EbWSItemService {

	@Autowired
	private EbItemService itemService;
	
	
	public String publishItem(Long itemId, String password) {
		String isOK="success";
		
		String wsPass=GetMD5.getMD5(itemId);
		if(StringUtils.equals(password, wsPass)){
			//发布
			Map<String,Object>  map=new HashMap<String,Object> ();
			EbItem item=itemService.selectItemDetailById(itemId);
			map.put("item", item);
			
			map.put("path", ECPSUtil.readProp("portal_path"));
			map.put("file_path", ECPSUtil.readProp("FILE_PATH"));
			FMutil fm=new FMutil();
			try {
				fm.ouputFile("productDetail.ftl", item.getItemId()+".html", map);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}else{
			isOK="fail";
		}
		
		return isOK;
	}
}


属性文件内容为:ecps.properties

FILE_PATH=http://localhost:8080/ecps-file

#操作类型
AUDIT_ITEM_TYPE=\u5546\u54C1\u5BA1\u6838
show_item_type=\u5546\u54C1\u4E0A\u4E0B\u67B6

portal_path=http://localhost:8080/ecps-portal

#接口加密
slat=xvzbnxsd^&&*)(*()kfmv4165323DGHSBJ




2、在项目中新建一个文件cxf-servlet.xml

内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jaxws="http://cxf.apache.org/jaxws"
	xmlns:jaxrs="http://cxf.apache.org/jaxrs" xmlns:cxf="http://cxf.apache.org/core"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
          http://www.springframework.org/schema/beans/spring-beans.xsd
            http://cxf.apache.org/jaxrs http://cxf.apache.org/schemas/jaxrs.xsd
            http://cxf.apache.org/jaxws http://cxf.apache.org/schemas/jaxws.xsd
            http://cxf.apache.org/core http://cxf.apache.org/schemas/core.xsd">
	<!-- 引入CXF Bean定义如下,早期的版本中使用 -->
	<import resource="classpath:META-INF/cxf/cxf.xml" />
	<import resource="classpath:META-INF/cxf/cxf-extension-soap.xml" />
	<import resource="classpath:META-INF/cxf/cxf-servlet.xml" />
	<!-- 
		webservice服务地址:http://localhost:8080/ecps-portal/[url-patten]/address
		serviceClass:服务接口类
		jaxws:serviceBean:服务接口的实现类
		
	 -->
	<jaxws:server id="publishItem" address="/publishItem" serviceClass="cn.tf.ecps.ws.service.EbWSItemService">
		<jaxws:serviceBean>
			<bean class="cn.tf.ecps.ws.service.impl.EbWSItemServiceImpl"></bean>
		</jaxws:serviceBean>
	</jaxws:server>
	
</beans>

3、在前台工程的web.xml中进行配置

<servlet>
		<servlet-name>cxf</servlet-name>
		<servlet-class>org.apache.cxf.transport.servlet.CXFServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>cxf</servlet-name>
		<url-pattern>/services/*</url-pattern>
	</servlet-mapping>


4、运行tomcat,通过链接访问:



里面就是一个wsdl文件。我们都知道wsdl都是从下往上读的,所以这里需要调用EbWSItemServiceService



发布服务之后我们需要使用这个cxf来生成java代码:

wsdl2java -d . -p cn.tf.ecps.stub http://localhost:8080/ecps-portal/services/publishItem?wsdl


生成好之后,将生成好的代码复制进你的工程即可。


然后在我们的port工程中,对service进行处理:

//调用服务
	public String publishItem(Long itemId, String password) {
		//创建服务访问点的集合
		EbWSItemServiceService  itemServiceService=new EbWSItemServiceService();
		//获得服务端的接口,通过服务访问点的name在前面加上get这个方法就是获得webService服务的接口方法
		EbWSItemService service = itemServiceService.getEbWSItemServicePort();
		//调用webService的发布方法
		return service.publishItem(itemId, password);
	}

最后在controller中调用那个这个service就可以了

//调用服务
	@RequestMapping("/publish.do")
	public void publish(Long itemId,PrintWriter out){
		String wsPass=GetMD5.getMD5(itemId);
		String result = null;
		try {
			result = itemService.publishItem(itemId,wsPass);
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.write(result);
	
	}

这样整个过程就完成了。



这里值得一提的是如果你发布的服务是用的localhost:8080,那么在前台工程也要用localhost:8080,否则会报错,我就是因为这个原因折腾了几个小时,原因是跨域问题。

可以通过前台来看到生成好的html页面。





项目地址:https://github.com/sdksdk0/ECPS


目录
相关文章
|
SQL 小程序 前端开发
【易售小程序项目】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】
【易售小程序项目】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】
127 0
|
SQL 小程序 JavaScript
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
69 0
|
3月前
|
缓存 负载均衡 API
抖音抖店API请求获取宝贝详情数据、原价、销量、主图等参数可支持高并发调用接入演示
这是一个使用Python编写的示例代码,用于从抖音抖店API获取商品详情,包括原价、销量和主图等信息。示例展示了如何构建请求、处理响应及提取所需数据。针对高并发场景,建议采用缓存、限流、负载均衡、异步处理及代码优化等策略,以提升性能和稳定性。
|
5月前
|
前端开发 数据库
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
这篇文章介绍了如何在SpringBoot+Vue框架下实现购物车功能,包括防止商品重复加入、展示商品信息、删除商品时的提示,以及点击图片放大的前端实现。
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
|
5月前
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
6月前
|
JSON API 数据处理
深度解析京东商品列表数据接口:功能、参数与实战技巧
京东商品列表数据接口让开发者通过HTTP请求获取京东商品详尽列表信息,包括ID、名称、价格等。接口支持参数化搜索(关键词、价格区间等),返回JSON格式数据,便于处理与分析。开发者需注册账号并创建应用以获取访问权限。应用场景涵盖市场调研、商品管理和营销策略制定等,有效提升数据驱动决策能力。
|
JSON API 数据处理
调用API接口获取淘宝商品数据:实践指南与代码解析
本文将详细介绍如何使用Python编程语言调用淘宝API接口获取商品数据。我们将从API的基本概念开始,然后逐步深入到具体的实践环节,通过实例代码演示如何获取淘宝商品数据,并进行简单的数据处理与分析。
|
消息中间件 API 数据库
细谈商品详情API接口设计
随着互联网技术的发展,商品详情信息的展示和交互变得越来越重要。为了提供更好的用户体验,我们需要设计一套高效、稳定且易于扩展的商品详情API接口。本文将详细探讨商品详情API接口的设计,包括接口的通用性、安全性和扩展性等方面,并附有相应的代码实现。
|
前端开发
实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现
实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现
89 0
|
XML JSON 缓存
Java实现根据商品ID请求西域商城商品详情数据方法
Java实现根据商品ID请求西域商城商品详情数据方法