البرنامج التعليمي: إضافة اتصال قاعدة بيانات Azure SQL في Azure Static Web Apps (معاينة)

في هذا البرنامج التعليمي، ستتعلم كيفية توصيل قاعدة بيانات Azure SQL بتطبيق الويب الثابت. بمجرد التكوين، يمكنك إجراء طلبات REST أو GraphQL إلى نقطة النهاية المضمنة /data-api لمعالجة البيانات دون الحاجة إلى كتابة التعليمات البرمجية الخلفية.

من أجل البساطة، يوضح لك هذا البرنامج التعليمي كيفية استخدام قاعدة بيانات Azure لأغراض التطوير المحلي، ولكن يمكنك أيضا استخدام خادم قاعدة بيانات محلي لاحتياجات التطوير المحلية الخاصة بك.

إشعار

يوضح هذا البرنامج التعليمي كيفية استخدام Azure SQL. إذا كنت ترغب في استخدام قاعدة بيانات أخرى، فراجع البرامج التعليمية Azure Cosmos DB أو MySQL أو PostgreSQL .

يعرض مستعرض الويب النتائج من Azure SQL في نافذة وحدة تحكم أدوات المطور.

ستتعرف في هذا البرنامج التعليمي على:

ربط قاعدة بيانات Azure SQL بتطبيق الويب الثابت
إنشاء البيانات وقراءتها وتحديثها وحذفها

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى وجود قاعدة بيانات Azure SQL وتطبيق ويب ثابت.

مورد	‏‏الوصف
قاعدة بيانات Azure SQL	إذا لم يكن لديك واحد بالفعل، فاتبع الخطوات الواردة في دليل إنشاء قاعدة بيانات واحدة.
تطبيق ويب ثابت موجود	إذا لم يكن لديك واحد بالفعل، فاتبع الخطوات الواردة في دليل البدء .

ابدأ بتكوين قاعدة البيانات للعمل مع ميزة اتصال قاعدة بيانات Azure Static Web Apps.

تكوين اتصال قاعدة البيانات

يجب أن يكون لدى Azure Static Web Apps حق الوصول إلى الشبكة إلى قاعدة البيانات الخاصة بك حتى تعمل اتصالات قاعدة البيانات. بالإضافة إلى ذلك، لاستخدام قاعدة بيانات Azure للتطوير المحلي، تحتاج إلى تكوين قاعدة البيانات الخاصة بك للسماح بالطلبات من عنوان IP الخاص بك.

انتقل إلى Azure SQL Server في مدخل Microsoft Azure.
ضمن قسم Security ، حدد Networking.
ضمن علامة التبويب الوصول العام، بجوار الوصول إلى الشبكة العامة، حدد الشبكات المحددة.
ضمن قسم Firewall rules ، حدد الزر Add your client IPv4 address . تضمن هذه الخطوة إمكانية استخدام قاعدة البيانات هذه للتطوير المحلي.
ضمن قسم Exceptions ، حدد خانة الاختيار Allow Azure services and resources to access this server . تضمن هذه الخطوة أن مورد Static Web Apps المنشور يمكنه الوصول إلى قاعدة البيانات الخاصة بك.
حدد حفظ.

الحصول على سلسلة الاتصال قاعدة البيانات للتطوير المحلي

لاستخدام قاعدة بيانات Azure الخاصة بك للتطوير المحلي، تحتاج إلى استرداد سلسلة الاتصال قاعدة البيانات الخاصة بك. يمكنك تخطي هذه الخطوة إذا كنت تخطط لاستخدام قاعدة بيانات محلية لأغراض التطوير.

انتقل إلى Azure SQL Server في مدخل Microsoft Azure.
ضمن قسم Settings ، حدد SQL databases.
حدد قاعدة بيانات SQL التي أنشأتها لهذا البرنامج التعليمي.
في قسم الإعدادات ، حدد سلاسل الاتصال
من مربع ADO.NET (مصادقة SQL)، انسخ سلسلة الاتصال وضعها جانبا في محرر نص.

