`

动态主页

    博客分类：
  • 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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| <<了不起的Node.js:将JavaScript进行到底>> ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics