网站主题实现技术-jsp include

            现在越来越多的网站都有可以让用户选择页面的风格，各种不同的主题，常见的当属于qq空间，手机主题，以及各大网站基本都有这样的功能，而这些功能都是怎么实现的呢，当然不同的网站可能有不同的实现，最常用的实现技术当属于后台代码实现和前台利用js的实现。

       前台js的实现有专门的可以直接利用的，比如jquery themes 和ext theme ，都有相应的实现，他们都是直接利用的不同的js和css的组合，使相同的数据在不同的js和css的配合下产生不同的主题，不同的风格。

       当然我在这里说的是利用后台实现的技术，其实也是靠前台不同的js和css来实现的。这里有个需求，就是页面的url不能发生变化，即在不同的主题下用户所输入的url是一样的，而且当点击切换主题后立即生效，还有试用的效果，即用户在购买该主题时可能会提出先使用一下，这个时候需要注意了，在用户试用的这段时间内，是只有该用户能看到当前的主题效果，别的用户在别的地方输入一样的url看到的仍然是试用之前的效果。

      看似简单的主题切换，里面也用到了不少的学问。我在这里讲的主要是利用jsp的include来实现。

实现需求：

      1、管理员可以通过ftp上传新做好的模板，并能查看所有的模板信息，可以删除，修改，以及是否启用

       2、店铺管理员可以查看所有的可用模板，并可以试看某一模板，最后可以切换模板

效果图：

                                                                                                                                             图1  管理员查看所有模板

 

                                                                                                                                       图2 管理员添加新模板

                                                                                                                                            图3 管理员修改模板

 

店铺管理员改变店铺页面主题

 

                                                                                                                         图4 店铺管理员查看模板

                                                                                                                                           图5 店铺页面

                                                                                                                                           图6 切换主题后的店铺页面

实现技术：

这里我用的主要是jsp 的inlude标签，即在application中存放着每个店铺的当铺主题id（对应着模板的相对路径），当用户访问页面时系统首先判断当前店铺的主题路径，然后再在include里面加上相对路径加上文件的名字。当总管理员增加和修改模板时修改application中的变量值。当店铺管理员使用主题时，修改当前session中的主题id，让include中包含session的模板，即可实现只用自己能看到使用的效果，而别的用户在这期间访问这个网页时仍然是试用前的主题。

关键代码如下：

<%@page import="net.b2c.u.util.ShopCacheUtil"%>
<%@page import="net.b2c.u.model.TempleateU"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib prefix="s" uri="/struts-tags"%>
 <s:action name="scu!getMoban" executeResult="true">
 </s:action> <%-- --%>

   <% 
     String id=request.getParameter("id");
     TempleateU templeateU= (TempleateU) request.getSession().getAttribute("templeateU"+id);
     String pageUrl="";
     if(templeateU!=null){
      pageUrl=templeateU.getPath()+"myshop.jsp"; 
     }else{
  //  	 TempleateU templeateU2= (TempleateU)application.getAttribute("AtempleateU"+id);
    	 TempleateU templeateU2= (TempleateU)ShopCacheUtil.getCache().get("AtempleateU"+id).getValue();
    	 if(templeateU2!=null){
    	  pageUrl=templeateU2.getPath()+"myshop.jsp"; 
    	 }else{
    		 pageUrl="shopContentError.jsp";
    	 }
     }
    %> 
    <%--   <% 
     String pageUrl="templeates/test/myshop.jsp"; 

    %>  --%>
     	<jsp:include page="<%=pageUrl%>"></jsp:include> 
    	
    	<%%>

其中在action中主要做的是如果当前application中和session中没有当前店铺主题id，则从数据库中加载并缓存。

                                                                            图7 文件目录结构