如何使用一种方法显示视图和返回资源集合 Laravel/Vue 的相同方法

Question

我有一个 Vue 组件，它使用 Laravel Api 数据在模板中显示。我有一个 CustomerController，它使用 index() 方法返回用于创建 API 的 CustomerResource 的集合。我也需要该方法来显示视图。当 CustomerController 的 index 方法用于 API 时，如何显示 index.blade.php。如果您对此问题有任何疑问，请在评论中问我。

客户控制器

   public function index() {
       return CustomerResource::collection(Customer::all());
   }

api.php

    Route::middleware('api')->prefix('v1')->group(function() {
        Route::apiResource('/customers', CustomerController::class);
    });

index.blade.php

    @extends('layouts.app')

    @section('content')
        <all-customers></all-customers>
    @endsection

AllCustomers.vue

    <template>
        <div class="customers">
            <div class="main-panel">
                <div class="content">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xl-12 text-right">
                                <a href="#">
                                    <!-- <router-link class="btn" :to="{ name: 'AddCustomer'}">Add New</router-link > -->
                                </a>
                                <a href="#">
                                    <button class="btn">Import</button>
                                </a>
                                <!-- <downloadExcel class = "btn btn-default"
                  :data   = "json_data"
                  :fields = "json_fields"
                  worksheet = "My Worksheet"
                  name    = "customers.xls">
                    Export
                </downloadExcel> -->
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">All Customers</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                      <thead class=" text-primary">
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Actions</th>
                      </thead>
                      <tbody>
                        <tr v-for="(customer,index) in customers" :key="index">
                          <td>
                            {{ customer.id }}
                          </td>
                          <td>
                            {{ customer.name }}
                          </td>
                          <td>
                            {{ customer.email }}
                          </td>
                          <td>
                            {{ customer.phone }}
                          </td>
                          <td>
                            {{ customer.address }}
                          </td>
                          <!-- <td>
                            <router-link :to="{name: 'EditCustomer'}">
                              <span class="material-icons">edit</span>
                            </router-link>
                              <span class="material-icons">delete</span>
                          </td> -->
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>
        </div>
    </div>
</template>

<script>
    import JsonExcel from 'vue-json-excel'
    export default {
        name:'AllCustomers',
        components:{
            downloadExcel: JsonExcel
        },
        data(){
            return{
                customers:[],
            }
        },
        mounted(){
            axios
            .get('http://localhost:8000/api/v1/customers')
            .then(response=> this.customers = response.data.data)
        }
    }
</script>

Answer 1

您想返回 index.blade 以及可以从组件中获取的集合。

用数据返回视图并调用相同的方法

测试请求的类型，如果请求需要json，则只给它集合，如果不是，则返回一个视图。这就是你如何返回一个预加载数据的视图，并且仍然可以从你的 vue js 中的 api 中受益

   public function index(Request $request)
    {

        $customers = CustomerResource::collection(Customer::all());
           
       if($request->wantsJason()) {     // this will be called by the vue component
               return response()->json([
                      'customers' => $customers
               ],200)
        }

        // this will be trigger if a full http request sent (on site load)
        return view('index')->with('customers',$customers)
    }

选项 1：在您的 vue 模板中访问刀片道具。

index.blade.php

@extends('layouts.app')

@section('content') // here you can use @if , @foreach , @can etc...
 <all-customers inline-template :customers='@json($customers)'> //passing customers as vue prop
 </all-customers>

AllCustomers.vue

<template> [ your code ...] </template>
<script>
    import JsonExcel from 'vue-json-excel'
    export default {
        name:'AllCustomers',
        props : ['customers']
        components:{
            downloadExcel: JsonExcel
        }
    }
</script>

选项 2 内联模板

如果您要混合使用刀片和 vuejs，那么单文件组件 (SFC) 不是一个好的解决方案，因为您将使用 laravel 路由，并且仅包含 vue 标签的整个页面在与 vuejs 的反应中并不是最佳的使用 laravel 功能，如守卫、循环和条件

解决方案是vue inline-template，这将帮助您利用 laravel 功能以及 vuejs 反应性和 ajax 请求

index.blade.php 将刀片道具作为 vue 道具传递

@extends('layouts.app')

@section('content') // here you can use @if , @foreach , @can etc...
 <all-customers inline-template :customers='@json($customers)'> //passing customers as vue prop
    <div class="customers">
        <div class="main-panel">
        <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xl-12 text-right">
                <a href="#">
                  <!-- <router-link class="btn" :to="{ name: 'AddCustomer'}"> 
                    Add New
                  </router-link > -->
                </a>
                <a href="#">
                  <button class="btn">Import</button>
                </a>
                <!-- <downloadExcel
                  class   = "btn btn-default"
                  :data   = "json_data"
                  :fields = "json_fields"
                  worksheet = "My Worksheet"
                  name    = "customers.xls">
                    Export
                </downloadExcel> -->
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">All Customers</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                      <thead class=" text-primary">
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Actions</th>
                      </thead>
                      <tbody>
                        <tr v-for="(customer,index) in customers" :key="index">
                          <td>
                            {{ customer.id }}
                          </td>
                          <td>
                            {{ customer.name }}
                          </td>
                          <td>
                            {{ customer.email }}
                          </td>
                          <td>
                            {{ customer.phone }}
                          </td>
                          <td>
                            {{ customer.address }}
                          </td>
                          <!-- <td>
                            <router-link :to="{name: 'EditCustomer'}">
                              <span class="material-icons">edit</span>
                            </router-link>
                              <span class="material-icons">delete</span>
                          </td> -->
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>
        </div>
    </div>


    </all-customers>
@endsection

AllCustomers.vue

<script>
    import JsonExcel from 'vue-json-excel'
    export default {
        name:'AllCustomers',
        props : ['customers']
        components:{
            downloadExcel: JsonExcel
        }
    }
</script>