Question

api.php

Route::get('/products', 'ProductsController@index');

查询：

$products = DB::table('sizes')
  ->join('products', 'sizes.id', '=', 'products.sizes')
  ->join('categories', 'products.category', '=', 'categories.id')
  ->select('products.*', 'categories.catname', 'categories.catimage', 'categories.catdescription', 'sizes.size')
  ->where([['products.is_active', '=', 1],['categories.is_active', '=', 1],])
  ->orderBy('products.id', 'ASC')
   ->paginate(5);
return $products;

Vue组件：

<div v-for="product in products.data" :key="product.id">
      <h1>{{ product.name }}</h1>
    </div>
    <pagination :data="products" @pagination-change-page="getResults"></pagination>

methods: {
  getResults(page = 1) {
    this.$url.get('products/results?page=' + page)
    .then(response => {
    console.log(response)
    this.products = response.data;
    });
  }
}

产品的初始负载起作用，它显示5个产品并显示分页。每当我尝试从分页中单击一个新页面时，都会遇到多个错误。

CORS（由于我的应用程序是完全公开的，所以我看不到它）和两个网络错误

from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

net::ERR_FAILED

Uncaught (in promise) Error: Network Error

我这里缺少什么吗？我应该创建另一个处理分页的端点，还是应该从获取初始分页的同一端点处理？

Answer 1

1。将此代码复制并粘贴到新组件中，例如“ Pagination.vue”

<template>
   <nav aria-label="...">
       <ul class="pagination justify-content-center">
           <li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(1)"  >First page</a>
           </li>
           <li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.current_page - 1)"><i class="fa fa-arrow-left"></i></a>
           </li>

           <li class="page-item" v-for="(page,index) in pages"  :key="page" :class="isCurrentPage(page) ? 'active' : ''">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(page)">{{ page }}
                   <span v-if="isCurrentPage(page)" class="sr-only">(current)</span>
               </a>
           </li>

           <li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.current_page + 1)"><i class="fa fa-arrow-right"></i></a>
           </li>
           <li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.last_page)">Last Page</a>
           </li>
       </ul>
   </nav>
</template>

<script>
   export default {
       props:['pagination', 'offset'],
       methods: {
           isCurrentPage(page){
               return this.pagination.current_page === page
           },
           changePage(page) {
               if (page > this.pagination.last_page) {
                   page = this.pagination.last_page;
               }
               this.pagination.current_page = page;
               this.$emit('paginate');
           }
       },
       computed: {
           pages() {
               let pages = []

               let from = this.pagination.current_page - Math.floor(this.offset / 2)

               if (from < 1) {
                   from = 1
               }

               let to = from + this.offset -1

               if (to > this.pagination.last_page) {
                   to = this.pagination.last_page
               }

               while (from <= to) {
                   pages.push(from)
                   from++
               }

               return pages
           }
       }
   }
</script>

2。在您的js/app.js文件中全局设置

Vue.component('pagination', require('./components/Pagination.vue').default);

3。在数据下面的vue组件中，按如下所示设置分页组件，您可以尽可能多地补偿偏移量

<pagination v-if="pagination.last_page > 1" 
  :pagination="pagination" 
  :offset="7" 
  @paginate="getItems()">
</pagination>

4。将当前页面设置为1，

data(){
   return{
      items: [],
         pagination: {
            current_page: 1,
         },
   }
},

5。制定一种发送页码并收集分页数据的方法，

getItems(){
    axios.get('api/items?page='+this.pagination.current_page)
        .then(response => {
            this.items = response.data.data;
            this.pagination = response.data.meta;
        });
},

6。确保返回带有资源集合的数据分页数据，

public function index(){
    return new GeneralCollection(Item::with('category')->orderBy('name')->paginate(10));
}

***如果您没有收集文件，请制作一个文件，例如“ GeneralCollection”，

php artisan make:resource GeneralCollection

然后，将其包含在要返回收集的数据的控制器上，

use App\Http\Resources\GeneralCollection;

7。恭喜！

尝试转到其他页面时出现Laravel-Vue-Pagination错误

1 个答案: