现在越来越多的网站都有可以让用户选择页面的风格,各种不同的主题,常见的当属于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 文件目录结构