创建 HTML 页面 - AWS SDK for JavaScript

帮助我们改进AWS SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:AWS SDK for JavaScriptV3 API 参考指南详细描述了所有的 API 操作AWS SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

创建 HTML 页面

本主题是创建AWS通过使用AWS SDK for JavaScript和 Amazon Simple Queue Service (Amazon SQS)。要开始使用本教程,请参阅创建示例消息传递应用

现在,您可以创建应用程序的图形用户界面 (GUI) 所需的 HTML 文件。创建一个名为 index.html 的文件。将以下代码复制并粘贴到index.html. 此 HTML 参考main.js. 这是 index.js 的捆绑版本,其中包括必需的AWS SDK for JavaScript模块。

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="./images/favicon.ico" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" href="./css/styles.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="./js/main.js"></script> <style> .messageelement { margin: auto; border: 2px solid #dedede; background-color: #D7D1D0 ; border-radius: 5px; max-width: 800px; padding: 10px; margin: 10px 0; } .messageelement::after { content: ""; clear: both; display: table; } .messageelement img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } .messageelement img.right { float: right; margin-left: 20px; margin-right:0; } </style> </head> <body> <div class="container"> <h2>AWS Sample Messaging Application</h2> <div id="messages"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Sender:</span> </div> <select name="cars" id="username"> <option value="Scott">Brian</option> <option value="Tricia">Tricia</option> </select> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Message:</span> </div> <textarea class="form-control" id="textarea" aria-label="With textarea"></textarea> <button type="button" onclick="pushMessage()" id="send" class="btn btn-success">Send</button> <button type="button" onclick="purge()" id="refresh" class="btn btn-success">Purge</button> </div> <!-- All of these child items are hidden and only displayed in a FancyBox ------------------------------------------------------> <div id="hide" style="display: none"> <div id="base" class="messageelement"> <img src="../public/images/av2.png" alt="Avatar" class="right" style="width:100%;"> <p id="text">Excellent! So, what do you want to do today?</p> <span class="time-right">11:02</span> </div> </div> </div> </body> </html>

此代码也可用此处GitHub.