تأكد من استبدال {your_password} العنصر النائب في سلسلة الاتصال بكلمة المرور الخاصة بك.

إنشاء بيانات العينة

إنشاء نموذج جدول وزرعه مع نموذج البيانات لمطابقة البرنامج التعليمي.

في نافذة التنقل اليسرى، حدد محرر الاستعلام.
سجل الدخول إلى الخادم باستخدام حساب معرف Entra أو اسم المستخدم وكلمة المرور للخادم.

قم بتشغيل البرنامج النصي التالي لإنشاء جدول جديد باسم MyTestPersonTable.

CREATE TABLE [dbo].[MyTestPersonTable] (
    [Id] INT IDENTITY (1, 1) NOT NULL,
    [Name] VARCHAR (25) NULL,
    PRIMARY KEY (Id)
);

قم بتشغيل البرنامج النصي التالي لإضافة البيانات إلى جدول MyTestPersonTable .

INSERT INTO [dbo].[MyTestPersonTable] (Name)
VALUES ('Sunny');

INSERT INTO [dbo].[MyTestPersonTable] (Name)
VALUES ('Dheeraj');

تكوين تطبيق الويب الثابت

يركز باقي هذا البرنامج التعليمي على تحرير التعليمات البرمجية المصدر لتطبيق الويب الثابت للاستفادة من اتصالات قاعدة البيانات محليا.

هام

تفترض الخطوات التالية أنك تعمل مع تطبيق الويب الثابت الذي تم إنشاؤه في دليل البدء. إذا كنت تستخدم مشروعا مختلفا، فتأكد من ضبط أوامر git التالية لمطابقة أسماء الفروع.

قم بالتبديل إلى ⁧⁧main⁩⁩ الفرع.
- Bash
- بوويرشيل
```
git checkout main
```
```
git checkout main
```
مزامنة الإصدار المحلي الخاص بك مع ما هو موجود على GitHub باستخدام git pull.
- Bash
- بوويرشيل
```
git pull origin main
```
```
git pull origin main
```

إنشاء ملف تكوين قاعدة البيانات

بعد ذلك، قم بإنشاء ملف التكوين الذي يستخدمه تطبيق الويب الثابت الخاص بك للواجهة مع قاعدة البيانات.

افتح المحطة الطرفية الخاصة بك وأنشئ متغيرا جديدا للاحتفاظ سلسلة الاتصال. قد يختلف بناء الجملة المحدد استنادا إلى نوع shell الذي تستخدمه.
- Bash
- بوويرشيل
```
export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
```
$env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
تأكد من استبدال <YOUR_CONNECTION_STRING> بقيمة سلسلة الاتصالات التي وضعتها جانبا في محرر نص.
استخدم npm لتثبيت أو تحديث Static Web Apps CLI. حدد الأمر الأفضل لموقفك.

للتنزيل، استخدم npm install.
- Bash
- بوويرشيل
```
npm install -g @azure/static-web-apps-cli
```
```
npm install -g @azure/static-web-apps-cli
```
للتحديث، استخدم npm update.
- Bash
- بوويرشيل
```
npm update
```
```
npm update
```
swa db init استخدم الأمر لإنشاء ملف تكوين قاعدة بيانات.
- Bash
- بوويرشيل
```
swa db init --database-type mssql
```
```
swa db init --database-type mssql
```
init يقوم الأمر بإنشاء ملف staticwebapp.database.config.json في مجلد swa-db-connections.
الصق في هذه العينة في staticwebapp.database.config.json الملف الذي أنشأته.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "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": "dbo.MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

قبل الانتقال إلى الخطوة التالية، راجع الجدول التالي الذي يشرح جوانب مختلفة من ملف التكوين. للحصول على وثائق كاملة حول ملف التكوين ووظائفه مثل العلاقات والنهج للأمان على مستوى العنصر، راجع وثائق Data API Builder.

