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

PushState HTML5 Ajax JSPTagEx J2EE 

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

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

 

技术路线

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

 

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

源码分享

伦理片 http://www.dotdy.com/

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

 

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

Js代码  

1. $.webApp.AppRouter = Backbone.Router.extend({  
2.             routes: {  
3.               '': 'root',  
4.               'teams/auth/logout': 'logout',  
5.               'teams(/:pageid)': 'goPage',  
6.               'teams/project/edit(/:id)':'goProjectEdit',  
7.               'teams/project/create':'goProjectCreate',  
8.               'teams/project(/:id)':'goProject',   
9.             },  
10.             initialize: function() {  
11.             },  
12.             logout:function(){  
13.                 $.get("/restful/api/user/logout",function(json){  
14.                     location.reload();  
15.                 });  
16.             },  
17.             root: function() {  
18.                 Backbone.history.navigate("teams/myindex", { trigger: true });  
19.             },  
20.             goPage: function(pageid) {  
21.                 if(pageid == "myindex"){  
22.                     if($.webApp.teamList == undefined || $.webApp.teamList.length == 0){  
23.                         $("h3[action=showmyteam]").text("尚未加入Team");  
24.                         var html = _.templateFromUrl('/restful/teams/template?pagename=belong_zero_team');  
25.                         $("#container").html(html());  
26.                     }  
27.                     else{  
28.                         $("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());  
29.                     }  
30.                 }  
31.                 else{  
32.                     $("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());  
33.                 }  
34.                 $.webApp.initMenu(function(){  
35.                     if(pageid == "sql_execute"){  
36.                         pageid = "sql";  
37.                     }  
38.                     if(pageid == "weekly"){  
39.                         pageid = "log";  
40.                     }  
41.                     $.webApp.openMenu(pageid);  
42.                 });  
43.             },  
44.             goProject:function(id){  
45.                 $("#container").html(new $.webApp.TemplateView("project", {prjid:id}).render().$el.html());  
46.                 $.webApp.initMenu(function(){  
47.                     $.webApp.openMenu("index");  
48.                 });  
49.             },  
50.             goProjectCreate:function(){  
51.                 $("#container").html(new $.webApp.TemplateView("new_project",{prjid:""}).render().$el.html());  
52.                 $.webApp.initMenu(function(){  
53.                     $.webApp.openMenu("index");  
54.                 });  
55.             },  
56.             goProjectEdit:function(id){  
57.                 $("#container").html(new $.webApp.TemplateView("new_project",{prjid:id}).render().$el.html());  
58.                 $("#psuhBtn").html("保存项目");  
59.                 $.webApp.initMenu(function(){  
60.                     $.webApp.openMenu("index");  
61.                 });  
62.             }  
63.         });  

 

 

影音先锋电影 http://www.iskdy.com/