تمرين - الوصول إلى البيانات من مكون Blazor

مكتمل

يجب استبدال البيتزا الحالية ذات التعليمات البرمجية المضمنة في التطبيق بقاعدة بيانات. يمكنك استخدام Microsoft Entity Framework لإضافة اتصالات إلى مصادر البيانات. في هذا التطبيق ، نستخدم قاعدة بيانات SQLite لتخزين البيتزا.

في هذا التمرين، يمكنك إضافة حزم لدعم وظائف قاعدة البيانات، وتوصيل الفئات بقاعدة بيانات خلفية، وإضافة فئة مساعدة للتحميل المسبق للبيانات لبيتزا الشركة.

إضافة حزم تدعم الوصول إلى قاعدة البيانات

1. أوقف التطبيق إذا كان لا يزال قيد التشغيل.

2. في Visual Studio Code، حدد Terminal>New Terminal.

3. في المحطة الطرفية الجديدة، قم بتعيين موقعك إلى دليل BlazingPizza.

   cd BlazingPizza
   

4. قم بتشغيل هذه الأوامر لإضافة حزم Microsoft.EntityFrameworkCoreوMicrosoft.EntityFrameworkCore.SqliteوSystem.Net.Http.Json :

   dotnet add package Microsoft.EntityFrameworkCore --version 9.0.0
   dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 9.0.0
   dotnet add package System.Net.Http.Json --version 9.0.0
   

   تضيف هذه الأوامر مراجع الحزمة إلى ملف BlazingPizza.csproj الخاص بك:

     <ItemGroup>
       <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0-*" />
       <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.0-*" />
       <PackageReference Include="System.Net.Http.Json" Version="9.0.0-*" />
     </ItemGroup>
   

إضافة سياق قاعدة بيانات

1. في Visual Studio Code، أنشئ مجلدا جديدا في مجلد BlazingPizza. قم بتسمية البيانات.

2. في مجلد البيانات ، قم بإنشاء ملف جديد باسم PizzaStoreContext.cs.

3. في الملف الجديد، أدخل هذا الرمز للفئة:

   using Microsoft.EntityFrameworkCore;
   
   namespace BlazingPizza.Data;
   
   public class PizzaStoreContext : DbContext
   {
       public PizzaStoreContext(DbContextOptions options) : base(options)
       {
       }
   
       public DbSet<PizzaSpecial> Specials { get; set; }
   }    
   

   تنشئ هذه الفئة سياق قاعدة بيانات يمكننا استخدامه لتسجيل خدمة قاعدة بيانات. يسمح لنا السياق أيضا بالحصول على وحدة تحكم تصل إلى قاعدة البيانات.

4. احفظ تغييراتك باستخدام Ctrl+S.

إضافة وحدة تحكم

1. إنشاء مجلد جديد في مجلد BlazingPizza. قم بتسمية وحدات التحكم .

2. إنشاء ملف جديد في مجلد وحدات التحكم. قم بتسمية SpecialsController.cs.

