Megosztás a következőn keresztül:

Oktatóanyag: MySQL-adatbázis-kapcsolat hozzáadása az Azure Static Web Appsben (előzetes verzió)

Ebben az oktatóanyagban megtudhatja, hogyan csatlakoztathat rugalmas Azure Database for MySQL-kiszolgálói adatbázist a statikus webalkalmazáshoz. A konfigurálást követően REST- vagy GraphQL-kéréseket kezdeményezhet a beépített /data-api végpontra, hogy háttérkód írása nélkül módosítsa az adatokat.

Az egyszerűség kedvéért ez az oktatóanyag bemutatja, hogyan használhat azure-adatbázist helyi fejlesztési célokra, de helyi adatbázis-kiszolgálót is használhat a helyi fejlesztési igényekhez.

Megjegyzés:

Ez az oktatóanyag bemutatja, hogyan használható a rugalmas Azure Database for MySQL-kiszolgáló. Ha másik adatbázist szeretne használni, tekintse meg az Azure Cosmos DB, az Azure SQL vagy a PostgreSQL oktatóanyagait.

Web browser showing results from MySQL in the developer tools console window.

Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Azure Database for MySQL-adatbázis csatolása statikus webalkalmazáshoz
  • Adatok létrehozása, olvasása, frissítése és törlése

Előfeltételek

Az oktatóanyag elvégzéséhez rendelkeznie kell egy meglévő Azure Database for MySQL-adatbázissal és statikus webalkalmazással. Emellett telepítenie kell az Azure Data Studiót is.

Resource Leírás
Rugalmas Azure Database for MySQL-kiszolgáló Ha adatbázist szeretne létrehozni, kövesse az Azure Database for MySQL rugalmas kiszolgálói útmutatójának lépéseit. Ha kapcsolati sztring-hitelesítést szeretne használni a webalkalmazáshoz, győződjön meg arról, hogy mySQL-hitelesítéssel hozza létre az adatbázist. Ezt a beállítást később módosíthatja, ha később szeretné használni a felügyelt identitást.
Meglévő statikus webalkalmazás Ha még nem rendelkezik ilyen webalkalmazással, kövesse az első lépések útmutatójának lépéseit a No Framework statikus webalkalmazás létrehozásához.
Azure Data Studio a MySQL-bővítménnyel Ha még nem telepítette az Azure Data Studiót, az útmutatót követve telepítse az Azure Data Studiót a MySQL-bővítménysel. Másik lehetőségként bármely más eszközzel lekérdezheti a MySQL-adatbázist, például a MySQL Workbenchet.

Először konfigurálja az adatbázist az Azure Static Web Apps adatbázis-kapcsolati funkciójának használatához.

Adatbázis-kapcsolat konfigurálása

Az Adatbázis-kapcsolatok működéséhez az Azure Static Web Appsnek hálózati hozzáféréssel kell rendelkeznie az adatbázishoz. Emellett az Azure-adatbázis helyi fejlesztéshez való használatához konfigurálnia kell az adatbázist, hogy engedélyezze a saját IP-címéről érkező kéréseket.

  1. Nyissa meg rugalmas Azure Database for MySQL Server-kiszolgálóját az Azure Portalon.

  2. A Gépház szakaszban válassza a Hálózatkezelés lehetőséget.

  3. A Tűzfalszabályok szakaszban válassza az Aktuális ügyfél IP-címének hozzáadása gombot. Ez a lépés biztosítja, hogy ezt az adatbázist a helyi fejlesztéshez használja.

  4. A Tűzfalszabályok szakaszban jelölje be az Azure bármely azure-szolgáltatásának nyilvános hozzáférésének engedélyezése a kiszolgálóhoz jelölőnégyzetet. Ez a lépés biztosítja, hogy az üzembe helyezett Static Web Apps-erőforrás hozzáférhessen az adatbázishoz.

  5. Válassza a Mentés parancsot.

