Freigeben über

Lernprogramm: Hinzufügen einer MySQL-Datenbankverbindung in Azure Static Web Apps (Vorschau)

In diesem Tutorial erfahren Sie, wie Sie eine Azure-Datenbank für MySQL Flexible Server mit Ihrer statischen Web-App verbinden. Nach der Konfiguration können Sie REST- oder GraphQL-Anforderungen an den integrierten Endpunkt vornehmen, um Daten zu bearbeiten, ohne Back-End-Code /data-api schreiben zu müssen.

Aus Gründen der Einfachheit zeigt Ihnen dieses Lernprogramm, wie Sie eine Azure-Datenbank für lokale Entwicklungszwecke verwenden, aber sie können auch einen lokalen Datenbankserver für Ihre lokalen Entwicklungsanforderungen verwenden.

Hinweis

In diesem Lernprogramm wird gezeigt, wie Sie Azure Database für MySQL Flexible Server verwenden. Wenn Sie eine andere Datenbank verwenden möchten, lesen Sie die Lernprogramme Azure Cosmos DB, Azure SQL oder PostgreSQL .

Webbrowser mit Ergebnissen von MySQL im Konsolenfenster der Entwicklertools.

In diesem Tutorial lernen Sie Folgendes:

  • Azure-Datenbank für MySQL mit Ihrer statischen Web-App verlinken
  • Erstellen, Lesen, Aktualisieren und Löschen von Daten

Voraussetzungen

Um dieses Lernprogramm abzuschließen, müssen Sie über eine vorhandene Azure-Datenbank für MySQL-Datenbank und eine statische Web-App verfügen. Darüber hinaus müssen Sie Visual Studio Code installieren.

Resource Description
Azure Database for MySQL Flexible Server Wenn Sie eine Datenbank erstellen müssen, führen Sie die Schritte im Leitfaden zum Erstellen einer Azure-Datenbank für MySQL Flexible Server aus. Wenn Sie eine Verbindungszeichenfolgenauthentifizierung für Ihre Web-App verwenden möchten, stellen Sie sicher, dass Sie Ihre Datenbank mit mySQL-Authentifizierung erstellen. Sie können diese Einstellung später ändern, wenn Sie die verwaltete Identität später verwenden möchten.
Vorhandene statische Web-App Wenn Sie noch keins haben, führen Sie die Schritte im Leitfaden für die ersten Schritte aus, um eine statische No Framework-Web-App zu erstellen.
Visual Studio Code mit der MySQL-Shell-Erweiterung Wenn Sie Visual Studio Code noch nicht installiert haben, folgen Sie der Anleitung zum Installieren von Visual Studio Code mit der MySQL Shell-Erweiterung. Alternativ können Sie ein anderes Tool verwenden, um Ihre MySQL-Datenbank abzufragen, z. B. MySQL Workbench.

Konfigurieren Sie zunächst Ihre Datenbank für die Arbeit mit dem Azure Static Web Apps-Datenbankverbindungsfeature.

Konfigurieren der Datenbankkonnektivität

Azure Static Web Apps müssen Netzwerkzugriff auf Ihre Datenbank haben, damit Datenbankverbindungen funktionieren. Um eine Azure-Datenbank für die lokale Entwicklung zu verwenden, müssen Sie ihre Datenbank außerdem so konfigurieren, dass Anforderungen von Ihrer eigenen IP-Adresse zugelassen werden.

  1. Wechseln Sie im Azure-Portal zu Ihrer Azure-Datenbank für MySQL Server Flexible Server.

  2. Wählen Sie im Abschnitt Einstellungen die Option Netzwerk aus.

  3. Wählen Sie im Abschnitt "Firewallregeln " die Schaltfläche " Aktuelle Client-IP-Adresse hinzufügen " aus. Dieser Schritt stellt sicher, dass Sie diese Datenbank für ihre lokale Entwicklung verwenden können.

  4. Aktivieren Sie im Abschnitt "Firewallregeln " das Kontrollkästchen " Öffentlichen Zugriff von einem beliebigen Azure-Dienst in Azure auf diesen Server zulassen ". Dieser Schritt stellt sicher, dass Ihre bereitgestellte Static Web Apps-Ressource auf Ihre Datenbank zugreifen kann.

  5. Wählen Sie Speichern aus.