3. أدخل هذه التعليمة البرمجية للفئة:

   using Microsoft.AspNetCore.Mvc;
   using Microsoft.EntityFrameworkCore;
   using BlazingPizza.Data;
   
   namespace BlazingPizza.Controllers;
   
   [Route("specials")]
   [ApiController]
   public class SpecialsController : Controller
   {
       private readonly PizzaStoreContext _db;
   
       public SpecialsController(PizzaStoreContext db)
       {
           _db = db;
       }
   
       [HttpGet]
       public async Task<ActionResult<List<PizzaSpecial>>> GetSpecials()
       {
           return (await _db.Specials.ToListAsync()).OrderByDescending(s => s.BasePrice).ToList();
       }
   }
   

   تنشئ هذه الفئة وحدة تحكم تسمح لنا بالاستعلام عن قاعدة البيانات للبيتزا الخاصة وإعادتها ك JSON في عنوان URL (http://localhost:5000/specials).

4. احفظ التغييرات التي أجريتها.

تحميل البيانات في قاعدة البيانات

يتحقق التطبيق لمعرفة ما إذا كانت هناك قاعدة بيانات SQLite موجودة وينشئ واحدة مع بعض البيتزا مسبقة الصنع.

1. إنشاء ملف جديد في دليل بيانات. قم بتسمية SeedData.cs.

2. أدخل هذه التعليمة البرمجية للفئة:

   namespace BlazingPizza.Data;
   
   public static class SeedData
   {
       public static void Initialize(PizzaStoreContext db)
       {
           var specials = new PizzaSpecial[]
           {
               new PizzaSpecial()
               {
                   Name = "Basic Cheese Pizza",
                   Description = "It's cheesy and delicious. Why wouldn't you want one?",
                   BasePrice = 9.99m,
                   ImageUrl = "img/pizzas/cheese.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 2,
                   Name = "The Baconatorizor",
                   Description = "It has EVERY kind of bacon",
                   BasePrice = 11.99m,
                   ImageUrl = "img/pizzas/bacon.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 3,
                   Name = "Classic pepperoni",
                   Description = "It's the pizza you grew up with, but Blazing hot!",
                   BasePrice = 10.50m,
                   ImageUrl = "img/pizzas/pepperoni.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 4,
                   Name = "Buffalo chicken",
                   Description = "Spicy chicken, hot sauce and bleu cheese, guaranteed to warm you up",
                   BasePrice = 12.75m,
                   ImageUrl = "img/pizzas/meaty.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 5,
                   Name = "Mushroom Lovers",
                   Description = "It has mushrooms. Isn't that obvious?",
                   BasePrice = 11.00m,
                   ImageUrl = "img/pizzas/mushroom.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 7,
                   Name = "Veggie Delight",
                   Description = "It's like salad, but on a pizza",
                   BasePrice = 11.50m,
                   ImageUrl = "img/pizzas/salad.jpg",
               },
               new PizzaSpecial()
               {
                   Id = 8,
                   Name = "Margherita",
                   Description = "Traditional Italian pizza with tomatoes and basil",
                   BasePrice = 9.99m,
                   ImageUrl = "img/pizzas/margherita.jpg",
               },
           };
           db.Specials.AddRange(specials);
           db.SaveChanges();
       }
   }
   

   تستخدم الفئة سياق قاعدة بيانات تم تمريره، وتنشئ بعض PizzaSpecial الكائنات في صفيف، ثم تحفظها.

3. في مستكشف الملفات، حدد Program.cs.

4. في الجزء العلوي، أضف مرجعا إلى PizzaStoreContextجديد :

   using BlazingPizza.Data;
   

   تسمح هذه العبارة للتطبيق باستخدام الخدمة الجديدة.

5. إدراج هذا المقطع فوق أسلوب app.Run();:

   // Initialize the database
   var scopeFactory = app.Services.GetRequiredService<IServiceScopeFactory>();
   using (var scope = scopeFactory.CreateScope())
   {
       var db = scope.ServiceProvider.GetRequiredService<PizzaStoreContext>();
       if (db.Database.EnsureCreated())
       {
           SeedData.Initialize(db);
       }
   }
   
   app.Run();
   

   ينشئ هذا التغيير نطاق قاعدة بيانات مع PizzaStoreContext. إذا لم تكن هناك قاعدة بيانات تم إنشاؤها بالفعل، فإنها تستدعي فئة SeedData الثابتة لإنشاء قاعدة بيانات.

6. في الوقت الحالي ، لا يعمل التطبيق لأنه PizzaStoreContext لم تتم تهيئته بعد. في الملف Program.cs ، أضف هذا الرمز ضمن الخدمات الحالية (البنود التي تبدأ builder.Services.):

     builder.Services.AddHttpClient();
     builder.Services.AddSqlite<PizzaStoreContext>("Data Source=pizza.db");
   
   

   تسجل هذه التعليمة البرمجية خدمتين. تسمح عبارة AddHttpClient الأولى للتطبيق بالوصول إلى أوامر HTTP. يستخدم التطبيق HttpClient للحصول على JSON للبيتزا الخاصة. تسجل العبارة الثانية PizzaStoreContext الجديدة وتوفر اسم الملف لقاعدة بيانات SQLite.

استخدام قاعدة البيانات لعرض البيتزا

يمكننا الآن استبدال البيتزا ذات التعليمات البرمجية المضمنة في صفحة Index.razor.

1. في مستكشف الملفات، قم بتوسيع Pages، ثم حدد Index.razor.

2. استبدل أسلوب OnInitialized() الحالي ب:

   protected override async Task OnInitializedAsync()
   {
       specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
   }
   

   Note

   يستبدل OnInitialized() هذا الرمز ب OnInitializedAsync(). سيتم الآن إرجاع العروض الخاصة ك JSON من التطبيق بشكل غير متزامن.

3. هناك بعض الأخطاء التي تحتاج إلى إصلاحها. أضف عبارات @inject هذه ضمن توجيه @page:

   @inject HttpClient HttpClient
   @inject NavigationManager NavigationManager
   

4. احفظ جميع التغييرات، ثم حدد F5 أو حدد تشغيل. ثم حدد بدء تصحيح الأخطاء.

   يوجد خطأ في وقت التشغيل عند تشغيل التطبيق. رفع JsonReader استثناء.

5. تذكر أن التطبيق يجب أن يقوم بإنشاء JSON في (http://localhost:5000/specials). انتقل إلى عنوان URL هذا.

   لا يعرف التطبيق كيفية توجيه هذا الطلب. تتعرف على التوجيه في الوحدة النمطية الخاصة بتوجيه Blazor. دعونا نصلح الخطأ الآن.

6. حدد Shift + F5، أو حدد إيقاف تصحيح الأخطاء.

7. في مستكشف الملفات، حدد Program.cs.

8. حول منتصف الملف، بعد الأسطر التي تبدأ app.، أضف نقطة النهاية هذه:

   app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
   

   يجب أن تكون التعليمات البرمجية الآن:

   ...
   app.MapRazorPages();
   app.MapBlazorHub();
   app.MapFallbackToPage("/_Host");
   app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
   ...
   

9. حدد F5 أو حدد Run. ثم حدد بدء تصحيح الأخطاء.

   يجب أن يعمل التطبيق الآن، ولكن دعونا نتحقق من أن JSON يتم إنشاؤه بشكل صحيح.

10. انتقل إلى (http://localhost:5000/specials) للاطلاع على:

    

    يحتوي JSON على بيتزا مدرجة بترتيب تنازلي للسعر كما هو محدد في وحدة تحكم البيتزا الخاصة.