Adatbázis-kapcsolati sztring lekérése helyi fejlesztéshez

Az Azure-adatbázis helyi fejlesztéshez való használatához le kell kérnie az adatbázis kapcsolati sztring. Ezt a lépést kihagyhatja, ha fejlesztési célokra helyi adatbázist kíván használni.

  1. Nyissa meg rugalmas Azure Database for MySQL Server-kiszolgálóját az Azure Portalon.

  2. A Gépház szakaszban válassza a Csatlakozás.

  3. Az alkalmazásszakasz Csatlakozás válassza ki a ADO.NET kapcsolati sztring, és tegye félre egy szövegszerkesztőben.

  4. Cserélje le a {your_password} helyőrzőt a kapcsolati sztring a jelszavára.

  5. Cserélje le a {your_database} helyőrzőt az adatbázis nevére MyTestPersonDatabase. A következő lépésekben hozza létre.MyTestPersonDatabase

  6. Törölje a kapcsolati sztring SslMode és SslCa szakaszait, mivel ezek további lépéseket igényelnek, és éles használatra készültek.

Mintaadatok létrehozása

Hozzon létre egy mintatáblát, és az oktatóanyagnak megfelelő mintaadatokkal szórja be. Itt használhatja az Azure Data Studiót, de használhatja a MySQL Workbench-et vagy bármely más eszközt.

  1. Az Azure Data Studióban hozzon létre kapcsolatot a rugalmas Azure MySQL-kiszolgálóval.

  2. Kattintson a jobb gombbal a kiszolgálóra, és hozzon létre egy új adatbázist. Adja meg MyTestPersonDatabase az adatbázis nevét, és válassza ki a kívánt utf8mb4 karakterkészletet és a rendezést utf8mb4_0900_ai_ci.

  3. Kattintson a jobb gombbal a kiszolgálóra, és válassza a Frissítés lehetőséget.

  4. Kattintson a jobb gombbal az adatbázisra, MyTestPersonDatabase és válassza az Új lekérdezés lehetőséget. Futtassa a következő szkriptet egy új, névvel ellátott MyTestPersonTabletábla létrehozásához.

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

  5. Futtassa a következő szkriptet, hogy adatokat adjon hozzá a MyTestPersonTable táblához.

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

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

  6. Kattintson a jobb gombbal a táblára, MyTestPersonTable és válassza a Felső 1000 kiválasztása lehetőséget annak ellenőrzéséhez, hogy vannak-e adatok az adatbázisban.

A statikus webalkalmazás konfigurálása

Az oktatóanyag további része a statikus webalkalmazás forráskódjának szerkesztésére összpontosít, hogy helyileg használhassa az adatbázis-kapcsolatokat.

Fontos

Az alábbi lépések feltételezik, hogy az első lépések útmutatójában létrehozott statikus webalkalmazással dolgozik. Ha másik projektet használ, mindenképpen módosítsa az alábbi git-parancsokat az ágneveknek megfelelően.

  1. Váltson az main ágra.

    git checkout main

  2. Szinkronizálja a helyi verziót a GitHubon találhatóakkal a használatával git pull.

    git pull origin main

Az adatbázis konfigurációs fájljának létrehozása

Ezután hozza létre azt a konfigurációs fájlt, amelyet a statikus webalkalmazás az adatbázishoz való kapcsolódáshoz használ.

  1. Nyissa meg a terminált, és hozzon létre egy új változót a kapcsolati sztring tárolásához. A megadott szintaxis a használt rendszerhéj típusától függően változhat.

    export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

    Cserélje le <YOUR_CONNECTION_STRING> a szövegszerkesztőben félretett kapcsolati sztringértékre.

  2. Az npm használatával telepítheti vagy frissítheti a Static Web Apps parancssori felületét. Válassza ki a helyzetének leginkább megfelelő parancsot.

    A telepítéshez használja a következőt npm install: .

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

    A frissítéshez használja a következőt npm update: .

    npm update

  3. swa db init A parancs használatával hozzon létre egy adatbázis-konfigurációs fájlt.

    swa db init --database-type mysql

    A init parancs létrehozza a staticwebapp.database.config.json fájlt az swa-db-connections mappában.

  4. Illessze be ezt a mintát a létrehozott staticwebapp.database.config.json fájlba.

