Freemarker商品詳情頁靜態化服務調用處理

時間  2019-11-30
標籤 freemarker 商品 詳情 靜態 服務 調用 處理 欄目 FreeMarker 简体版
原文   原文鏈接

---------------------------------------------------------------------------------------------javascript

[版權申明：本文系做者原創，轉載請註明出處] html

文章出處：http://blog.csdn.net/sdksdk0/article/details/53151462java

做者：朱培      ID：sdksdk0     git

--------------------------------------------------------------------------------------------github

最近在作一個移動電子商城的項目，在商品詳情頁處理這裏處理的時候，由於我項目基本上都是用的jsp來寫的頁面，可是對於一個大型的購物網站來講，要解決掉速度的問題，因此須要把jsp換成html，這裏咱們可使用Freemarker模板引擎來把jsp換成html供用戶來訪問.本文主要介紹的是如何使用Freemarker模板引擎來構建商品詳情頁，以及使用 CXF 作 webservice 發佈服務，供後臺添加商品時自動發佈html網頁。使用的是maven+SSM框架web

 

1、FreeMarker

FreeMarker模板文件主要由以下4個部分組成:
spring

1,文本:直接輸出的部分 
2,註釋:<#-- ... -->格式部分,不會輸出 
3,插值:即${...}或#{...}格式的部分,將使用數據模型中的部分替代輸出 
4,FTL指令:FreeMarker指定,和HTML標記相似,名字前加#予以區分,不會輸出apache

 

關於FreeMarker的語法使用等這裏再也不重複說明，有須要的朋友能夠自行查閱相關資料。跨域

 

步驟：1，在core項目的resource文件下新建：productDetail.ftl文件，放在cn.tf.ecps.ftl目錄下。tomcat

關鍵代碼內容以下：就是經過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>


二、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);
	}
}


三、測試

 

 

@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的流程，而不是要介紹怎麼作這個詳情頁最小單元的處理。

2、CXF服務調用

咱們在作完這個模板處理以後，記u須要後臺經過添加商品以後就能夠將這個頁面生成出來，例如我後臺有10萬個商品，那麼我就須要生成10萬個靜態的html頁面保存在個人html文件服務器上面。

例如我這個後臺，點擊發布按鈕以後，就能夠自動生成一個html文件，把商品下相關信息保存在那個html中，每次更新商品時從新點擊發布就能夠了，很是方便。


 

那麼咱們想要點擊發布按鈕以後就要生成代碼，天然須要咱們的FreeMarker了，在真實生產環境中，都是分佈式的，不在同一臺機器上面，因此這就涉及到了咱們的webService調用了。這裏使用的是appach的cxf來處理。

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

 

一、新建一個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



 

 

 

二、在項目中新建一個文件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>

 

三、在前臺工程的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>

 

 

四、運行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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程