Erstellen Sie die HTML-Seite - AWS SDK for JavaScript

Hilf uns, das zu verbessernAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation, indem Sie Feedback mithilfe derFeedbackverlinken, oder erstellen Sie ein Issue oder Pull Request aufGitHub.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-APIbeschreibt ausführlich alle API-Operationen für denAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Erstellen Sie die HTML-Seite

Dieses Thema ist Teil eines Tutorials, das eineAWS-Anwendung, die Nachrichten sendet und abruft, indem Sie dieAWS SDK for JavaScriptund Amazon Simple Queue Service (Amazon SQS). Um am Anfang des Tutorials zu beginnen, lesen Sie Erstellen einer Beispiel-Messaging-Anwendung.

Jetzt erstellen Sie die HTML-Dateien, die für die grafische Benutzeroberfläche (GUI) der Anwendung erforderlich sind. Erstellen Sie eine Datei namens index.html. Kopieren Sie den folgenden Code und fügen Sie ihn einindex.htmlaus. Diese HTML-Referenzenmain.jsaus. Dies ist eine gebündelte Version von index.js, die die erforderlichenAWS SDK for JavaScript-Module.

<!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>

Dieser Code ist auch verfügbarHier aufGitHubaus.