angular - 分页在 api 系统中是如何工作的(前端是 Angular 2，后端是 laravel 5.4)？

Question

我有一个酒店预订项目，前端是使用 angular2 创建的，后端是使用 laravel 创建的，它是一个 API 系统。我在 angular2 中有一个表列表。为此，我从 laravel 获取了预订数据并绑定(bind)在 Angular 表中，但我不知道分页是如何通过 api 工作的。最初我只获取并绑定(bind)了 15 个数据。当我们点击下一页时如何访问更多数据。这是 laravel angular 的代码。

拉拉维尔

public function index()
{
   $bookings = Booking::where('is_delete', 0)
            ->paginate(15);

   return response()->json(['bookingDetails' => $bookings], 200);
}

Angular 2

booking.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { Bookings } from './booking';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from "rxjs";

@Injectable()
export class BookingService {
    private headers = new Headers({'Content-Type': 'application/json'});
    private _url: string = 'http://cabinapi.app/api/bookings/';
    /*private _url: string = 'apidata/testData.json';*/
    constructor(private http: Http) { }

    getBooking(): Observable<any> {
        return this.http.get(this._url)
            .map((response: Response) => response.json().bookingDetails.data as Bookings[])
            .catch(this.handleError);
    }
    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

booking.component.ts

import { Component, OnInit } from '@angular/core';

import { BookingService } from './booking.service';
import { Bookings } from './booking';
@Component({
    selector: 'booking',
    templateUrl: './booking.component.html'
})
export class BookingComponent implements OnInit {
    bookings: Bookings[];
    constructor(private employeeService: BookingService) {}
    getBooking(): void {
        /*this.employeeService.getEmployee().then(employees => this.employees = employees);*/
        this.employeeService.getBooking().subscribe(bookings => this.bookings = bookings);
    }
    ngOnInit(): void {
        this.getBooking();
        setTimeout(function () {
            $(function() {
                $("#dataTable").DataTable();
            });
        }, 1000);
    }
}

Answer 1

以下是如何构建与原生 Laravel 分页系统一起工作的分页 Angular UI:

首先，创建一个 Booking 和 PaginatedBooking 类(我的预订很简单，只有一个描述——根据需要自定义):

booking.model.ts:

export class Booking {
  id: number;
  description: string;
}

paginated-booking.model.ts: 代表Laravel返回的分页数据

import { Booking } from './booking.model'

export class PaginatedBooking {
  current_page: number;
  data: Booking[];
  from: number;
  last_page: number;
  next_page_url: string;
  path: string;
  per_page: number;
  prev_page_url: string;
  to: number;
  total: number;
}

然后创建您的服务以获取分页预订数据。添加一个 getBookingsAtUrl(url) 函数——稍后我们将使用它在您点击上一个/下一个按钮时从 Laravel 请求特定的分页数据集:

booking.service.ts

export class BookingService {
    private bookingUrl: string = '/api/bookings'
    constructor(private http: Http) { }

    getBookings(): Promise<PaginatedBooking>{
        return this.http.get(this.bookingUrl)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    getBookingsAtUrl(url: string): Promise<PaginatedBooking>{
        return this.http.get(url)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

在您的组件中，实现 ngOnInit() 以获取您的初始预订数据。然后实现一个 getPrev() 函数和一个 nextPage() 函数，它们在点击这些按钮时调用 Bookings 服务:

booking.component.ts:

export class BookingComponent implements OnInit {
  bookings:PaginatedBooking;
  constructor(private service: NativeBookingService) { }

  ngOnInit() {
    this.service.getBookings().then(bookings=>this.bookings = bookings);
  }

  prevPage() {
    this.service.getBookingsAtUrl(this.bookings.prev_page_url).then(bookings=>this.bookings = bookings);
  }

  nextPage() {
    this.service.getBookingsAtUrl(this.bookings.next_page_url).then(bookings=>this.bookings = bookings);
  }
}

最后，您的组件模板:

booking.component.html:

<div *ngIf="bookings">
  <ul>
    <li *ngFor="let booking of bookings.data">{{booking.description}}</li>
  </ul>
  <p>Showing booking {{bookings.from}} to {{bookings.to}} of {{bookings.total}}</p>
  <p>Page {{bookings.current_page}} of {{bookings.last_page}}</p>
  <button (click)="prevPage()" [disabled]="!bookings.prev_page_url" >Prev</button>
  <button (click)="nextPage()" [disabled]="!bookings.next_page_url">Next</button> 
</div>

那应该就可以了。为简洁起见，我省略了一些导入。根据需要自定义您的模板。 我这里有一个示例项目演示了它们是如何组合在一起的，但请注意我的 Angular 文件的命名略有不同，并且我添加了一个简单的加载状态:

https://github.com/SpaceFozzy/laravel-angular-pagination

你可以see the live demo here.

祝你好运!