Hole die Datenbankverbindungszeichenfolge für die lokale Entwicklung

Um Ihre Azure-Datenbank für die lokale Entwicklung zu verwenden, müssen Sie die Verbindungszeichenfolge Ihrer Datenbank abrufen. Sie können diesen Schritt überspringen, wenn Sie beabsichtigen, eine lokale Datenbank für Entwicklungszwecke zu verwenden.

  1. Wechseln Sie im Azure-Portal zu Ihrer Azure-Datenbank für MySQL Server Flexible Server.

  2. Wählen Sie im Abschnitt "Einstellungen"die Option "Verbinden" aus.

  3. Wählen Sie im Abschnitt "Verbinden aus Ihrer App " die ADO.NET Verbindungszeichenfolge aus, und legen Sie sie in einem Text-Editor ab.

  4. Ersetzen Sie den {your_password} Platzhalter in der Verbindungszeichenfolge durch Ihr Kennwort.

  5. Ersetzen Sie den {your_database} Platzhalter durch den Datenbanknamen MyTestPersonDatabase. Sie erstellen die MyTestPersonDatabase in den nächsten Schritten.

  6. Löschen Sie die Abschnitte "SslMode " und " SslCa " der Verbindungszeichenfolge, da diese zusätzliche Schritte erfordern und für Produktionszwecke vorgesehen sind.

Erstellen von Beispieldaten

Erstellen Sie eine Beispieltabelle, und seeden Sie sie mit Beispieldaten, um dem Lernprogramm zu entsprechen. Hier können Sie Visual Studio Code verwenden, aber Sie können MySQL Workbench oder ein beliebiges anderes Tool verwenden.

  1. Erstellen Sie in Visual Studio Code mit der MySQL Shell-Erweiterung eine Verbindung zu Ihrem Azure MySQL Flexible Server.

  2. Klicken Sie mit der rechten Maustaste auf Ihren Server, und erstellen Sie eine neue Datenbank. Geben Sie MyTestPersonDatabase als Datenbanknamen ein, und wählen Sie den Zeichensatz utf8mb4 und die Sortierung von utf8mb4_0900_ai_ci aus.

  3. Klicken Sie mit der rechten Maustaste auf Ihren Server, und wählen Sie "Aktualisieren" aus.

  4. Klicken Sie mit der rechten Maustaste auf Ihre MyTestPersonDatabase Datenbank, und wählen Sie "Neue Abfrage" aus. Führen Sie das folgende Skript aus, um eine neue Tabelle mit dem Namen MyTestPersonTablezu erstellen.

    CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);

  5. Führen Sie das folgende Skript aus, um Daten in die Tabelle MyTestPersonTable hinzuzufügen.

    INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');

  6. Klicken Sie mit der rechten Maustaste auf Ihre MyTestPersonTable Tabelle, und wählen Sie "Top 1000 " aus, um zu überprüfen, ob in Ihrer Datenbank Daten vorhanden sind.

Konfigurieren der statischen Web-App

Der Rest dieses Lernprogramms konzentriert sich auf die Bearbeitung des Quellcodes Ihrer statischen Web-App, um Datenbankverbindungen lokal zu nutzen.

Von Bedeutung

Bei den folgenden Schritten wird davon ausgegangen, dass Sie mit der statischen Web-App arbeiten, die im Leitfaden für erste Schritte erstellt wurde. Wenn Sie ein anderes Projekt verwenden, müssen Sie die folgenden Git-Befehle so anpassen, dass sie ihren Verzweigungsnamen entsprechen.

  1. Wechseln Sie zu dem main Branch.

    git checkout main

  2. Synchronisieren Sie Ihre lokale Version mit dem, was auf GitHub ist, mithilfe von git pull.

    git pull origin main

Erstellen der Datenbankkonfigurationsdatei

