عرض قائمة users وجلبها عبر API من قاعدة البيانات

في هذا الدرس سنقوم بتجربة حقيقية لعرض قائمة المستخدمين الدين قمنا بانشائهم يودويا من قاعدة البيانات

وسير عمل هده العملية ستكون كالتالي

المكون component سيرسل طلبية الى ملف الخدمة الذي سننشأه بجلب بيانات المستخدمين
ملف الخدمة يستجيب للطلب ويقوم بارسال الطلب الى api
الـ api يقوم بمعالجة الطلب ويتفقد قاعدة البيانات ثم يعيد النتائج الى ملف الخدمة service على شكل بيانات json
ملف الخدمة سيتلقى الرد من webapi وسيحول الرد الى المكون
المكون سيعالج الرد ويرسله الى ملف template الخاص به
ملف template الخاص بالمكون سيستعرض اما جدول المستخدمين اما خطأ ما لسبب معين .. اما بيانات فارغة بسبب عدم وجود مستخدمين بقاعدة البيانات

ونلخص هده النقاط على هدا الشكل

A. علينا أولا ان ننشيء ملف الخدمة service ولنسمه مثلا user.service . انشيء مجلد داخل app وسمه services حيث سنضع داخله ملفات الخدمة التي نحتاج اليها

/src/app/services/user.service.ts

ng generate service services/user

قم بتضمين ملف الخدمة بالموديول module

import { UserService } from './services/user.service'; // +

  providers: [
    UserService,  //+
  ],

B. ننشيء الدالة getUsers التي تقوم بطلب البيانات من ملف الخدمة الى api عن طريق GET Method

افتح ملف الخدمة واضف الدالة

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';  //+
import { map } from 'rxjs/operators';  //+

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(public httpClient: HttpClient,) { }  //+


  getUsers(url:string){  //+
   return  this.httpClient.get(url)
      .pipe(
        map(res => res) 
      );
  }

}

بما اننا استخدمنا موديول HttpClient الخاص بالتواصل عبر برتوكول http مع api فيجب علينا تضمين هذا الموديول بملف app.module حتى يتعرف عليه

افتح ملف app.module وقم بتضمينه

import { HttpClientModule } from '@angular/common/http'; // + here

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, // + here
  ],

ليصبح ملف module بهدا الشكل

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, 
  ],
  providers: [
    UserService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

C. بعد ذلك ننشيء الطلبية بالمكون app.component سننشيئ دالة بالـ component تقوم بعمل قناة بين المكون وملف الخدمة حيث هدفها هو الاتصال بملف الخدمة لارسال الطلب واستقبال النتيجة

قم بتمهيد كائن عن ملف الخدمة بدالة constractor + قم بتضمين ملف الخدمة بال component

import { UserService } from '../user.service';

  constructor(public usersService:UserService, ) {
  }

انشيء الطلبية بدالة init

 ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }

ليصبح المكون بهذا الشكل

import { UserService } from './services/user.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 public users;

  constructor(public usersService:UserService, ) {
  }
  
  ngOnInit() {
    this.usersService.getUsers('http://localhost/webapi/api.php/users?transform=1')
    .subscribe(
        result => {
           let response:any = result; 
           this.users = response.users; // النتائج تعطي عدة قيم
           console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح

        },
        error => {
            console.log(error);
        }
    );
  }


}

D. احفظ الكل وافتح debugger عن طريق F12 ثم اختر نافدة Console لنتتبع النتائج

لاتنسى تشغيل سرفر apache لكي يقوم بمعالجة api

ng serve

الان لم يتبقى سوى استعراض النتائج في جدول بملف template

افتح app.component.html واضف الجدول

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">CRUD</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
    </ul>
    <a class="btn btn-outline-success my-2 my-sm-0" >Login</a>
    <a class="btn btn-outline-success my-2 my-sm-0" >Register</a>
  </div>
</nav>

<br>
<br>

<div class="container">
  <table *ngIf='users' class="table table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
        <th scope="col">password</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor='let user of users'>
            <th scope="row">{{  user.id  }}</th>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </tbody>
  </table>
</div>

النتيجة على المتصفح

مدونتي الرقمية

بحث هذه المدونة الإلكترونية

عرض قائمة users وجلبها عبر API من قاعدة البيانات

الدروس السابقة :

تعليقات

إرسال تعليق