Javashop模板解析机制

阅读更多

模板解析机制

Javashop页面的显示由Javashop模板引擎解析,模板解析机制包含两个部分:请求URL-模板文件应射和模板解析显示。

目录

 [隐藏] 
  • 1 URL-模板文件映射
  • 2 建立模板文件
  • 3 挂件使用说明
    • 3.1 widgets.xml配置
    • 3.2 自定义挂件页面
    • 3.3 使用挂件变量
    • 3.4 挂件通用参数说明
  • 4 特殊页面说明
    • 4.1 共用页面
    • 4.2 默认页面
    • 4.3 会员中心页面
  • 5 异步请求特殊URL说明
    • 5.1 返回Json式 Ajax URL调用
    • 5.2 返回HTML式 Ajax URL调用
  • 6 widgets_default.xml说明
    • 6.1 优先级
    • 6.2 配置的合并
      • 6.2.1 示例1
      • 6.2.2 示例2
    • 6.3 widgets_default.xml的位置

URL-模板文件映射

每一次页面显示都会对应一次请求,一个请求就会对应一个URL,如:/test.html,
那么我们的模板解析就由这个URL开始,这个URL可能会对应我们的一个模板文件,如:test.html。
首先我们要建立这种URL和模板文件的对应关系(也就是建立了一个HTTP请求和模板文件的对应关系),也可以称为URL-模板文件应射,通过如下步骤建立URL-模板文件应射:
用开发者角色(什么是开发者角色?)登录后台:点击开发者->工具->URL映射


点击新增按钮:

如上图所示url和模板文件分别输入/test.html
点击保存新增一条记录,这样我们便建立了一个由/test.html的url至/test.html模板文件的映射

建立模板文件

首先我们要确认我们当前模板所在的目录,登录后台,点击页面设置-》主题管理-》前台主题:

由上图圈红部分可以看出当前模板目录为default,即/themes/default (“/”代表Javashop部署到web服务器的根目录),
我们在此目录中建立一个模板文件,名为test.html,并键入“hello world!”,起动web容器(如tomcat),
访问http://ip:端口号/虚拟目录/test.html,效果如下图:

模板解析引擎根据 http://localhost:8081/test.html
找到当前模板/themes/default/test.html,并显示出此文件的内容。

挂件使用说明

widgets.xml配置

经过上述章节的讲解,我们学习到如何显示一个模板的内容,将下来我们将了解到如何展示网店的数据,如商品、商品分类等,展示这些数据需要借助“挂件”。
我们将一个页面划分为一块块的“挂件区域”,如下图所示:

挂件的作用就是在模板的相应位置输出一段HTML,这样,Javashop的一个页面就是由多个挂件HTML片段组合而成的。
接下来我们具体讲解如何使用一个挂件,首先我们在widgets.xml中定义在一模板文件中要含有哪些挂件,

  • widgets.xml的位置
widgets.xml位于当前模板根目录下,如:/themes/default/widgets.xml,如果不存在需要手工建立一个。

我们以“商品列表挂件”为例来讲解,“商品列表挂件”的作用是输入我们指定的几个商品信息,如下图所示:

他的挂件ID是goods_list ,假设在我们的test.html中只有这一个挂件,那么widgets.xml中的配置为:



 
  
  
goods_list 
{catid:'1'} 
{type:'default'} 

 


上述挂件配置中type必须指定为挂件的ID其它参数和具体的挂件相关,可参考“商品列表挂件”。
接下来在模板文件test.html中输入” ${widget_cat1_goods}”其中标红的部分为在widgets.xml中定义的挂件id,重新访问test.html,效果图如下:

自定义挂件页面

上图内容为挂件默认的HTML结构,因为没有使用样式看起来比较丑陋,下面我们介绍如何自定义这个挂件的HTML结构,
通过指定挂件的 custom_page和folder 参数我们可以让挂件输入自定义的HTML,如:



 
	
		 
			goods_list
			{catid:'1'}
			{type:'default'}
                         cat1_goods
			widget_html
					
		
	 

