用 Claude Code 构建电商网站实战指南

用 Claude Code 构建电商网站

电商网站需要商品管理、购物车、支付、库存、订单等一大堆功能。借助 Claude Code，这些模块可以用一致的设计高效搭建出来。

商品数据模型

> 用 Next.js 搭一个电商网站。
> 要有商品列表、详情、购物车、结账页面，
> 集成 Stripe 支付，另外还要包含库存管理。

// src/types/product.ts
export interface Product {
  id: string;
  name: string;
  slug: string;
  description: string;
  price: number;
  compareAtPrice?: number;
  images: string[];
  category: string;
  variants: ProductVariant[];
  stock: number;
  isActive: boolean;
}

export interface ProductVariant {
  id: string;
  name: string;       // 例如："M 号 / 蓝色"
  sku: string;
  price: number;
  stock: number;
  attributes: Record<string, string>;
}

export interface CartItem {
  productId: string;
  variantId?: string;
  quantity: number;
  price: number;
}

购物车功能实现

// src/stores/cart-store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartState {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
  totalItems: () => number;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find(
            (i) => i.productId === item.productId && i.variantId === item.variantId
          );
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.productId === item.productId
                  ? { ...i, quantity: i.quantity + item.quantity }
                  : i
              ),
            };
          }
          return { items: [...state.items, item] };
        }),
      removeItem: (productId) =>
        set((state) => ({
          items: state.items.filter((i) => i.productId !== productId),
        })),
      updateQuantity: (productId, quantity) =>
        set((state) => ({
          items: state.items.map((i) =>
            i.productId === productId ? { ...i, quantity } : i
          ),
        })),
      clearCart: () => set({ items: [] }),
      totalPrice: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
      totalItems: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
    }),
    { name: 'cart-storage' }
  )
);

结账 API

// src/app/api/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(request: NextRequest) {
  const { items } = await request.json();

  // 库存校验
  for (const item of items) {
    const product = await getProduct(item.productId);
    if (!product || product.stock < item.quantity) {
      return NextResponse.json(
        { error: `${product?.name || '商品'} 库存不足` },
        { status: 400 }
      );
    }
  }

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: items.map((item: CartItem) => ({
      price_data: {
        currency: 'cny',
        product_data: { name: item.productId },
        unit_amount: item.price,
      },
      quantity: item.quantity,
    })),
    success_url: `${process.env.APP_URL}/order/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.APP_URL}/cart`,
    shipping_address_collection: {
      allowed_countries: ['CN'],
    },
  });

  return NextResponse.json({ url: session.url });
}

商品列表组件

// src/components/ProductCard.tsx
import Image from 'next/image';
import Link from 'next/link';
import { Product } from '@/types/product';

export function ProductCard({ product }: { product: Product }) {
  const discount = product.compareAtPrice
    ? Math.round((1 - product.price / product.compareAtPrice) * 100)
    : 0;

  return (
    <Link href={`/products/${product.slug}`} className="group">
      <div className="relative aspect-square overflow-hidden rounded-lg">
        <Image
          src={product.images[0]}
          alt={product.name}
          fill
          className="object-cover group-hover:scale-105 transition-transform"
        />
        {discount > 0 && (
          <span className="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
            {discount}% OFF
          </span>
        )}
      </div>
      <h3 className="mt-2 font-medium">{product.name}</h3>
      <div className="flex items-center gap-2">
        <span className="text-lg font-bold">¥{product.price.toLocaleString()}</span>
        {product.compareAtPrice && (
          <span className="text-sm text-gray-400 line-through">
            ¥{product.compareAtPrice.toLocaleString()}
          </span>
        )}
      </div>
    </Link>
  );
}

总结

借助 Claude Code，把电商网站里一堆复杂功能用一致的代码风格一口气搭起来完全可行。支付部分的细节可以参考 Stripe 支付集成指南，状态管理方面请参考 状态管理实现。

建议同时查阅 Stripe 官方文档（stripe.com/docs）。