利用JSPTagEx开发单页面Web程序(附源码)

何为SPA：Web开发单页面，利用pushState技术实现浏览器的前进和后退，看过了gmail等Web项目，是不是觉得很酷，那么我们通过JSPTagEx框架（点击了解）来实现一个简单的单页面应用。

 

为什么SPA：

1. 用户体验更酷更炫，加载速度更快；
2. 服务端接口更规范，全程基于Restful接口，这些接口可为移动，桌面应用使用，不光Web；
3. SPA往往更容易移植到手机App应用；
4. 前后端彻底完全分离，各司其职，前端代码往往借助MV*框架使得代码更规范；

什么时候不该使用SPA：

1. 你的网页应用需要SEO；
2. 你的团队前端人员配套有限；

实现目标：

1. 全程Ajax，页面无刷新；
2. 支持浏览器的前进后退；
3. 支持模板远程载入；
4. Restful API演示；

实现步骤：

• 所有符合链接规范的转向同一页面：/teams打头的URL为SPA，由于是多页面，所以你必须借助一些代码或借助工具将所有的URL为/teams打头的都转向到home.html这个页面，这里用JSPTagEx的TagRest注解实现，即代码方式：

@TagRest(value="teams/**")
public class Home extends AjaxServlet{
	private static final long serialVersionUID = -8814286860867527336L;
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		redirect(request,response,"/spa/home.html");
	}
}

 

• 单页面HTML：这里我们定义一下单页面HTML结果，如下图：

 

• 选取前端工具，使用pushState：我们这里选用了Backbone.js，所以定义一个路由，并启用PushState，以下是app.js的所有代码：

function openMenu(page)
{
	var index = 0;
	if(page == "page1"){
		index = 1;
	}else if(page == "page2"){
		index = 2;
	}
	$(".menu li").removeClass("cur");
	$(".menu li").eq(index).addClass("cur");
}

$LAB
    .script("/spa/js/jquery.min.js").wait()
    .script("/spa/js/underscore-min.js").wait(function(){
    })
    .script("/spa/js/backbone-min.js").wait(function(){
    	$("#loading").hide();
    	
    	$(document).ready(function() {
    		
  	        var PageView = Backbone.View.extend({
	    	    tagName: 'div',
	    	    id: 'app',
	    	    initialize:function(pageid){
	    	    	this.pageid = pageid;
	    	    },
	    	    render: function() {
	    	      this.$el.html(_.templateFromUrl('/restful/teams/jsp?pagename='+this.pageid));
	    	      return this;
	    	    },
	        });
    		
    		$(document).on('click', 'a[href^="teams/"]', function(e) {
    		    e.preventDefault();
    		    var href =  $(e.currentTarget).attr('href');
    		    if(href == "teams/home"){
    		    	Backbone.history.navigate("", { trigger: true });
    		    }else{
    		    	Backbone.history.navigate(href, { trigger: true });
    		    }
    		});
    		
	    	var AppRouter = Backbone.Router.extend({
	    	    routes: {
	    	      '': 'root',
	    	      'teams(/:pageid)': 'goPage'
	    	    },
	    	    initialize: function() {
	    	    },
	    	    root: function() {
	    	      openMenu("teams/home");
	    	      $("#container").html("Home Page");
	    	    },
	    	    goPage: function(pageid) {
	    	      openMenu(pageid)
	    	      $("#container").html(new PageView(pageid).render().$el.html());
	    	    }
	    	});
	    	
	    	new AppRouter();
	    	Backbone.history.start({ pushState: true, root: '/' });
    	});
    });

 

• 运行看看效果：

 

源码见附件src.rar