{
  "$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"
        }
      ]
    }
  }
}

Mielőtt továbblépne a következő lépésre, tekintse át az alábbi táblázatot, amely a konfigurációs fájl különböző aspektusait ismerteti. A konfigurációs fájl teljes dokumentációját a Data API Builder dokumentációjában találja.

Szolgáltatás Explanation
Adatbázis-kapcsolat A fejlesztés során a futtatókörnyezet beolvassa a kapcsolati sztring a konfigurációs fájlban lévő kapcsolati sztring értékéből. Bár a kapcsolati sztring közvetlenül a konfigurációs fájlban is megadhatja, ajánlott az kapcsolati sztring helyi környezeti változóban tárolni. A konfigurációs fájl környezeti változó értékeire a @env('DATABASE_CONNECTION_STRING') jelölésen keresztül hivatkozhat. A kapcsolati sztring értékét felülírja a Static Web Apps az üzembe helyezett helyhez az adatbázis csatlakoztatásakor gyűjtött adatokkal.
API-végpont A REST-végpont elérhető /data-api/rest , míg a GraphQL-végpont a konfigurációs fájlban konfigurált módon érhető el /data-api/graphql . Konfigurálhatja a REST és a GraphQL elérési útját, de az /data-api előtag nem konfigurálható.
API-biztonság A runtime.host.cors beállítások lehetővé teszik az API-ra irányuló kéréseket kezdeményező engedélyezett forrásokat. Ebben az esetben a konfiguráció egy fejlesztési környezetet tükröz, és engedélyezi a helylistát http://localhost:4280 .
Entitásmodell A REST API-ban útvonalakon vagy a GraphQL-sémában típusokként közzétett entitásokat határozza meg. Ebben az esetben a Személy név a végpont számára elérhető név, míg entities.<NAME>.source az adatbázisséma és a táblaleképezés. Figyelje meg, hogy az API-végpont nevének nem kell megegyeznie a tábla nevével.
Entitás biztonsága A tömbben entity.<NAME>.permissions felsorolt engedélyszabályok szabályozzák az entitások engedélyezési beállításait. A szerepkörökkel rendelkező entitásokat ugyanúgy védheti, mint a szerepkörökkel rendelkező útvonalakat.

Megjegyzés:

A konfigurációs fájl connection-stringés host.modegraphql.allow-introspection a tulajdonságok felülíródnak a webhely üzembe helyezésekor. A kapcsolati sztring felülírja az adatbázis statikus Web Apps-erőforráshoz való csatlakoztatásakor gyűjtött hitelesítési adatokkal. A host.mode tulajdonság értéke production, a értéke falsepedig a graphql.allow-introspection következő. Ezek a felülbírálások konzisztenciát biztosítanak a konfigurációs fájlokban a fejlesztési és éles számítási feladatok során, miközben biztosítják, hogy a Static Web Apps-erőforrás engedélyezett adatbázis-kapcsolatokkal biztonságos és éles üzemre kész legyen.

Az adatbázishoz való csatlakozáshoz konfigurált statikus webalkalmazással most már ellenőrizheti a kapcsolatot.

Kezdőlap frissítése

Cserélje le a korrektúrát az body index.html fájl címkéi között a következő HTML-fájlra.

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

Az alkalmazás helyi indítása

Most már futtathatja a webhelyét, és közvetlenül kezelheti az adatbázisban lévő adatokat.

  1. Indítsa el a statikus webalkalmazást az adatbázis konfigurációjával.

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

