普遍地,你只向那些登陆成功的用户展示你的基于GWT的app,在这篇文章中,我们来介绍几种完成用户验证的方法,同时高效地利用网络。
1.RPC的静态网页
2.在web.xml中作安全约束
3.用servelet作主页
4.基于模板的主页
RPC的静态网页
一般的做法是在EntryPoint 的onModuleLoad() 方法中调用GWT-RPC服务来验证用户是否已经登录。这种方式在装载GWT模块的时候发起一个GWT-RPC请求。代码如下:
public void onModuleLoad() { // loginService is a GWT-RPC service that checks if the user is logged in loginService.checkLoggedIn(new AsyncCallback<Boolean> { public void onSuccess(Boolean loggedIn) { if (loggedIn) { showApp(); } else { Window.Location.assign("/login"); } } // ...onFailure() } }
此时让我们来考虑一下如果用户没有登录会发生哪些事情:
1.你的app被请求和你的GWT主页(yourmodule.html)被下载
2.module.nocache.js被请求和下载
3.基于浏览器类型的MD5.cache.htm被选择和下载
4.你的GWT模块被下载并发起GWT-RPC请求验证用户是否已经登录--如果没有,需要跳转到 登录页面
总共有4次服务器请求,仅仅只是为了跳转到登录页面。并且步骤3下载了整个app.即使你善于code-splitting,但至少,为了验证用户是否登录,一部分代码是必须被下载的。
最理想的情况是只在用户被认证通过的情况下展示你的GWT app。那样,可以跳过步骤2,只有在用户登录了的情况下才执行步骤2。
在web.xml中作安全约束
另外一个办法是在web.xml中作安全约束,例如,利用google app engine ,你可以定义一个安全约束去约束那些用 Google Accounts登录的用户对所有页面(包括静态主页)的一个访问权限(具体查看Security and Authentication)。如果用户没有登录,google app engine会将用户重定向到Google Accounts的登录页面。
用servelet作主页
一个更好的办法是用java servlet生成html主页来代替静态的html主页,这种灵活的方法可以自定义认证规则,同时还可以根据不同用户产生不同的页面内容。下面是一个例子:
public class GwtHostingServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); // Print a simple HTML page including a <script> tag referencing your GWT module as the response PrintWriter writer = resp.getWriter(); writer.append("<html><head>") .append("<script type=\"text/javascript\" src=\"sample/sample.nocache.js\"></script>") .append("</head><body><p>Hello, world!</p></body></html>"); } }
这个servlet发回响应然后执行GWT模块,这个过程就像是应用静态html一样。记住我们现在在servlet中生成html代码,我们可以根据不同的请求生成不同的页面内容。因此,我们可以做更多有趣的事情。
下面的例子用google app 的 Users API 来检查用户是否登录。即使你不用app engine,但是你可以想象下面的代码与servlet中的代码有哪些稍微不同。
// In GwtHostingServlet's doGet() method...
PrintWriter writer = resp.getWriter(); writer.append("<html><head>"); UserService userService = UserServiceFactory.getUserService(); if (userService.isUserLoggedIn()) { // Add a <script> tag to serve your app's generated JS code writer.append("<script type=\"text/javascript\" src=\"sample/sample.nocache.js\"></script>"); writer.append("</head><body>"); // Add a link to log out writer.append("<a href=\"" + userService.createLogoutURL("/") + "\">Log out</a>"); } else { writer.append("</head><body>"); // Add a link to log in writer.append("<a href=\"" + userService.createLoginURL("/") + "\">Log in</a>"); } writer.append("</body></html>");
这个servlet现在只向登录的用户展示你的GWT app,同时在页面上显示登录和注销的链接。
但是,我们还可以利用动态主页生成的servlet来做更多有趣的事情。假使你想传递一些像用户邮箱地址之类的数据从servlet到GWT以便GWT模块加载的时候邮箱地址已经存在。
你可以在onModuleLoad()方法中发起GWT-RPC请求,但是这意味着你发送了一次请求来下载你的GWT模块,然后发起另外一次请求来获得这个数据。一个更高效的办法是将这些初始化数据保存在javascript的变量中写到主页页面里。
// In GwtHostingServlet's doGet() method... writer.append("<html><head>"); writer.append("<script type=\"text/javascript\" src=\"sample/sample.nocache.js\"></script>"); // Open a second <script> tag where we will define some extra data writer.append("<script type=\"text/javascript\">"); // Define a global JSON object called "info" which can contain some simple key/value pairs writer.append("var info = { "); // Include the user's email with the key "email" writer.append("\"email\" : \"" + userService.getCurrentUser().getEmail() + "\""); // End the JSON object definition writer.append(" };"); // End the <script> tag writer.append("</script>"); writer.append("</head><body>Hello, world!</body></html>");
现在,你的GWT代码可以利用JSNI获得这些数据,像下面这样:
public native String getEmail() /*-{ return $wnd.info['email']; }-*/;
另外,你也可以考虑GWT的 Dictionary 类
public void onModuleLoad() { // Looks for a JS variable called "info" in the global scope Dictionary info = Dictionary.getDictionary("info"); String email = info.get("email"); Window.alert("Welcome, " + email + "!"); }
基于模板的主页
当你需要增加许多动态元素到你的主页中的时候,你值得考虑用一些模板类语言像jsp来增加你代码的可读性。下面是jsp代替servlet的例子:
<!-- gwt-hosting.jsp --> <html> <head> <% UserService userService = UserServiceFactory.getUserService(); if (userService.isUserLoggedIn()) { %> <script type="text/javascript" src="sample/sample.nocache.js"></script> <script type="text/javascript"> var info = { "email" : "<%= userService.getCurrentUser().getEmail() %>" }; </script> </head> <body> <a href="<%= userService.createLogoutURL(request.getRequestURI()) %>">Log out</a> <% } else { %> </head> <body> <a href="<%= userService.createLoginURL(request.getRequestURI()) %>">Log in</a> <% } %> </body> </html>
你可以在web.xml 中声明这个jsp页面作为你的欢迎页面,
<welcome-file-list>
<welcome-file>gwt-hosting.jsp</welcome-file>
</welcome-file-list>
以上是一些基本例子,这些例子都是基于最小http请求次数来动态访问你的GWT app。运用这些技术,你可以消除GWT-RPC请求在你的模块被加载的时候,这也就意味着更少的用户等待时间和更快的GWT 应用。
原文地址:http://www.gwtproject.org/articles/dynamic_host_page.html
相关推荐
《dede动态首页代码解析与应用》 在网站开发中,动态首页是一种常见的技术实践,它使得网站内容可以根据用户交互或者服务器端的数据实时更新。在本文中,我们将深入探讨"dede动态首页代码",了解其工作原理以及如何...
H5动态主页模板是网页设计...综上所述,H5动态主页模板的设计与开发涵盖了HTML5、CSS3、JavaScript等核心技术,结合现代前端框架和工具,可以构建出既美观又功能丰富的移动端首页,满足用户对互动性和视觉体验的需求。
非常精美的动态首页效果, Canvas酷炫3D拖动圆点动画特效是一款酷炫拖动的3D圆点粒子背景动画特效。
网站动态首页
动态主页是指能够根据用户交互或实时数据更新内容的网站主页。与静态主页相比,动态主页更具有吸引力和互动性,能够提供更加丰富的用户体验。 二、Dreamweaver的界面和工作流程 1. **启动界面**:打开Dreamweaver后...
【大型网站设计服务器端动态主页设计】 在网页设计领域,对于个人或小型网站,静态HTML、CSS和JavaScript等技术足以创建美观且具有交互性的页面。然而,对于大型或商业网站,仅靠这些基础技术无法满足其对信息管理...
《王者荣耀动态界面首页》 在数字娱乐领域,游戏设计与用户体验是至关重要的因素,而《王者荣耀》作为一款深受玩家喜爱的多人在线战斗竞技游戏,其动态界面首页无疑是吸引玩家、提升游戏体验的重要组成部分。本篇将...
【当当网动态首页模板】是一个旨在重现当当网首页功能和设计的网页模板。这个模板包含了一系列必要的元素,如源代码、CSS样式表、JavaScript文件以及相关图片资源,旨在为开发者提供一个完整的框架,用于创建与当当...
【科技感动态效果引导页官网源码】 在网站设计中,引导页(Landing Page)是一种重要的元素,它通常用于初次访问者展示产品或服务的关键信息,吸引用户的注意力并引导他们进行下一步操作。本资源提供的是一款科技感...
总结来说,"yuyu.rar"是一个使用ASP技术构建的个人动态主页,它利用ASP的特性和组件实现了网页的动态交互,包括可能的资源下载服务。这个项目展示了ASP在创建个性化、交互性强的网站方面的潜力。对于学习ASP和动态...
第3章详细介绍了用Dreaweavei’MX实现动态数据库页面设计的方法,使用这种方法,不用编写程序,就可以设计简单的动态网页:第4章介绍HTML语言:第5章介绍如何使用’VBScript脚本语言设计交互和动态主页:第6~9章...
《DUILIB动态界面开发详解》 DUILIB是一个强大的用户界面库,它为开发者提供了在C++环境中创建精美、动态的图形用户界面的能力。在本文中,我们将深入探讨如何利用Visual Studio 2013工具开发基于DUILIB的动态界面...
### ASP.NET动态网页设计大作业报告 #### 一、项目概述 本次大作业的主要目标是设计并实现一个基于ASP.NET技术的购物网站。项目由第16组成员李明亮完成,学号为2015011453,班级为计算机二班。 #### 二、项目内容...
【标题】"炫酷的动态登录页面"是一个充满活力和技术感的设计作品,它结合了JavaScript、CSS和jQuery三种核心技术,为用户提供了一种引人入胜的登录体验。在这个登录页面中,用户不仅可以享受到美观的界面设计,还能...
- **配置IIS**:配置IIS以指向DWEB2.0模板所在的文件夹,将网站的缺省首页文件名设置为index.asp,确保模板能被正确加载和运行。 #### 五、总结 动态网站实训不仅涵盖了动态与静态网页的基本概念及其区别,还深入...
- **登录验证**:根据用户名密码是否正确,动态决定跳转到主页还是错误提示页。 - **多系统集成**:基于用户的权限或角色,动态选择跳转到相应的子系统或模块。 - **个性化推荐**:根据用户的偏好或行为记录,动态...
ASP可以用来创建动态个人主页,通过服务器端的编程实现如新闻发布、访客计数、留言功能等互动元素,使得个人主页更加生动有趣。 【留言功能实现】 在ASP中实现留言功能,一般会涉及以下几个关键步骤: 1. 数据库...
`jQuery.rotate.js` 提供了一个方法,使开发者能够轻松地添加旋转动画到图片元素,增强了网页的动态感。 3. **Animate.css**:这是一个包含大量预定义CSS动画的库,只需简单地将类名添加到元素上,即可实现各种动画...
精密GPS动态测量采用载波相位差分技术,其标准测量模式为,一台GPS接收机置于已知点,作为基准站来进行静态测量,另一台GPS接收机置于载体上,作为流动站来进行动态测量。两台接收机同步观测相同的卫星,然后将两台...
【标题】"基于动态粒子群算法的动态环境寻优算法"是针对复杂优化问题的一种解决方案。粒子群优化(PSO)算法是一种源自生物社会行为的全局优化方法,它通过模拟鸟群或鱼群的群体行为来寻找问题空间中的最优解。在...