ميزة	الشرح
اتصال قاعدة البيانات	في التطوير، يقرأ وقت التشغيل سلسلة الاتصال من قيمة سلسلة الاتصال في ملف التكوين. بينما يمكنك تحديد سلسلة الاتصال مباشرة في ملف التكوين، فإن أفضل الممارسات هي تخزين سلسلة الاتصال في متغير بيئة محلية. يمكنك الرجوع إلى قيم متغير البيئة في ملف التكوين عبر التعليمة البرمجية `@env('DATABASE_CONNECTION_STRING')` . تتم الكتابة فوق قيمة سلسلة الاتصال بواسطة Static Web Apps للموقع المنشور بالمعلومات التي تم جمعها عند توصيل قاعدة البيانات.
نقطة نهاية واجهة برمجة التطبيقات	تتوفر نقطة نهاية REST عبر `/data-api/rest` بينما تتوفر نقطة نهاية GraphQL من خلال `/data-api/graphql` كما تم تكوينها في ملف التكوين هذا. يمكنك تكوين مسارات REST وGraphQL، ولكن البادئة `/data-api` غير قابلة للتكوين.
أمان واجهة برمجة التطبيقات	`runtime.host.cors` تسمح لك الإعدادات بتعريف الأصول المسموح بها التي يمكنها تقديم طلبات إلى واجهة برمجة التطبيقات. في هذه الحالة، يعكس التكوين بيئة تطوير ويسمح بالموقع http://localhost:4280 .
نموذج الكيان	تعريف الكيانات المكشوفة عبر المسارات في واجهة برمجة تطبيقات REST، أو كالأنواع في مخطط GraphQL. في هذه الحالة، اسم الشخص، هو الاسم المكشوف لنقطة النهاية بينما `entities.<NAME>.source` هو مخطط قاعدة البيانات وتعيين الجدول. لاحظ كيف لا يلزم أن يكون اسم نقطة نهاية واجهة برمجة التطبيقات مطابقا لاسم الجدول.
أمان الكيان	تتحكم قواعد الأذونات المدرجة في `entity.<NAME>.permissions` الصفيف في إعدادات التخويل للكيان. يمكنك تأمين كيان بأدوار بنفس الطريقة التي تؤمن بها المسارات بالأدوار.

إشعار

تتم الكتابة فوق خصائص ملف connection-stringhost.modeالتكوين و و graphql.allow-introspection عند نشر موقعك. تتم الكتابة فوق سلسلة الاتصال بتفاصيل المصادقة التي تم جمعها عند توصيل قاعدة البيانات بمورد Static Web Apps. host.mode تم تعيين الخاصية إلى production، ويتم graphql.allow-introspection تعيين إلى false. توفر هذه التجاوزات التناسق في ملفات التكوين الخاصة بك عبر أحمال عمل التطوير والإنتاج، بينما يضمن أن مورد Static Web Apps مع تمكين اتصالات قاعدة البيانات آمن وجاهز للإنتاج.

مع تكوين تطبيق الويب الثابت للاتصال بقاعدة البيانات، يمكنك الآن التحقق من الاتصال.

تحديث الصفحة الرئيسية

استبدل العلامات بين العلامات body في ملف index.html ب HTML التالي.

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

بدء تشغيل التطبيق محليا

الآن يمكنك تشغيل موقع الويب الخاص بك ومعالجة البيانات في قاعدة البيانات مباشرة.

ابدأ تشغيل تطبيق الويب الثابت مع تكوين قاعدة البيانات.
```
swa start --data-api-location swa-db-connections
```

الآن بعد بدء تشغيل CLI، يمكنك الوصول إلى قاعدة البيانات الخاصة بك عبر نقاط النهاية كما هو محدد في ملف staticwebapp.database.config.json .

http://localhost:4280/data-api/rest/<ENTITY_NAME> تقبل POST GETPUTنقطة النهاية طلبات و و DELETE لمعالجة البيانات في قاعدة البيانات.