A parancssori felület elindítása után a staticwebapp.database.config.json fájlban meghatározott végpontokon keresztül érheti el az adatbázist .

A http://localhost:4280/data-api/rest/<ENTITY_NAME> végpont elfogadja GETaz PUTPOST adatbázis adatainak módosítására irányuló kéréseket és DELETE kéréseket.

A http://localhost:4280/data-api/graphql végpont elfogadja a GraphQL-lekérdezéseket és a mutációkat.

Adatok módosítása

Az alábbi keretrendszer-agnosztikus parancsok bemutatják, hogyan végezhet teljes CRUD-műveleteket az adatbázison.

Az egyes függvények kimenete a böngésző konzolablakában jelenik meg.

Nyissa meg a fejlesztői eszközöket a CMD/CTRL SHIFT + I billentyűkombináció + lenyomásával, és válassza a Konzol lapot.

Az összes elem listázása

Adja hozzá a következő kódot az script index.html címkéi közé.

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

Ebben a példában:

  • Az API alapértelmezett kérése az fetch igét GEThasználja.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

Ebben a példában:

  • A GraphQL-lekérdezés kiválasztja az Id adatbázis mezőit és Name mezőit.
  • A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
  • A válasz hasznos adatai a data.people.items tulajdonságban találhatók.

Frissítse a lapot, és válassza a Lista gombot.

A böngésző konzolablakában megjelenik egy tábla, amely az adatbázis összes rekordját felsorolja.

Azonosító Name
1 Napos
2 Dheeraj

Íme egy képernyőkép arról, hogy milyennek kell lennie a böngészőben.

Web browser showing results from a database selection in the developer tools console window.

Beolvasás azonosító szerint

Adja hozzá a következő kódot az script index.html címkéi közé.

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);
}

Ebben a példában:

  • A végpont utótagja /person/Ida következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

Ebben a példában:

  • A GraphQL-lekérdezés kiválasztja az Id adatbázis mezőit és Name mezőit.
  • A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
  • A válasz hasznos adatai a data.person_by_pk tulajdonságban találhatók.

Frissítse a lapot, és válassza a Beolvasás gombot.

A böngésző konzolablakában megjelenik egy tábla, amely az adatbázisból kért egyetlen rekordot tartalmazza.

Azonosító Name
1 Napos

Frissítés

Adja hozzá a következő kódot az script index.html címkéi közé.

A Statikus Web Apps támogatja az igéket és PATCH az PUT igéket is. A PUT kérések frissítik a teljes rekordot, míg PATCH részleges frissítést végeznek.

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);
}

Ebben a példában:

  • A végpont utótagja /person/Id/a következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST-művelet az PUT adatbázisrekord frissítése.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

Ebben a példában:

  • A GraphQL-lekérdezés kiválasztja az Id adatbázis mezőit és Name mezőit.
  • Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
  • A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
  • A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
  • A válasz hasznos adatai a data.updatePerson tulajdonságban találhatók.

Frissítse a lapot, és válassza a Frissítés gombot.

A böngésző konzolablakában megjelenik egy táblázat, amelyen a frissített adatok láthatók.

Azonosító Name
1 Molly

Create

Adja hozzá a következő kódot az script index.html címkéi közé.

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);
}

Ebben a példában:

  • A végpont utótagja /person/a következő: .
  • A REST-művelet egy POST adatbázisrekord hozzáadása.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

Ebben a példában:

  • A GraphQL-lekérdezés kiválasztja az Id adatbázis mezőit és Name mezőit.
  • Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
  • A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
  • A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
  • A válasz hasznos adatai a data.updatePerson tulajdonságban találhatók.

Frissítse a lapot, és válassza a Létrehozás gombot.

A böngésző konzolablakában megjelenik egy tábla, amelyen az új rekord látható az adatbázisban.

Azonosító Name
3 Pedro

Delete

Adja hozzá a következő kódot az script index.html címkéi közé.

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);
  }
}