Erstellen Sie als Nächstes die Konfigurationsdatei, die Ihre statische Web-App für die Schnittstelle mit der Datenbank verwendet.

  1. Öffnen Sie Ihr Terminal, und erstellen Sie eine neue Variable, um die Verbindungszeichenfolge zu speichern. Die spezifische Syntax kann je nach dem verwendeten Shelltyp variieren.

    export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

    Stellen Sie sicher, dass Sie <YOUR_CONNECTION_STRING> durch den Verbindungszeichenfolgenwert ersetzen, den Sie in einem Text-Editor festgelegt haben.

  2. Verwenden Sie npm, um die Static Web Apps CLI zu installieren oder zu aktualisieren. Wählen Sie aus, welcher Befehl für Ihre Situation am besten geeignet ist.

    Verwenden Sie npm installzum Installieren .

    npm install -g @azure/static-web-apps-cli

    Verwenden Sie npm updatezum Aktualisieren .

    npm update

  3. Verwenden Sie den swa db init Befehl, um eine Datenbankkonfigurationsdatei zu generieren.

    swa db init --database-type mysql

    Der init Befehl erstellt die staticwebapp.database.config.json Datei im Ordner "swa-db-connections" .

  4. Fügen Sie dieses Beispiel in die Datei staticwebapp.database.config.json ein, die Sie generiert haben.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mysql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Bevor Sie mit dem nächsten Schritt fortfahren, lesen Sie die folgende Tabelle, in der verschiedene Aspekte der Konfigurationsdatei erläutert werden. Eine vollständige Dokumentation zur Konfigurationsdatei finden Sie in der Dokumentation zum Daten-API-Generator.

Merkmal Explanation
Datenbankverbindung In der Entwicklung liest die Laufzeit die Verbindungszeichenfolge aus dem Wert der Verbindungszeichenfolge in der Konfigurationsdatei. Sie können Ihre Verbindungszeichenfolge zwar direkt in der Konfigurationsdatei angeben, es empfiehlt sich jedoch, Verbindungszeichenfolgen in einer lokalen Umgebungsvariable zu speichern. Sie können über die Schreibweise auf Umgebungsvariablenwerte in der @env('DATABASE_CONNECTION_STRING') Konfigurationsdatei verweisen. Der Wert der Verbindungszeichenfolge wird von den Static Web Apps für die bereitgestellte Site mit den Informationen überschrieben, die beim Verbinden der Datenbank gesammelt werden.
API-Endpunkt Der REST-Endpunkt ist über /data-api/rest verfügbar, während der GraphQL-Endpunkt über /data-api/graphql gemäß dieser Konfigurationsdatei verfügbar ist. Sie können die REST- und GraphQL-Pfade konfigurieren, aber das /data-api Präfix kann nicht konfiguriert werden.
API-Sicherheit Mit runtime.host.cors den Einstellungen können Sie zulässige Ursprünge definieren, die Anforderungen an die API stellen können. In diesem Fall spiegelt die Konfiguration eine Entwicklungsumgebung wider und lässt den http://localhost:4280 Standort auflisten.
Entitätsmodell Definiert die Entitäten, die über Routen in der REST-API oder als Typen im GraphQL-Schema verfügbar gemacht werden. In diesem Fall ist der Name Person der Name, der für den Endpunkt verfügbar gemacht wird, während entities.<NAME>.source es sich um das Datenbankschema und die Tabellenzuordnung handelt. Beachten Sie, dass der API-Endpunktname nicht mit dem Tabellennamen identisch sein muss.
Entitätssicherheit Im Array aufgelistete entity.<NAME>.permissions Berechtigungsregeln steuern die Autorisierungseinstellungen für eine Entität. Sie können eine Entität mit Rollen auf die gleiche Weise sichern, wie Sie Routen mit Rollen sichern.

Hinweis

