JavaScript 用法示例 - CUBA 框架开发者手册

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 文件，因此文件夹的内容应如下所示：

bootstrap.min.css
customers.html
customers.js
jquery-3.1.1.min.js

customers.html 文件内容：

<html>
    <head>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="bootstrap.min.css"/>
    </head>
    <body>
        <div style="width: 300px; margin: auto;">
            <h1>Sales</h1>

            <div id="loggedInStatus" style="display: none" class="alert alert-success">
                Logged in successfully
            </div>
            <div id="loginForm">
                <div class="form-group">
                    <label for="loginField">Login:</label>
                    <input type="text" class="form-control" id="loginField">
                </div>
                <div class="form-group">
                    <label for="passwordField">Password:</label>
                    <input type="password" class="form-control" id="passwordField">
                </div>
                <button type="submit" class="btn btn-default" onclick="login()">Submit</button>
            </div>

            <div id="customers" style="display: none">
                <h2>Customers</h2>
                <ul id="customersList"></ul>
            </div>
        </div>
        <script type="text/javascript" src="customers.js"></script>
    </body>
</html>

customers.js 文件内容：

var oauthToken = null;
function login() {
    var userLogin = $('#loginField').val();
    var userPassword = $('#passwordField').val();
    $.post({
        url: 'http://localhost:8080/app/rest/v2/oauth/token',
        headers: {
            'Authorization': 'Basic Y2xpZW50OnNlY3JldA==',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        dataType: 'json',
        data: {grant_type: 'password', username: userLogin, password: userPassword},
        success: function (data) {
            oauthToken = data.access_token;
            $('#loggedInStatus').show();
            $('#loginForm').hide();
            loadCustomers();
        }
    })
}

function loadCustomers() {
    $.get({
        url: 'http://localhost:8080/app/rest/v2/entities/sales$Customer?view=_local',
        headers: {
            'Authorization': 'Bearer ' + oauthToken,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (data) {
            $('#customers').show();
            $.each(data, function (i, customer) {
                $('#customersList').append("<li>" + customer.name + " (" + customer.email + ")</li>");
            });
        }
    });
}

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

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

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