`

动态主页

    博客分类:
  • GWT
 
阅读更多

     普遍地,你只向那些登陆成功的用户展示你的基于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动态首页代码解析与应用》 在网站开发中,动态首页是一种常见的技术实践,它使得网站内容可以根据用户交互或者服务器端的数据实时更新。在本文中,我们将深入探讨"dede动态首页代码",了解其工作原理以及如何...

    h5动态主页模板h5动态主页模板

    H5动态主页模板是网页设计...综上所述,H5动态主页模板的设计与开发涵盖了HTML5、CSS3、JavaScript等核心技术,结合现代前端框架和工具,可以构建出既美观又功能丰富的移动端首页,满足用户对互动性和视觉体验的需求。

    非常精美的动态首页效果

    非常精美的动态首页效果, Canvas酷炫3D拖动圆点动画特效是一款酷炫拖动的3D圆点粒子背景动画特效。

    网站动态首页.rar

    网站动态首页

    dreamweaver动态主页板块

    动态主页是指能够根据用户交互或实时数据更新内容的网站主页。与静态主页相比,动态主页更具有吸引力和互动性,能够提供更加丰富的用户体验。 二、Dreamweaver的界面和工作流程 1. **启动界面**:打开Dreamweaver后...

    大型网站设计服务器端动态主页设计.docx

    【大型网站设计服务器端动态主页设计】 在网页设计领域,对于个人或小型网站,静态HTML、CSS和JavaScript等技术足以创建美观且具有交互性的页面。然而,对于大型或商业网站,仅靠这些基础技术无法满足其对信息管理...

    王者荣耀动态界面首页.rar

    《王者荣耀动态界面首页》 在数字娱乐领域,游戏设计与用户体验是至关重要的因素,而《王者荣耀》作为一款深受玩家喜爱的多人在线战斗竞技游戏,其动态界面首页无疑是吸引玩家、提升游戏体验的重要组成部分。本篇将...

    当当网动态首页模板

    【当当网动态首页模板】是一个旨在重现当当网首页功能和设计的网页模板。这个模板包含了一系列必要的元素,如源代码、CSS样式表、JavaScript文件以及相关图片资源,旨在为开发者提供一个完整的框架,用于创建与当当...

    科技感动态效果引导页官网源码_引导页_

    【科技感动态效果引导页官网源码】 在网站设计中,引导页(Landing Page)是一种重要的元素,它通常用于初次访问者展示产品或服务的关键信息,吸引用户的注意力并引导他们进行下一步操作。本资源提供的是一款科技感...

    yuyu.rar_ASP 动态 网页_个人主页_个人动态网页_动态 网页_动态网页

    总结来说,"yuyu.rar"是一个使用ASP技术构建的个人动态主页,它利用ASP的特性和组件实现了网页的动态交互,包括可能的资源下载服务。这个项目展示了ASP在创建个性化、交互性强的网站方面的潜力。对于学习ASP和动态...

    动态网页程序设计

    第3章详细介绍了用Dreaweavei’MX实现动态数据库页面设计的方法,使用这种方法,不用编写程序,就可以设计简单的动态网页:第4章介绍HTML语言:第5章介绍如何使用’VBScript脚本语言设计交互和动态主页:第6~9章...

    DUILIB制作动态界面new

    《DUILIB动态界面开发详解》 DUILIB是一个强大的用户界面库,它为开发者提供了在C++环境中创建精美、动态的图形用户界面的能力。在本文中,我们将深入探讨如何利用Visual Studio 2013工具开发基于DUILIB的动态界面...

    ASP.NET动态网页设计大作业报告

    ### ASP.NET动态网页设计大作业报告 #### 一、项目概述 本次大作业的主要目标是设计并实现一个基于ASP.NET技术的购物网站。项目由第16组成员李明亮完成,学号为2015011453,班级为计算机二班。 #### 二、项目内容...

    炫酷的动态登录页面

    【标题】"炫酷的动态登录页面"是一个充满活力和技术感的设计作品,它结合了JavaScript、CSS和jQuery三种核心技术,为用户提供了一种引人入胜的登录体验。在这个登录页面中,用户不仅可以享受到美观的界面设计,还能...

    动态网站实训

    - **配置IIS**:配置IIS以指向DWEB2.0模板所在的文件夹,将网站的缺省首页文件名设置为index.asp,确保模板能被正确加载和运行。 #### 五、总结 动态网站实训不仅涵盖了动态与静态网页的基本概念及其区别,还深入...

    给Form动态赋值并动态转向

    - **登录验证**:根据用户名密码是否正确,动态决定跳转到主页还是错误提示页。 - **多系统集成**:基于用户的权限或角色,动态选择跳转到相应的子系统或模块。 - **个性化推荐**:根据用户的偏好或行为记录,动态...

    漂亮的asp动态个人主页

    ASP可以用来创建动态个人主页,通过服务器端的编程实现如新闻发布、访客计数、留言功能等互动元素,使得个人主页更加生动有趣。 【留言功能实现】 在ASP中实现留言功能,一般会涉及以下几个关键步骤: 1. 数据库...

    一个带点动态效果的html5引导页代码html+css+js

    `jQuery.rotate.js` 提供了一个方法,使开发者能够轻松地添加旋转动画到图片元素,增强了网页的动态感。 3. **Animate.css**:这是一个包含大量预定义CSS动画的库,只需简单地将类名添加到元素上,即可实现各种动画...

    RTKlib关于高精度GPS动态定位函数与处理过程整理.rar_GPS动态定位_RTKLIB GPS_rtklib_动态定位_高

    精密GPS动态测量采用载波相位差分技术,其标准测量模式为,一台GPS接收机置于已知点,作为基准站来进行静态测量,另一台GPS接收机置于载体上,作为流动站来进行动态测量。两台接收机同步观测相同的卫星,然后将两台...

    基于动态粒子群算法的动态环境寻优算法

    【标题】"基于动态粒子群算法的动态环境寻优算法"是针对复杂优化问题的一种解决方案。粒子群优化(PSO)算法是一种源自生物社会行为的全局优化方法,它通过模拟鸟群或鱼群的群体行为来寻找问题空间中的最优解。在...

Global site tag (gtag.js) - Google Analytics