Die Eigenschaften connection-string, host.mode und graphql.allow-introspection der Konfigurationsdatei werden überschrieben, wenn Sie Ihre Website bereitstellen. Ihre Verbindungszeichenfolge wird mit den Authentifizierungsdetails überschrieben, die gesammelt werden, wenn Sie ihre Datenbank mit Ihrer Static Web Apps-Ressource verbinden. Die Eigenschaft host.mode ist auf production gesetzt, und graphql.allow-introspection ist auf false gesetzt. Diese Überschreibungen sorgen für Konsistenz in den Konfigurationsdateien Ihrer Entwicklungs- und Produktionsumgebungen, während sichergestellt wird, dass Ihre statische Web-App-Ressource mit aktivierten Datenbankverbindungen sicher und produktionsbereit ist.

Nachdem die statische Web-App für die Verbindung mit der Datenbank konfiguriert wurde, können Sie nun die Verbindung überprüfen.

Homepage aktualisieren

Ersetzen Sie das Markup zwischen den body Tags in der index.html-Datei durch den folgenden HTML-Code.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

Lokales Starten der Anwendung

Jetzt können Sie Ihre Website ausführen und Daten in der Datenbank direkt bearbeiten.

  1. Starten Sie die statische Web-App mit der Datenbankkonfiguration.

    swa start --data-api-location swa-db-connections

Nachdem die CLI gestartet wurde, können Sie über die Endpunkte, die in der staticwebapp.database.config.json-Datei definiert sind, auf Ihre Datenbank zugreifen.

Der http://localhost:4280/data-api/rest/<ENTITY_NAME> Endpunkt akzeptiert GET, PUT, POST und DELETE Anfragen, um Daten in der Datenbank zu manipulieren.

Der http://localhost:4280/data-api/graphql Endpunkt akzeptiert GraphQL-Abfragen und Mutationen.

Bearbeiten von Daten

Die folgenden frameworkagnostischen Befehle veranschaulichen, wie vollständige CRUD-Vorgänge in Ihrer Datenbank ausgeführt werden.

Die Ausgabe für jede Funktion wird im Konsolenfenster des Browsers angezeigt.

Öffnen Sie die Entwicklertools, indem Sie CMD/STRG + UMSCHALT + I drücken und die Registerkarte "Konsole" auswählen.

Alle Elemente auflisten

Fügen Sie den folgenden Code zwischen den script Tags in index.htmlhinzu.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

In diesem Beispiel:

  • Die Standardanforderung für die fetch API verwendet das Verb GET.
  • Daten in der Antwortnutzlast werden in der value Eigenschaft gefunden.
async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

In diesem Beispiel:

  • Die GraphQL-Abfrage wählt die Felder Id und Name aus der Datenbank.
  • Die an den Server übergebene Anforderung erfordert eine Nutzlast, bei der die query Eigenschaft die Abfragedefinition enthält.
  • Daten in der Antwortnutzlast werden in der data.people.items Eigenschaft gefunden.

Aktualisieren Sie die Seite, und wählen Sie die Schaltfläche "Liste " aus.

Das Konsolenfenster des Browsers zeigt nun eine Tabelle an, in der alle Datensätze in der Datenbank aufgelistet sind.

ID Name
1 Sunny
2 Dheeraj

Hier sehen Sie einen Screenshot, wie er in Ihrem Browser aussehen soll.

Webbrowser mit Ergebnissen aus einer Datenbankauswahl im Konsolenfenster der Entwicklertools.

Abrufen mit ID

Fügen Sie den folgenden Code zwischen den script Tags in index.htmlhinzu.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

In diesem Beispiel:

  • Der Endpunkt ist mit Suffix versehen /person/Id.
  • Der ID-Wert wird an das Ende der Endpunktadresse angefügt.
  • Daten in der Antwortnutzlast werden in der value Eigenschaft gefunden.
async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

In diesem Beispiel:

  • Die GraphQL-Abfrage wählt die Felder Id und Name aus der Datenbank.
  • Die an den Server übergebene Anforderung erfordert eine Nutzlast, bei der die query Eigenschaft die Abfragedefinition enthält.
  • Daten in der Antwortnutzlast werden in der data.person_by_pk Eigenschaft gefunden.

Aktualisieren Sie die Seite, und wählen Sie die Schaltfläche " Abrufen " aus.

