api系統的分頁工作原理（前端是angular2，後端是laravel5.4）？

Question

我有一個酒店預訂項目，前端使用angular2創建，後端使用laravel創建，它是一個API系統。我有一個在angular2中列出的表格。爲此，我從laravel獲取了預訂數據並將其綁定在了角度表內，但我不知道分頁是如何通過api工作的。最初我只提取並綁定了15個數據。點擊下一頁時如何獲得更多數據。這裏是laravel角的代碼。

Laravel

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

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

Angular2

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分頁系統工作的分頁角UI：

首先，幫助，創建一個Booking和PaginatedBooking類（我的預約很簡單，只有一個描述 - 定義爲需要的話）：

booking.model.ts：

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

分頁-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()函數調用時這些按鈕被擊中的預訂服務：

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> 

而且應該這樣做。爲了簡潔，我省略了一些導入。根據需要自定義您的模板。 我這裏有一個示例項目，演示這一切是如何走到一起，但注意我的角度文件命名有少許不同，我已經添加了一個天真的裝載狀態：

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

，您可以see the live demo here.

祝你好運！

Answer 2

的Laravel分頁程序結果類實現Illuminate\Contracts\Support\Jsonable接口契約和暴露的toJSON方法，所以它是很容易的分頁結果轉換成JSON， 您可以簡單地從控制器返回

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

    return $bookings; 
} 

而且結果應該是這樣的

{ 
    "total": 50, 
    "per_page": 15, 
    "current_page": 1, 
    "last_page": 4, 
    "next_page_url": "http://example.app?page=2", 
    "prev_page_url": null, 
    "from": 1, 
    "to": 15, 
    "data":[ 
     { 
      // Result Object 
     }, 
     { 
      // Result Object 
     } 
    ] 
} 

而你只是可以在前端實現你的分頁流程。