何为SPA:Web开发单页面,利用pushState技术实现浏览器的前进和后退,看过了gmail等Web项目,是不是觉得很酷,那么我们通过JSPTagEx框架(点击了解)来实现一个简单的单页面应用。
为什么SPA:
- 用户体验更酷更炫,加载速度更快;
- 服务端接口更规范,全程基于Restful接口,这些接口可为移动,桌面应用使用,不光Web;
- SPA往往更容易移植到手机App应用;
- 前后端彻底完全分离,各司其职,前端代码往往借助MV*框架使得代码更规范;
什么时候不该使用SPA:
- 你的网页应用需要SEO;
- 你的团队前端人员配套有限;
实现目标:
- 全程Ajax,页面无刷新;
- 支持浏览器的前进后退;
- 支持模板远程载入;
- 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