Das Konsolenfenster des Browsers zeigt nun eine Tabelle an, in der der einzelne Datensatz aufgeführt ist, der aus der Datenbank angefordert wird.

ID Name
1 Sunny

Update

Fügen Sie den folgenden Code zwischen den script Tags in index.htmlhinzu.

Statische Web-Apps unterstützen sowohl die PUT- als auch die PATCH-Verben. Eine PUT Anforderung aktualisiert den gesamten Datensatz, während PATCH ein partielles Update durchführt.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

In diesem Beispiel:

  • Der Endpunkt ist mit Suffix versehen /person/Id/.
  • Der ID-Wert wird an das Ende der Endpunktadresse angefügt.
  • Das REST-Verb besteht PUT darin, den Datenbankdatensatz zu aktualisieren.
  • Daten in der Antwortnutzlast werden in der value Eigenschaft gefunden.
async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

In diesem Beispiel:

  • Die GraphQL-Abfrage wählt die Felder Id und Name aus der Datenbank aus.
  • Das query Objekt enthält die GraphQL-Abfrage in der query Eigenschaft.
  • Die Argumentwerte an die GraphQL-Funktion werden über die query.variables Eigenschaft übergeben.
  • Die an den Server übergebene Anforderung erfordert eine Nutzlast, bei der die query Eigenschaft die Abfragedefinition enthält.
  • Daten in der Antwortnutzlast werden in der data.updatePerson Eigenschaft gefunden.

Aktualisieren Sie die Seite, und wählen Sie die Schaltfläche " Aktualisieren " aus.

Das Konsolenfenster des Browsers zeigt nun eine Tabelle mit den aktualisierten Daten an.

ID Name
1 Molly

Create

Fügen Sie den folgenden Code zwischen den script Tags in index.htmlhinzu.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

In diesem Beispiel:

  • Der Endpunkt ist mit Suffix versehen /person/.
  • Das REST-Verb besteht POST darin, einen Datenbankdatensatz hinzuzufügen.
  • Daten in der Antwortnutzlast werden in der value Eigenschaft gefunden.
async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

In diesem Beispiel:

  • Die GraphQL-Abfrage selektiert die Felder Id und Name aus der Datenbank.
  • Das query Objekt enthält die GraphQL-Abfrage in der query Eigenschaft.
  • Die Argumentwerte an die GraphQL-Funktion werden über die query.variables Eigenschaft übergeben.
  • Die an den Server übergebene Anforderung erfordert eine Nutzlast, bei der die query Eigenschaft die Abfragedefinition enthält.
  • Daten in der Antwortnutzlast werden in der data.updatePerson Eigenschaft gefunden.

Aktualisieren Sie die Seite, und wählen Sie die Schaltfläche " Erstellen " aus.

Im Konsolenfenster des Browsers wird nun eine Tabelle mit dem neuen Datensatz in der Datenbank angezeigt.

ID Name
3 Pedro

Löschen

Fügen Sie den folgenden Code zwischen den script Tags in index.htmlhinzu.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

In diesem Beispiel:

  • Der Endpunkt ist mit Suffix versehen /person/Id/.
  • Der ID-Wert wird an das Ende der Endpunktadresse angefügt.
  • Das REST-Verb DELETE entfernt den Datenbankdatensatz.
  • Wenn der Löschvorgang erfolgreich ist, ist die Eigenschaft der Antwortnutzlast oktrue.
async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

In diesem Beispiel:

  • Die GraphQL-Abfrage wählt das Id Feld aus der Datenbank aus.
  • Das query Objekt enthält die GraphQL-Abfrage in der query Eigenschaft.
  • Die Argumentwerte an die GraphQL-Funktion werden über die query.variables Eigenschaft übergeben.
  • Die an den Server übergebene Anforderung erfordert eine Nutzlast, bei der die query Eigenschaft die Abfragedefinition enthält.
  • Daten in der Antwortnutzlast werden in der data.deletePerson Eigenschaft gefunden.

Aktualisieren Sie die Seite, und wählen Sie die Schaltfläche "Löschen " aus.