http://localhost:4280/data-api/graphql تقبل نقطة النهاية استعلامات وطفرات GraphQL.

معالجة البيانات

توضح الأوامر التالية غير المحدد إطار العمل كيفية القيام بعمليات CRUD كاملة على قاعدة البيانات الخاصة بك.

يظهر الإخراج لكل وظيفة في نافذة وحدة تحكم المستعرض.

افتح أدوات المطور بالضغط على CMD/CTRL + SHIFT + I وحدد علامة التبويب وحدة التحكم.

سرد كافة العناصر

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

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

في هذا المثال:

يستخدم الطلب الافتراضي لواجهة fetch برمجة التطبيقات الفعل GET.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية value .

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

في هذا المثال:

يحدد استعلام GraphQL الحقلين Id و Name من قاعدة البيانات.
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.people.items .

قم بتحديث الصفحة وحدد الزر قائمة .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يسرد جميع السجلات في قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
1	مشمس
2	دهراج

فيما يلي لقطة شاشة لما يجب أن تبدو عليه في المستعرض.

يعرض مستعرض ويب النتائج من تحديد قاعدة بيانات في نافذة وحدة تحكم أدوات المطور.

الحصول على حسب المعرف

أضف التعليمات البرمجية التالية بين العلامات script في index.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);
}

في هذا المثال:

يتم لاحقة نقطة النهاية ب /person/Id.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية value .

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

في هذا المثال:

يحدد استعلام GraphQL الحقلين Id و Name من قاعدة البيانات.
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.person_by_pk .

قم بتحديث الصفحة وحدد الزر Get .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يسرد السجل الفردي المطلوب من قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
1	مشمس

Update

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

تدعم تطبيقات الويب الثابتة كلا من PUT الأفعال والأفعال PATCH . يقوم PUT الطلب بتحديث السجل بأكمله، بينما PATCH يقوم بتحديث جزئي.

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

في هذا المثال:

يتم لاحقة نقطة النهاية ب /person/Id/.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
فعل REST هو PUT تحديث سجل قاعدة البيانات.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية value .

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

في هذا المثال:

يحدد استعلام GraphQL الحقلين Id و Name من قاعدة البيانات.
query يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.updatePerson .

قم بتحديث الصفحة وحدد الزر تحديث .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض البيانات المحدثة.

البطاقة/ رقم البطاقة	الاسم
1	مولي

إنشاء

أضف التعليمات البرمجية التالية بين العلامات script في index.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);
}

في هذا المثال:

يتم لاحقة نقطة النهاية ب /person/.
فعل REST هو POST إضافة سجل قاعدة بيانات.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية value .

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

في هذا المثال:

يحدد استعلام GraphQL الحقلين Id و Name من قاعدة البيانات.
query يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.updatePerson .

قم بتحديث الصفحة وحدد الزر إنشاء .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض السجل الجديد في قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
3	بيدرو

حذف

أضف التعليمات البرمجية التالية بين العلامات script في index.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);
  }
}

في هذا المثال:

