3.9.11.13. JavaScript 用法示例

本节包含在 JavaScript 中使用 REST API v2 的示例，此处 JavaScript 运行在 HTML 页面中。该页面最初显示登录表单，登录成功后显示消息和实体列表。

为简单起见，我们将使用 modules/web/web/VAADIN 文件夹存储 HTML、CSS 和 JavaScript 文件，因为默认情况下，部署的 Web 应用程序的相应的文件夹用来提供静态资源。因此无需对 Tomcat 应用程序服务器进行任何配置。生成的 URL 将以 http://localhost:8080/app/VAADIN 开头，因此不要在真实环境的应用程序中使用此方法 - 而应该为静态资源创建一个具有特定上下文的单独 Web 应用程序。

下载 jQuery 和 Bootstrap 并复制到项目的 modules/web/web/VAADIN 文件夹。创建 customers.html 和 customers.js 文件，因此文件夹的内容应如下所示：

  1. bootstrap.min.css
  2. customers.html
  3. customers.js
  4. jquery-3.1.1.min.js

customers.html 文件内容：

  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  4.         <link rel="stylesheet" href="bootstrap.min.css"/>
  5.     </head>
  6.     <body>
  7.         <div style="width: 300px; margin: auto;">
  8.             <h1>Sales</h1>
  10.             <div id="loggedInStatus" style="display: none" class="alert alert-success">
  11.                 Logged in successfully
  12.             </div>
  13.             <div id="loginForm">
  14.                 <div class="form-group">
  15.                     <label for="loginField">Login:</label>
  16.                     <input type="text" class="form-control" id="loginField">
  17.                 </div>
  18.                 <div class="form-group">
  19.                     <label for="passwordField">Password:</label>
  20.                     <input type="password" class="form-control" id="passwordField">
  21.                 </div>
  22.                 <button type="submit" class="btn btn-default" onclick="login()">Submit</button>
  23.             </div>
  25.             <div id="customers" style="display: none">
  26.                 <h2>Customers</h2>
  27.                 <ul id="customersList"></ul>
  28.             </div>
  29.         </div>
  30.         <script type="text/javascript" src="customers.js"></script>
  31.     </body>
  32. </html>

customers.js 文件内容：

  1. var oauthToken = null;
  2. function login() {
  3.     var userLogin = $('#loginField').val();
  4.     var userPassword = $('#passwordField').val();
  5.     $.post({
  6.         url: 'http://localhost:8080/app/rest/v2/oauth/token',
  7.         headers: {
  8.             'Authorization': 'Basic Y2xpZW50OnNlY3JldA==',
  9.             'Content-Type': 'application/x-www-form-urlencoded'
  10.         },
  11.         dataType: 'json',
  12.         data: {grant_type: 'password', username: userLogin, password: userPassword},
  13.         success: function (data) {
  14.             oauthToken = data.access_token;
  15.             $('#loggedInStatus').show();
  16.             $('#loginForm').hide();
  17.             loadCustomers();
  18.         }
  19.     })
  20. }
  22. function loadCustomers() {
  23.     $.get({
  24.         url: 'http://localhost:8080/app/rest/v2/entities/sales$Customer?view=_local',
  25.         headers: {
  26.             'Authorization': 'Bearer ' + oauthToken,
  27.             'Content-Type': 'application/x-www-form-urlencoded'
  28.         },
  29.         success: function (data) {
  30.             $('#customers').show();
  31.             $.each(data, function (i, customer) {
  32.                 $('#customersList').append("<li>" + customer.name + " (" + customer.email + ")</li>");
  33.             });
  34.         }
  35.     });
  36. }

来自用户输入的登录名和密码通过 POST 请求发送到服务器，并在 Authorization 请求头中使用 Base64 编码的客户端凭证，如获取 OAuth 令牌部分中所述。如果验证成功，则网页从服务器接收访问令牌值，令牌存储在 oauthToken 变量中，之后，隐藏 loginForm div 并显示 loggedInStatus div。

需要显示客户列表，请求被发送到服务器去获取 sales$Customer 实体的实例，在 Authorization 请求头中传递 oauthToken 值。

如果成功处理请求，则显示 customers div，并且 customersList 元素填充包含客户名称和电子邮件的内容。

rest js 1

rest js 2