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.

A MySQL-ből származó eredményeket megjelenítő webböngésző a fejlesztői eszközök konzolablakában.

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

  • Azure Database for MySQL-adatbázis összekapcsolása a statikus webalkalmazással
  • 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 a Visual Studio Code-ot is.

Resource Description
Azure Database for MySQL Flexibilis 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.
Visual Studio Code a MySQL Shell-bővítménysel Ha még nem telepítette a Visual Studio Code-ot, az útmutatót követve telepítse a Visual Studio Code-ot a MySQL Shell-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 Beállítások szakaszban válassza a Hálózatkezelés elemet.

  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 az Mentésgombot.

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ét. 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 Beállítások szakaszban válassza a Csatlakozás lehetőséget.

  3. Az Csatlakozás az alkalmazásból szakaszban válassza ki az ADO.NET kapcsolati sztringet, és tegye félre egy szövegszerkesztőben.

  4. Cserélje le a kapcsolati {your_password} sztringben lévő helyőrzőt 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 fogja létrehozni a MyTestPersonDatabase.

  6. Törölje a kapcsolati sztringből az 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 töltse fel az oktatóanyagnak megfelelő mintaadatokkal. Itt használhatja a Visual Studio Code-ot, de használhatja a MySQL Workbench-et vagy bármely más eszközt.

  1. A Visual Studio Code-ban a MySQL Shell bővítményével 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 utf8mb4 karakterkészletet és a kollációt 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 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 a swa-db-connections mappában.

  4. Illessze be ezt a mintát a staticwebapp.database.config.json fájlba, amit generált.

{
  "$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.

Tulajdonság Explanation
Adatbázis-kapcsolat A fejlesztés során a futtatókörnyezet beolvassa a kapcsolati sztringet a konfigurációs fájl kapcsolati sztringjének értékéből. Bár a kapcsolati sztringet közvetlenül a konfigurációs fájlban is megadhatja, ajánlott a kapcsolati sztringeket egy 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 Static Web Apps felülírja a kapcsolati sztring értékét azon adatokkal, amelyeket az adatbázis csatlakoztatásakor gyűjtöttek az üzembe helyezett oldal számára.
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ések kezdeményezésére képes engedélyezett források meghatározását. 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 karakterlánc felülíródik az adatbázis csatlakoztatásakor az ekkor gyűjtött hitelesítési adatokkal a Static Web Apps erőforráshoz. A host.mode tulajdonság értéke production, és a graphql.allow-introspection értéke false. 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 jelölőnyelvet a bodyindex.html fájl címkék között a következő HTML kódra.

<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 az adatbázist a staticwebapp.database.config.json fájlban meghatározott végpontokon keresztül érheti el.

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 kezelése

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 + + 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 a címkék közé a scriptindex.html.

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 betöltés 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ó Név
1 Sunny
2 Dheeraj

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

A fejlesztői eszközök konzolablakában található adatbázis-kijelölés eredményeit megjelenítő webböngésző.

Lekérdezés azonosító alapján

Adja hozzá a következő kódot a címkék közé a scriptindex.html.

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 a /person/Id.
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A válaszadathalmazban szereplő adatok 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álaszterhelés 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ó Név
1 Sunny

Update

Adja hozzá a következő kódot a címkék közé a scriptindex.html.

A Statikus Web Apps támogatja az PUT és PATCH igéket. 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égponthoz egy /person/Id/ utótag tartozik.
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST parancs a(z) PUT adatbázisrekord frissítésére szolgál.
  • Az adatok a válasz value tulajdonságában 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ó Név
1 Molly

Hozz létre

Adja hozzá a következő kódot a címkék közé a scriptindex.html.

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égpontot a(z) /person/ utótaggal látják el.
  • A REST-igét POST adatbázisrekord hozzáadására használják.
  • A válasz adatcsomagjának 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 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ó Név
3 Pedro

Delete

Adja hozzá a következő kódot a címkék közé a scriptindex.html.

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 végződéséhez hozzá van fűzve a következő: /person/Id/.
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST művelet az DELETE használatával távolítja el az adatbázisrekordot.
  • 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álaszban található hasznos adatok 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

Az adatbázis csatlakoztatása a statikus webalkalmazáshoz

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 Beállítások szakaszban válassza az Adatbázis-kapcsolat lehetőséget.

  3. Az Termelés szakaszban válassza a Meglévő adatbázis összekapcsolása hivatkozást.

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

    Ingatlan É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.
    Adatbázis neve Válassza ki a statikus webalkalmazáshoz csatolni kívánt adatbázis nevét.
    Hitelesítési típus Válassza a Kapcsolati 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.

    Webböngésző, amely az adatbázis rekordjainak a fejlesztői eszközök konzolablakában való listázásából származó eredményeket jeleníti meg.

Erőforrások tisztítása

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 Beállítások 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