يتم لاحقة نقطة النهاية ب /person/Id/.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
فعل REST هو DELETE إزالة سجل قاعدة البيانات.
إذا نجح الحذف، تكون خاصية حمولة ok الاستجابة هي 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 }`);
}

في هذا المثال:

يحدد Id استعلام GraphQL الحقل من قاعدة البيانات.
query يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.deletePerson .

قم بتحديث الصفحة وحدد الزر حذف .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض الاستجابة من طلب الحذف.

تم حذف السجل: 3

الآن بعد أن عملت مع موقعك محليا، يمكنك الآن نشره على Azure.

نشر موقعك

لنشر هذا الموقع للإنتاج، تحتاج فقط إلى تثبيت ملف التكوين ودفع التغييرات إلى الخادم.

أضف تغييرات الملف لتعقبها.
```
git add .
```

تنفيذ تغييرات التكوين.

git commit -am "Add database configuration"

ادفع التغييرات إلى الخادم.
```
git push origin main
```

توصيل قاعدة البيانات بتطبيق الويب الثابت

استخدم الخطوات التالية لإنشاء اتصال بين مثيل Static Web Apps لموقعك وقاعدة البيانات الخاصة بك.

افتح تطبيق الويب الثابت في مدخل Microsoft Azure.
في قسم الإعدادات ، حدد اتصال قاعدة البيانات.
ضمن قسم Production ، حدد رابط Link existing database .

في نافذة ربط قاعدة البيانات الموجودة، أدخل القيم التالية:

الخاصية	القيمة
نوع قاعدة البيانات	حدد نوع قاعدة البيانات من القائمة المنسدلة.
الاشتراك	حدد اشتراك Azure من القائمة المنسدلة.
مجموعة الموارد	حدد أو أنشئ مجموعة موارد لقاعدة البيانات الخاصة بك.
اسم المورد	حدد اسم خادم قاعدة البيانات الذي يحتوي على قاعدة البيانات المطلوبة.
اسم قاعدة البيانات	حدد اسم قاعدة البيانات التي تريد ربطها بتطبيق الويب الثابت.
نوع المصادقة	حدد Connection string، وأدخل اسم مستخدم Azure SQL وكلمة المرور.

حدد موافق.

تحقق من أن قاعدة البيانات متصلة بمورد Static Web Apps

بمجرد توصيل قاعدة البيانات بتطبيق الويب الثابت وانتهاء إنشاء الموقع، استخدم الخطوات التالية للتحقق من اتصال قاعدة البيانات.

افتح تطبيق الويب الثابت في مدخل Microsoft Azure.
في قسم Essentials ، حدد عنوان URL لمورد Static Web Apps للانتقال إلى تطبيق الويب الثابت.
حدد الزر قائمة لسرد كافة العناصر.

يجب أن يشبه الإخراج ما هو موضح في لقطة الشاشة هذه.

تنظيف الموارد

إذا كنت ترغب في إزالة الموارد التي تم إنشاؤها أثناء هذا البرنامج التعليمي، تحتاج إلى إلغاء ربط قاعدة البيانات وإزالة نموذج البيانات.

إلغاء ربط قاعدة البيانات: افتح تطبيق الويب الثابت في مدخل Microsoft Azure. ضمن قسم الإعدادات ، حدد اتصال قاعدة البيانات. بجوار قاعدة البيانات المرتبطة، حدد عرض التفاصيل. في نافذة تفاصيل اتصال قاعدة البيانات، حدد الزر إلغاء الارتباط .
إزالة بيانات العينة: في قاعدة البيانات الخاصة بك، احذف الجدول المسمى MyTestPersonTable.

الخطوات التالية

إضافة واجهة برمجة تطبيقات

الملاحظات

هل كانت هذه الصفحة مفيدة؟

Last updated on 2023-03-16

مشاركة عبر

البرنامج التعليمي: إضافة اتصال قاعدة بيانات Azure SQL في Azure Static Web Apps (معاينة)

المتطلبات الأساسية

تكوين اتصال قاعدة البيانات

الحصول على سلسلة الاتصال قاعدة البيانات للتطوير المحلي

إنشاء بيانات العينة

تكوين تطبيق الويب الثابت

إنشاء ملف تكوين قاعدة البيانات

تحديث الصفحة الرئيسية

بدء تشغيل التطبيق محليا

معالجة البيانات

سرد كافة العناصر

الحصول على حسب المعرف

Update

إنشاء

حذف

نشر موقعك

توصيل قاعدة البيانات بتطبيق الويب الثابت

تحقق من أن قاعدة البيانات متصلة بمورد Static Web Apps

تنظيف الموارد

الخطوات التالية

الملاحظات

الموارد الإضافية