带有 API 的 Laravel 8.0 购物车

Question

我正在使用 Laravel 8.0 开发电子商务商店应用程序。一项任务是从数据库中检索产品列表并显示在产品刀片页面中。

下面是我的控制器实现

<?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    use App\Models\Product;
    
    class ProductController extends Controller
    {
        //
    
        public function getProducts(){                
            $productList = Product::select("*")->where('active_flag','Y')->paginate(10);
            return response()->json(['productList'=>$productList]);
        }
    
        
    }

还开发了一个api路由，下面是我的api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/products',[ProductController::class, 'getProducts']);

下面是我查看的products.blade页面

@extends('layouts.frontend')

@section('content')
    <div class="container px-6 mx-auto">
        <h3 class="text-2xl font-medium text-gray-700">Product List</h3>
        <div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            
            <div class="w-full max-w-sm mx-auto overflow-hidden rounded-md shadow-md">
                
                <div class="flex items-end justify-end w-full bg-cover">
                    
                </div>
                <div class="px-5 py-3">
                    <h3 class="text-gray-700 uppercase">Product Name goes here</h3>
                    <span class="mt-2 text-gray-500">Product price goes here</span>
                    <form action="/" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" value="product id goes here" name="id">
                        <input type="hidden" value="product name goes here" name="name">
                        <input type="hidden" value="product price goes here" name="price">
                        <input type="hidden" value="product img url goes here"  name="image">
                        <input type="hidden" value="1" name="quantity">
                        <button class="px-4 py-2 text-white bg-blue-800 rounded">Add To Cart</button>
                    </form>
                </div>
                
            </div>
           
        </div>
    </div>
@endsection

现在想通过api获取json结果显示在blade页面。但我不知道该怎么做。在这方面需要一些帮助。希望我的方法是正确的并且符合标准..