开始使用 AWS

构建基本 Web 应用程序

部署 Web 应用程序并添加与 API 和数据库的交互

模块 5:添加交互到 Web 应用程序

在此模块中,您将修改静态网站,以调用您的 API 并显示自定义输入文本。

简介

在此模块中,我们将更新我们在模块 1 中创建的静态网站,以调用我们在模块 3 中创建的 REST API。这将增加根据您的输入内容显示文本的能力。

您将学到的内容

  • 从 HTML 页面调用 API Gateway API
  • 将 Web 应用程序的新版本上传到 Amplify 控制台

重要概念

部署网站将网站提供给用户。

环境可以在其中执行应用程序或网站的阶段,例如“生产”、“开发”或“暂存”。

调用 API发送事件到 API 以触发特定行为。

 完成时间

5 分钟

实施

  • 使用 Amplify 控制台更新 Web 应用程序
    1. 打开您在模块 1 中创建的 index.html 文件。
    2. 使用以下代码替换现有代码:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3.确保您在行 41 中添加了您的 API 调用 URL(从模块 3 中)。注意:如果您没有 API 的 URL,您可以通过依次单击 API 和“阶段”从 API Gateway 控制台中获取它。

    4.保存文件。

    5.ZIP 仅(压缩)HTML 文件。

    6.打开 Amplify 控制台

    7.单击模块 1 中创建的 Web 应用程序。

    8.单击白色的 Choose files(选择文件)按钮。

    9.选择您在步骤 5 中创建的 ZIP 文件

    10.上传文件时,部署过程将自动开始。当您看到绿色的条后,您的部署将完成。

  • 测试更新的 Web 应用程序
    1. 单击 Domain(域)下面的 URL。
    2. 您上传的 Web 应用程序应加载到您的浏览器中。
    3. 填写姓名(或者您喜欢的任何内容)并单击“调用 API”按钮。
    4. 您应看到一条以“Hello from Lambda”开头,后接您填写的文本的消息。
    5. 恭喜,您现在已经有一个通过 Amplify 控制台部署的运行 Web 应用程序,它可以通过 API Gateway 调用 Lambda 函数!

应用程序架构

现在所有模块均已完成,下面是您构建内容的架构:

full-stack amplify console arch diagram module 5

我们设置的所有 AWS 服务都可以相互安全地通信。当用户单击 Web 应用程序上的按钮时,它将对我们的 API 进行调用,从而触发 Lambda 函数。Lambda 函数将写入数据库中,并通过 API Gateway 返回一条消息到客户端。所有权限都由 IAM 管理。

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。

恭喜您!

您已在 AWS 上成功构建 Web 应用程序! 下一步,更加深入地了解无服务器和数据库,更进一步获得 AWS 云知识。