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

而你只是可以在前端实现你的分页流程。