`
kongshanxuelin
  • 浏览: 925304 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

利用JSPTagEx开发单页面全程Ajax应用(附源码)

阅读更多

       该系统目前只兼容新版本浏览器,如果你要使用本系统,请使用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");
    	    	});
    	    }
    	});

 




 



 

 

 

 
 

  • 大小: 13.9 KB
  • 大小: 25.3 KB
  • 大小: 56 KB
  • 大小: 38.8 KB
1
1
分享到:
评论

相关推荐

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

    在本文中,我们将深入探讨如何使用JSPTagEx来开发单页面Web应用程序。JSPTagEx是一种基于JavaServer Pages(JSP)技术的扩展,它提供了更强大的标签库功能,帮助开发者更高效地构建动态网页。我们将从以下几个方面...

    Ajax应用开发典型实例-源码

    Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码Ajax应用开发典型实例-源码...

    AJAX应用小项目源码

    【标题】"AJAX应用小项目源码"指的是一个基于AJAX技术的Web应用程序,它可能是一个小型的在线博客系统。这个项目结合了多种技术,包括JavaScript的AJAX(Asynchronous JavaScript and XML)用于实现页面的异步更新,...

    Ajax网站开发典型实例JSP源码包

    在本"Ajax网站开发典型实例JSP源码包"中,我们可以深入学习如何使用Ajax与JavaServer Pages (JSP) 结合,创建高效动态的Web应用。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在...

    AjAX程序实例源码

    总结,这个" AjAX程序实例源码 "提供了一个完整的Ajax应用范例,涵盖了从客户端JavaScript的Ajax调用,到Java后端的处理流程。通过学习和分析这个实例,开发者能够深入理解Ajax技术,并具备实现在自己的项目中运用...

    完全手册ASP.NET AJAX实用开发详解 源码

    本书从易到难、由浅入深、循序渐进系统地介绍了ASP.NET AJAX(C#)知识点和基于AJAX的Web应用系统的开发技术。全书通俗易懂,大量的实例供读者更加深刻地巩固所学习的知识,使读者更好地进行开发实践。 本书共分为15...

    Ajax 聊天室源码

    通过研究和理解这个"ttccAjaxChatRoom1.0"源码,开发者可以学习到如何利用Ajax构建实时聊天室,以及如何处理前后端交互、数据库操作和安全性等问题。这对于提升Web开发技能和理解Web应用程序的工作原理非常有帮助。

    ajax标准教程源码

    这些源码涵盖了从基础到高级的Ajax应用,帮助开发者理解Ajax的工作原理和实践方法。"understanding_ajax_examples-1.1"这个文件名可能是教程的一个版本或章节,可能包含了多个演示Ajax功能的实例。 **Ajax的基本...

    ajax.dll源码

    这不仅有助于优化现有的AJAX应用,还能够启发我们构建自己的AJAX框架或库,提高开发效率和代码质量。对这些源码的深入学习,对于提升Web开发技能,尤其是对服务器端逻辑和客户端交互的理解,具有重要意义。

    Ajax应用开发典型实例

    通过这个“Ajax应用开发典型实例”,开发者可以深入理解如何在ASP.NET环境中有效利用Ajax技术,提升Web应用的性能和互动性。无论是初学者还是经验丰富的开发者,都能从中获益,进一步提升自己的技能。

    Ajax小例子源码

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新...这个Ajax小例子源码应包含了这些内容的实际应用,通过学习和实践,你可以更好地理解和掌握Ajax在Web开发中的作用和使用方法。

    ajax开发精要-概要,案例与框架源码

    4. **Vue.js的Axios插件**:Vue.js框架内集成了axios,方便进行Ajax请求,同时利用Vue的数据绑定机制轻松更新视图。 **四、源码分析** 在提供的压缩包文件中,可能包含了一些Ajax的实例代码,包括使用不同框架或...

    AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)-Ajax基础教程 by alixixi_com.mht

    AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)-Ajax基础教程 by alixixi_com.mht

    基于javaweb 的 AJAX最全面的实例源码

    在JavaWeb开发中,AJAX(Asynchronous JavaScript and XML)是一种强大的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这个“基于javaweb的AJAX最全面实例源码”集合提供了一...

    疯狂Ajax讲义源码

    《疯狂Ajax讲义源码》是一本专注于Ajax技术的深入学习资料,它是《基于J2EE的Ajax宝典》的升级版,旨在帮助读者全面掌握Ajax在实际开发中的应用。Ajax,即Asynchronous JavaScript and XML(异步JavaScript与XML),...

    Ajax聊天室(附全部源码)

    总的来说,Ajax聊天室是一个很好的学习实践平台,涵盖了Ajax的基本应用和实时通信的核心概念,是提升Web开发技能的重要途径。通过实际操作和分析源码,开发者可以掌握Ajax在实际项目中的运用,为后续的Web开发工作...

    Ajax开发,Ajax例子,Ajax教程,Ajax开发源码, Ajax技术

    本教程将深入讲解AJAX开发,包括基本概念、实例、教程以及相关的开发源码。 **1. AJAX的基本原理** AJAX的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信。当用户触发某个事件(如点击按钮)...

    尚硅谷ajax视频源码

    尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码...

    JavaWeb项目开发全程实录明日科技源码.rar

    【JavaWeb项目开发全程实录】是一本由明日科技编著的书籍,专注于JavaWeb应用程序的实践开发。这本书在2019年1月进行了首次印刷,为读者提供了丰富的实战经验,通过10个完整的开发项目,帮助学习者深入理解和掌握...

Global site tag (gtag.js) - Google Analytics