这样我们必须建立/themes/default/widget_html目录, 并在目录中建立cat1_goods.html文件,在文件中键入:“这是自定义挂件的内容”,
重新访问test.html,效果如下:

如果出现乱码,请确认建立的挂件页面文件格式是否为UTF-8

使用挂件变量

上述章节的讲解,我们可以实现自定义挂件的HTML,接下来我们通过挂件变量来输出的商品、分类等网店数据。
每个挂件能够输出什么数据、使用哪些变量都是相关挂件定义的,需要参考相应的挂件说明.
挂件页面使用Freemark解析的,所以使用Freemarker语法。点击这里查看Freemarker教程
商品列表挂件可以使用的变量是名为“goodsList”的商品列表变量,
此列表中每一行是一个商品数据,详细请参考“商品列表挂件说明”,我们可以通过如下的代码来循环输出商品信息:

    <#list goodsList as goods>
  • 名称:${goods.name}--价格:${goods.price}

重新访问/test.html效果图下:

挂件通用参数说明

挂件的通用参数是指:适用于任何挂件的参数。
在上述章节中我们已经使用了两个挂件的通用参数:

  • folder
  • custom_page

还有一些其它的通用挂件参数,请点击这里查看详细说明

特殊页面说明

在javashop模板解析机制中存在几个特殊的页面分别为:共用页面、默认页面、会员中心页面。

共用页面

共用页面在widgets.xml中体现为id为common的page节点,在执行任何页面时都会执行此节点配置的挂件
通过这样的机制可以使现一些公用页头、页尾共用信息的解析显示,如SEO信息、购物车条、会员信息条等。

  • 示例
       

		
			header
		

		
			member_login_bar
 			login_bar
			member	
		

	

如上代码所示,在访问任何页面时都会执行common节点中声明的header挂件和member_bar挂件,相应的也可以在任何页面使用挂件输出的html或变量。
注意:实际上不存在common这个模板页面。 一般地,我们会单独声明一个header.html,并在此页面中输出我们需要的共用挂件html,并在其它页面通过include指令包含此页面,这样使我们模板看起来更加清晰,也更易于维护。

默认页面

在我们的网站中,会有大量简单的、页面结构相同的页面,如为每个页面去制作模板会变得冗余而重复。
所以我们规定了一个id为"/default.html"的特殊页面节点,他看起来像下面这个样子:

  • 示例
	
                			
			goods_cat
                        common
			goodscat
		
					
			member_logout
		
		
			member_email_check
			
		
			member_findpassword
			member
			find_password
		
		
			find_modify_password
			member
			modify_password
				
		

这个节点中的挂件配置特殊地方是每个挂件的id是一个url(准确的说是一个url正则表达式,如可以是article-(\d).html)
上述配置我们应该建立如下的URL映射:

即:这些url统一映射到/default.html这个模板。

这样在访问某个url时,如:/findpassword.html,会解析/default.html这个节点中的id="/findpassword.html"的挂件
那么我们在/default.html该如何输出挂件的html呢?使用固定标记:${widget_main},如我们的default.html代码示例 :

${widget_goodscat}
${widget_main}

如上述代码所示,${widget_main}会输出findpassword挂件的内容,同时id为goodscat的挂件也会被解析,所以可以通过${widget_goodscat}输出相应的html。
其它以"/"开头的不会被解析,id以"/"开头的挂件同时只会解析一个,即匹配了url的那个。

会员中心页面

还有一个特殊的页面是会员中心页面,和默认页面类似的,他负责显示所有会员中心的页面,因为会员中心页面的结构也是非常类似的。

  • 示例:
	
		
			member_index
			member
			index
			yes
		
		
			member_order
			yes
		
	 	
			member_orderdetail
			yes			
		
		
			member_favorite
			yes			
			
		
			member_gnotify
			yes			
		
		
			member_info
			yes			
			
		
			member_address
			yes			
			
		
			member_pointhistory
			yes			
			
		
			member_security
			yes			
		
		
			member_comments
			yes			
			
		
			member_ask
			yes			
					
	

