Laravel与Vue同服务器部署无认证场景下购物车会话处理实现流程咨询

Perfect, let’s walk through a complete, step-by-step implementation for your guest-only shopping cart using Laravel and Vue—no auth required, just session-based persistence. I’ll cover both backend (Laravel) and frontend (Vue) code, plus key considerations to make this work smoothly.

1. Backend Setup (Laravel) #

First, we’ll leverage Laravel’s built-in session system to store cart data. Since there’s no user authentication, the session ID (stored in a browser cookie) will be our way to track unique guests.

1.1 Session Configuration #

Laravel’s default session driver (file) works great for a single-server setup—no extra services needed. Double-check your config/session.php:

'driver' => env('SESSION_DRIVER', 'file'),
'lifetime' => env('SESSION_LIFETIME', 120), // Adjust cart persistence time (minutes)
'path' => '/', // Ensures cookie applies to entire site

The session cookie will automatically be set when the user first visits your site, so you don’t need to manually create a session—Laravel handles that.

1.2 Define API Routes #

We’ll use web middleware (since it includes session support) for our cart endpoints. Add these to routes/web.php:

use App\Http\Controllers\CartController;

Route::prefix('api/cart')->group(function () {
    Route::get('/', [CartController::class, 'index']);    // Get cart items
    Route::post('/', [CartController::class, 'store']);   // Add item
    Route::put('/{itemId}', [CartController::class, 'update']); // Update quantity
    Route::delete('/{itemId}', [CartController::class, 'destroy']); // Remove item
});

1.3 Cart Controller Implementation #

Create a CartController to handle CRUD operations. Here’s the core logic:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Product; // Assume you have a Product model

class CartController extends Controller
{
    // Get current cart items (with product details)
    public function index()
    {
        $cart = session()->get('cart', []);
        
        // Map cart items to include full product data
        $cartWithProducts = collect($cart)->map(function ($item) {
            $product = Product::find($item['product_id']);
            return [
                'id' => $item['id'],
                'product' => $product,
                'quantity' => $item['quantity']
            ];
        });

        return response()->json($cartWithProducts);
    }

    // Add item to cart
    public function store(Request $request)
    {
        // Validate incoming data
        $validated = $request->validate([
            'product_id' => 'required|exists:products,id',
            'quantity' => 'required|integer|min:1'
        ]);

        $cart = session()->get('cart', []);
        $existingItemIndex = collect($cart)->search(fn($item) => $item['product_id'] === $validated['product_id']);

        if ($existingItemIndex !== false) {
            // Update quantity if item already exists
            $cart[$existingItemIndex]['quantity'] += $validated['quantity'];
        } else {
            // Add new item with a unique ID for easy updates/deletes
            $cart[] = [
                'id' => Str::uuid()->toString(),
                'product_id' => $validated['product_id'],
                'quantity' => $validated['quantity']
            ];
        }

        session()->put('cart', $cart);
        return response()->json(['message' => 'Item added', 'cart' => $cart]);
    }

    // Update item quantity
    public function update(Request $request, string $itemId)
    {
        $validated = $request->validate([
            'quantity' => 'required|integer|min:1'
        ]);

        $cart = session()->get('cart', []);
        $itemIndex = collect($cart)->search(fn($item) => $item['id'] === $itemId);

        if ($itemIndex === false) {
            return response()->json(['message' => 'Item not found'], 404);
        }

        $cart[$itemIndex]['quantity'] = $validated['quantity'];
        session()->put('cart', $cart);
        return response()->json(['message' => 'Quantity updated', 'cart' => $cart]);
    }

    // Remove item from cart
    public function destroy(string $itemId)
    {
        $cart = session()->get('cart', []);
        $cart = collect($cart)->reject(fn($item) => $item['id'] === $itemId)->values()->toArray();

        session()->put('cart', $cart);
        return response()->json(['message' => 'Item removed']);
    }
}

2. Frontend Setup (Vue) #

We’ll use Pinia for state management (Vuex works too) to keep the cart synced across components, and axios for API calls.

2.1 Cart State Management (Pinia Example) #

Create a stores/cart.js file:

import { defineStore } from 'pinia';
import axios from 'axios';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  getters: {
    totalItems() {
      return this.items.reduce((total, item) => total + item.quantity, 0);
    },
    totalPrice() {
      return this.items.reduce((total, item) => total + (item.product.price * item.quantity), 0);
    }
  },
  actions: {
    // Fetch cart on page load
    async fetchCart() {
      try {
        const response = await axios.get('/api/cart');
        this.items = response.data;
      } catch (error) {
        console.error('Failed to fetch cart:', error);
      }
    },
    // Add item to cart
    async addToCart(productId, quantity) {
      try {
        const response = await axios.post('/api/cart', {
          product_id: productId,
          quantity: quantity
        });
        this.items = response.data.cart;
      } catch (error) {
        console.error('Failed to add item:', error);
      }
    },
    // Update item quantity
    async updateQuantity(itemId, quantity) {
      try {
        const response = await axios.put(`/api/cart/${itemId}`, { quantity });
        this.items = response.data.cart;
      } catch (error) {
        console.error('Failed to update quantity:', error);
      }
    },
    // Remove item
    async removeItem(itemId) {
      try {
        await axios.delete(`/api/cart/${itemId}`);
        this.items = this.items.filter(item => item.id !== itemId);
      } catch (error) {
        console.error('Failed to remove item:', error);
      }
    }
  }
});

2.2 Sync Cart on Page Load #

In your root App.vue, fetch the cart when the app mounts:

<script setup>
import { useCartStore } from '@/stores/cart';
import { onMounted } from 'vue';

const cartStore = useCartStore();

onMounted(() => {
  cartStore.fetchCart();
});
</script>

2.3 Example Cart Component #

Create a Cart.vue component to display and interact with the cart:

<template>
  <div class="cart">
    <h2>Your Cart</h2>
    <div v-if="cartStore.items.length === 0" class="empty-cart">
      Cart is empty
    </div>
    <div v-else>
      <div v-for="item in cartStore.items" :key="item.id" class="cart-item">
        <h3>{{ item.product.name }}</h3>
        <p>{{ item.product.price }} $</p>
        <input 
          type="number" 
          :value="item.quantity" 
          @change="cartStore.updateQuantity(item.id, $event.target.value)"
          min="1"
        >
        <button @click="cartStore.removeItem(item.id)">Remove</button>
      </div>
      <div class="cart-total">
        Total: {{ cartStore.totalPrice }} $ ({{ cartStore.totalItems }} items)
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart';

const cartStore = useCartStore();
</script>

3. Key Considerations #

• Session Persistence: The cart will persist as long as the user’s session cookie exists. Adjust SESSION_LIFETIME in .env to control how long inactive carts are kept.
• Security: Laravel encrypts session data by default, so cart data is safe from tampering. The validation in the controller prevents invalid product IDs or quantities.
• No Auth Fallback: If you ever add user auth later, you can migrate the session cart to the user’s account by linking the session ID to the user record during login.
• Performance: For large carts, consider using the redis session driver instead of file for faster access, but file is fine for most small-to-medium stores.

内容的提问来源于stack exchange，提问作者Maik Lowrey