利用JSPTagEx开发单页面全程Ajax应用（附源码）

       该系统目前只兼容新版本浏览器，如果你要使用本系统，请使用chrome全系，firefox全系，IE10+，Safari全系，Opera全系等；

本系统入口地址：http://test.idbhost.com，(试用账号：[e-mail]/123456，[e-mail]/123456)，或动动小手自己注册吧:)

欢迎来Q - Q群讨论：431040030(请注明Java等字样），可在群里下载整个项目源码

 

技术路线

小小系统的背后，它可蕴藏着诸多好玩的技术哦:)

 

• 基于JSPTagEx框架全程功能点探索的项目：缓存，AOP，Rewrite，高可读URI等；
• SPA：真正全程Ajax，相比MPA网页应用，他的开发难度不是大了一点点哦:)
• Restful API：Get,Put,Post,Delete请求标准化，只有现代浏览器才全支持哦:)
• HTML5：有好玩的HTML5特有技术哦，你发现了么:)
• Web推送
• 一次登录，永久使用；

源码分享

首先需要一个能支持SPA开发的js框架，我们选用了Backbone，在后台方面，需要将所有请求转发到一个servlet来处理，代码如下：

 

@TagRest(value = "teams/***")
public class Home extends AjaxServlet {
	private static final Logger logger = LogManager.getLogger(Home.class);
	private static final long serialVersionUID = -8814286860867527336L;
	private static final UserService userService = new UserService();
	private static final TeamService teamService = new TeamService();
	

	@Override
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String token = StrUtil.formatNullStr(getCookie(request, TagConst.SESSIONKEY.SESSION_ACCESSKEY, ""));
		logger.info("token:"+token,"cooke:"+getCookie(request, TagConst.SESSIONKEY.SESSION_ACCESSKEY, ""));
		if (token.equals("")) {
			response.sendRedirect("/login.html");
		} else {
			forward(request, response, "/index.html");
		}
	}
	
	private void forward(HttpServletRequest request,HttpServletResponse response, String path){
		try {
			request.getRequestDispatcher(StrUtil.formatNullStr(path)).forward(request,response);
		} catch (ServletException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	

}

 

 

这里用到了框架的***，表示所有teams前缀的请求都拦截到这个servlet处理，在js方面定义route：

$.webApp.AppRouter = Backbone.Router.extend({
    	    routes: {
    	      '': 'root',
    	      'teams/auth/logout': 'logout',
    	      'teams(/:pageid)': 'goPage',
    	      'teams/project/edit(/:id)':'goProjectEdit',
    	      'teams/project/create':'goProjectCreate',
    	      'teams/project(/:id)':'goProject', 
    	    },
    	    initialize: function() {
    	    },
    	    logout:function(){
    	    	$.get("/restful/api/user/logout",function(json){
    	    		location.reload();
    	    	});
    	    },
    	    root: function() {
    	    	Backbone.history.navigate("teams/myindex", { trigger: true });
    	    },
    	    goPage: function(pageid) {
    	    	if(pageid == "myindex"){
        	    	if($.webApp.teamList == undefined || $.webApp.teamList.length == 0){
        	    		$("h3[action=showmyteam]").text("尚未加入Team");
        	    		var html = _.templateFromUrl('/restful/teams/template?pagename=belong_zero_team');
        				$("#container").html(html());
        	    	}
        	    	else{
        	    		$("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());
        	    	}
    	    	}
    	    	else{
    	    		$("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());
    	    	}
    	    	$.webApp.initMenu(function(){
    	    		if(pageid == "sql_execute"){
    	    			pageid = "sql";
    	    		}
    	    		if(pageid == "weekly"){
    	    			pageid = "log";
    	    		}
    	    		$.webApp.openMenu(pageid);
    	    	});
    	    },
    	    goProject:function(id){
    	    	$("#container").html(new $.webApp.TemplateView("project", {prjid:id}).render().$el.html());
    	    	$.webApp.initMenu(function(){
    	    		$.webApp.openMenu("index");
    	    	});
    	    },
    	    goProjectCreate:function(){
    	    	$("#container").html(new $.webApp.TemplateView("new_project",{prjid:""}).render().$el.html());
    	    	$.webApp.initMenu(function(){
    	    		$.webApp.openMenu("index");
    	    	});
    	    },
    	    goProjectEdit:function(id){
    	    	$("#container").html(new $.webApp.TemplateView("new_project",{prjid:id}).render().$el.html());
    	    	$("#psuhBtn").html("保存项目");
    	    	$.webApp.initMenu(function(){
    	    		$.webApp.openMenu("index");
    	    	});
    	    }
    	});