该系统目前只兼容新版本浏览器,如果你要使用本系统,请使用chrome全系,firefox全系,IE10+,Safari全系,Opera全系等;
本系统入口地址:http://test.idbhost.com,(试用账号:33666490@qq.com/123456,faqee@126.com/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"); }); } });
相关推荐
Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码...
AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码
带进度条的文件上传(java+ajax,附源码)
本书从易到难、由浅入深、循序渐进系统地介绍了ASP.NET AJAX(C#)知识点和基于AJAX的Web应用系统的开发技术。全书通俗易懂,大量的实例供读者更加深刻地巩固所学习的知识,使读者更好地进行开发实践。 本书共分为15...
Dojo构建Ajax应用程序源码,包括书中用到的dojo-release-1.1.2版本,现在都不太好找到下载源了
Ajax网站开发典型实例JSP源码包
AJAX,java,hibernate,struts,mysql,eclipse应用的一个小博客源码!一些包自己加
Ajax开发,Ajax例子,Ajax教程,Ajax开发源码, Ajax技术
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
利用GWT开发高性能Ajax应用,gwt初学者的入门介绍资料,如果你已经很精通了此项技术,那么就可以不用下了
AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)
尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码...
Ajax 聊天室源码.rar
AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)-Ajax基础教程 by alixixi_com.mht
AJAX开发简略... 1 一、AJAX定义... 3 二、现状与需要解决的问题... 3 三、为什么使用AJAX. 4 四、谁在使用AJAX. 6 五、用AJAX改进你的设计... 6 例子1:数据校验... 7 例子2:按需取数据—...
使用jquery实现ajax分页含源码使用jquery实现ajax分页含源码使用jquery实现ajax分页含源码
ajax教程实例,asp+ajax,Ajax应用开发典型实例
Ajax征服——聊天室开发 源码 Ajax征服——聊天室开发 源码