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

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组件中，在data的下面，这样设置分页组件，偏移量可以随意调整

<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.恭喜！