Im Konsolenfenster des Browsers wird nun eine Tabelle mit der Antwort aus der Löschanforderung angezeigt.

Datensatz gelöscht: 3

Nachdem Sie nun lokal mit Ihrer Website gearbeitet haben, können Sie sie jetzt in Azure bereitstellen.

Bereitstellen Ihrer Website

Um diese Website in der Produktion bereitzustellen, müssen Sie lediglich die Konfigurationsdatei übernehmen und Die Änderungen an den Server übertragen.

  1. Fügen Sie die Dateiänderungen zum Nachverfolgen hinzu.

    git add .

  2. Übernehmen Sie die Konfigurationsänderungen.

    git commit -am "Add database configuration"

  3. Pushen Sie Ihre Änderungen an den Server.

    git push origin main

Verbinden der Datenbank mit Ihrer statischen Web-App

Führen Sie die folgenden Schritte aus, um eine Verbindung zwischen der Static Web Apps-Instanz Ihrer Website und Ihrer Datenbank zu erstellen.

  1. Öffnen Sie Ihre statische Web-App im Azure-Portal.

  2. Wählen Sie im Abschnitt "Einstellungen" die Option "Datenbankverbindung" aus.

  3. Wählen Sie im Abschnitt "Produktion " den Link "Vorhandene Datenbank verknüpfen " aus.

  4. Geben Sie im Fenster "Vorhandene Datenbank verknüpfen " die folgenden Werte ein:

    Eigentum Wert
    Datenbanktyp Wählen Sie ihren Datenbanktyp aus der Dropdownliste aus.
    Subscription Wählen Sie Ihr Azure-Abonnement aus der Dropdownliste aus.
    Ressourcenname Wählen Sie den Datenbankservernamen aus, der über die gewünschte Datenbank verfügt.
    Datenbankname Wählen Sie den Namen der Datenbank aus, die Sie mit Ihrer statischen Web-App verknüpfen möchten.
    Authentifizierungstyp Wählen Sie die Verbindungszeichenfolge aus, und geben Sie den MySQL-Benutzernamen und das Kennwort ein.

  5. Wählen Sie OK aus.

Stellen Sie sicher, dass Ihre Datenbank mit Ihrer Ressource "Static Web Apps" verbunden ist

Nachdem Sie Die Datenbank mit Ihrer statischen Web-App verbunden haben und die Website fertig ist, führen Sie die folgenden Schritte aus, um die Datenbankverbindung zu überprüfen.

  1. Öffnen Sie Ihre statische Web-App im Azure-Portal.

  2. Wählen Sie im Abschnitt "Essentials " die URL Ihrer Statischen Web Apps-Ressource aus, um zu Ihrer statischen Web-App zu navigieren.

  3. Wählen Sie die Schaltfläche "Liste " aus, um alle Elemente auflisten zu können.

    Die Ausgabe sollte dem ähneln, was in diesem Screenshot gezeigt wird.

    Webbrowser mit Ergebnissen aus der Auflistung von Datensätzen aus der Datenbank im Konsolenfenster der Entwicklertools.

Bereinigen von Ressourcen

Wenn Sie die in diesem Lernprogramm erstellten Ressourcen entfernen möchten, müssen Sie die Verknüpfung der Datenbank aufheben und die Beispieldaten entfernen.

  1. Datenbankverknüpfung aufheben: Öffnen Sie Ihre statische Web-App im Azure-Portal. Wählen Sie im Abschnitt "Einstellungen" die Option "Datenbankverbindung" aus. Wählen Sie neben der verknüpften Datenbank die Option "Details anzeigen" aus. Wählen Sie im Fenster "Datenbankverbindungsdetails " die Schaltfläche " Verknüpfung aufheben " aus.

  2. Beispieldaten entfernen: Löschen Sie in Ihrer Datenbank die Tabelle mit dem Namen MyTestPersonTable.

Nächste Schritte

Hinzufügen einer API zu Azure Static Web Apps (Vorschauversion) mit Azure Functions

  • Last updated on