Ebben a példában:

  • A végpont utótagja /person/Id/a következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST-művelet az DELETE adatbázisrekord eltávolítása.
  • Ha a törlés sikeres, a válasz hasznos adat ok tulajdonsága .true
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 }`);
}

Ebben a példában:

  • A GraphQL-lekérdezés kiválasztja a Id mezőt az adatbázisból.
  • Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
  • A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
  • A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
  • A válasz hasznos adatai a data.deletePerson tulajdonságban találhatók.

Frissítse a lapot, és válassza a Törlés gombot.

A böngésző konzolablakában megjelenik egy tábla, amely a törlési kérelem válaszát mutatja.

Törölt rekord: 3

Most, hogy helyileg dolgozott a webhelyével, üzembe helyezheti az Azure-ban.

A webhely üzembe helyezése

A webhely éles környezetben való üzembe helyezéséhez csak véglegesítenie kell a konfigurációs fájlt, és le kell küldenie a módosításokat a kiszolgálóra.

  1. Adja hozzá a követendő fájlmódosításokat.

    git add .

  2. Véglegesítse a konfiguráció módosításait.

    git commit -am "Add database configuration"

  3. Küldje el a módosításokat a kiszolgálóra.

    git push origin main

Csatlakozás az adatbázist a statikus webalkalmazásba

Az alábbi lépésekkel kapcsolatot hozhat létre a webhely Statikus Web Apps-példánya és az adatbázis között.

  1. Nyissa meg statikus webalkalmazását az Azure Portalon.

  2. A Gépház szakaszban válassza az Adatbázis-kapcsolat lehetőséget.

  3. Az Éles környezet szakaszban válassza a Meglévő adatbázis csatolása hivatkozást.

  4. A Meglévő adatbázis csatolása ablakban adja meg a következő értékeket:

    Tulajdonság Érték
    Adatbázis típusa Válassza ki az adatbázis típusát a legördülő listából.
    Subscription Válassza ki azure-előfizetését a legördülő listából.
    Erőforrás neve Válassza ki a kívánt adatbázist tartalmazó adatbázis-kiszolgáló nevét.
    Database Name Válassza ki a statikus webalkalmazáshoz csatolni kívánt adatbázis nevét.
    Hitelesítés típusa Válassza a Csatlakozás ion sztringet, és adja meg a MySQL-felhasználónevet és -jelszót.

  5. Kattintson az OK gombra.

Ellenőrizze, hogy az adatbázis csatlakoztatva van-e a Static Web Apps-erőforráshoz

Miután csatlakoztatta az adatbázist a statikus webalkalmazáshoz, és a webhely elkészült, az alábbi lépésekkel ellenőrizze az adatbázis-kapcsolatot.

  1. Nyissa meg statikus webalkalmazását az Azure Portalon.

  2. Az Essentials szakaszban válassza ki a Static Web Apps-erőforrás URL-címét a statikus webalkalmazáshoz való navigáláshoz.

  3. A Lista gombra kattintva listázhatja az összes elemet.

    A kimenetnek a képernyőképen láthatóhoz hasonlónak kell lennie.

    Web browser showing results from listing records from the database in the developer tools console window.

Clean up resources

Ha el szeretné távolítani az oktatóanyag során létrehozott erőforrásokat, le kell választania az adatbázist, és el kell távolítania a mintaadatokat.

  1. Adatbázis leválasztása: Nyissa meg a statikus webalkalmazást az Azure Portalon. A Gépház szakaszban válassza az Adatbázis-kapcsolat lehetőséget. A csatolt adatbázis mellett válassza a Részletek megtekintése lehetőséget. Az Adatbázis kapcsolat részletei ablakban válassza a Leválasztás gombot.

  2. Mintaadatok eltávolítása: Az adatbázisban törölje a névvel ellátott MyTestPersonTabletáblát.

Következő lépések

API hozzáadása

  • Last updated on