如何在api系统中进行分页（前端是angular2，后端是laravel5.4）？

Question

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

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分页系统一起使用的分页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)函数 - 当你点击prev / next按钮时，我们稍后会用它来从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

你可以在这里看到现场演示。

祝好运！

Answer 2

Laravel paginator结果类实现了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
        }
   ]
}

您只需在前端实现分页流程即可。