相应的我们的URL都要映射给/member.html这个模板,并且在member.html模板中通过${widget_main}来输出匹配URL的挂件HTML。 一般地,member.html中的内容像如下这样:



${widget_main}

异步请求特殊URL说明

对于Ajax方式的请求,javashop提供了两种方式的URL支持。

  • /widget?type=挂件id&ajax=yes&其它参数
  • /url?widgetid=挂件id&ajax=yes&其它参数

两种方式分别用于json式的数据及html式的ajax请求。

返回Json式 Ajax URL调用

URL

/widget

  • 参数type

此参数为必须,传递要调用的挂件id(beanid)

  • ajax

此参数为必须,传递值为yes

返回HTML式 Ajax URL调用

URL

正常映射的url

  • 参数widgetid

此参数为必须,传递的值为:在widgets.xml中声名的挂件id

  • ajax

此参数为必须,传递值为yes

  • 说明

以如下配置为例:

	

		
			shop_cart
			cart_total
                        cart
		

	

cart_total.html的内容为:

  • 商品费用:${goodsprice}
  • 配送费用:${shipprice}
  • 则可以通过如下url请求得到异步请求的html片断: /test.html?widgetid=cart&ajax=yes&action=getTotal 返回html为:

  • 商品费用:¥90。00
  • 配送费用:¥5.00
  • widgets_default.xml说明

    自Javashop3之后,在Javashop中默认存在着一个 widgets_default.xml,它为我们提供了默认的挂件配置

    优先级

    widgets.xml的配置优先级高于widgets_default.xml,如: 两个配置文件某个节点中分别声明了不同的挂件配置(一个page节点,分别声明了两个不同配置的挂件,挂件的id相同,但配置不同)

    • widgets_default.xml中存在下面的配置
    	
    
    		
    			header
    		
    
    	
    
    • 在widgets.xml中同样存在下面的配置
    	
    
    		
    			header
     			header_common
                            common
    		
    
    	
    

    两者都配置了关于page为common,挂件id为header的配置。上面widegets.xml中有不同的配置。
    那么这段配置将以widgets.xml中为准,即如果存在相同配置,则用widgets.xml中的配置覆盖了widgets_default.xml的配置。

     

    配置的合并

    分为两种情况:

    • 某个节点中分别声明了不同的挂件配置(一个page节点,分别声明了两个挂件,挂件的id不同)
      分别配置了不同的page节点(分别存在多个不同的page节点)

    下面分别加以说明:

    示例1

    • widgets_default.xml中存在下面的配置
    	
    
    		
    			header
    		
    
    	
    
    • 在widgets.xml中也存在id为common的page节点

    但它声明了id为member_bar的另外一个挂件配置:

    	
    
    		
    			member_bar
    			member_bar
                           common	 
    		
    
    	
    

    那么javashop会将两个配置合并,合并后后的效果为:

    	
    		
    			header 			 
    		
    
    		
    			member_bar
    			member_bar
                           common	 
    		
    
    	
    

    示例2

    • widgets_default.xml中存在下面的配置
    	
    
    		
    			header
    		
    
    	
    
    • 在widgets.xml中声明了另外page节点的配置,如:

     

    	
    
    		
    			shop_cart
    			cart
                           cart	 
    		
    
    	
    

    那么javashop会将两个配置合并,合并后后的效果为:

    	
    		
    			header 			 
    		
    	
    
           
    
    		
    			shop_cart
    			cart
                           cart	 
    		
    
    	
    

    widgets_default.xml的位置

    widgets_default.xml位于/themes/widgets_default.xml,点击这里查看他的详细配置
    强烈建议不要直接修改widgets_default.xml文件

    你可能感兴趣的:(Javashop模板制作,Javashop挂件,Javashop文档)