📱 前言
嘿，各位宝子们！今天咱们不讲枯燥的编程理论，不搞复杂的算法，就聊点实在的 —— 如何用AI帮我们偷懒写代码！是不是听起来就很香？没错，我要带大家用 Cursor ，蹭蹭几下就搞定一个多功能电商网站！
想想看，以前写个网站可能要一周，现在只需要拿起咖啡☕，跟AI小助手唠嗑半小时，就能搞定。这波操作，简直就是程序员界的"躺平致富"了啊！🤑
🛠️ 准备工作
首先，确保你的装备齐全：
- Cursor编辑器（内置Claude/GPT，写代码贼溜）
- Next.js的基础知识（不会？没关系，AI会教你）
- 一颗摸鱼的心❤️
🚀 Step 1: 创建项目
打开终端，输入以下魔法咒语：
npx create-next-app@latest .
这时，AI会问你一系列问题，就像相亲大妈问你的条件一样，建议这么回答：
✅ 想好项目名称了吗? › eshop
✅ 要用TypeScript吗? › 当然要！类型安全才是真爱！
✅ 要用ESLint吗? › 必须的，代码规范人人夸
✅ 要用Tailwind CSS吗? › 是的，懒人必备CSS框架
✅ 要用src/目录吗? › 要，组织代码更清晰
✅ 要用App Router吗? › 必须的，紧跟Next.js潮流
✅ 自定义导入别名? › @/*
这时候，AI就开始偷偷摸摸地下载一堆东西，比你双十一剁手还快！
🔄 Step 2: 启动开发服务器
npm run dev
这个命令让你的网站在本地"活"起来，像是给它注入了灵魂一样！打开 http://localhost:3000 ，哇！一个基础的模板已经出现了！
💬 Step 3: 和AI对话，创建购物车功能
这才是重头戏！打开Cursor，加载你的项目，然后开始和AI聊天：
我： 嘿，AI助手，我需要一个电商网站的购物车功能，你能帮我设计一下吗？
AI： 当然可以！我们需要创建一个购物车上下文来管理状态，一个产品类型定义，以及相关组件。我来帮你实现这些。
首先，让我们创建产品类型定义文件：
// src/types/product.ts
export interface Product {
id: string;
name: string;
price: number;
originalPrice?: number; // 原价，用于显示折扣
description: string;
images: string[]; // 支持多图
thumbnailUrl: string; // 缩略图
category: string;
tags: string[];
inventory: {
inStock: boolean;
quantity: number;
};
rating: {
average: number; // 1-5星
count: number; // 评价数量
};
specifications?: Record<string, string>; // 产品规格
createdAt: string; // ISO日期字符串
updatedAt: string;
}
我： 很棒！现在我们需要一个购物车上下文。
AI： 好的，下面是购物车上下文的实现：
// src/context/CartContext.tsx
"use client";
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import { Product } from '@/types/product';
// 购物车项目类型
export type CartItem = {
product: Product;
quantity: number;
};
// 购物车上下文类型
type CartContextType = {
items: CartItem[];
addToCart: (product: Product, quantity?: number) => void;
removeFromCart: (productId: string) => void;
updateQuantity: (productId: string, quantity: number) => void;
clearCart: () => void;
totalItems: number;
totalPrice: number;
};
// 创建购物车上下文
const CartContext = createContext<CartContextType | undefined>(undefined);
// 购物车提供者组件
export const CartProvider = ({ children }: CartProviderProps) => {
const [items, setItems] = useState<CartItem[]>([]);
// 从localStorage加载购物车数据
useEffect(() => {
const storedCart = localStorage.getItem('cart');
if (storedCart) {
try {
setItems(JSON.parse(storedCart));
} catch (error) {
console.error('Failed to parse cart from localStorage:', error);
}
}
}, []);
// 添加商品到购物车
const addToCart = (product: Product, quantity = 1) => {
setItems(prevItems => {
const existingItem = prevItems.find(item => item.product.id === product.id);
if (existingItem) {
// 如果商品已存在，增加数量
return prevItems.map(item =>
item.product.id === product.id
? { ...item, quantity: item.quantity + quantity }
: item
);
} else {
// 如果商品不存在，添加新商品
return [...prevItems, { product, quantity }];
}
});
};
// 购物车其他功能省略...
return (
<CartContext.Provider value={{
items, addToCart, removeFromCart, updateQuantity, clearCart, totalItems, totalPrice
}}>
{children}
</CartContext.Provider>
);
};
// 使用购物车的自定义Hook
export const useCart = () => {
const context = useContext(CartContext);
if (context === undefined) {
throw new Error('useCart must be used within a CartProvider');
}
return context;
};
🎯 Step 4: 产品卡片组件
产品卡片是电商网站的灵魂，AI帮我们生成了一个颜值和功能并存的组件：
// src/components/ProductCard.tsx
import React from 'react';
import Image from 'next/image';
import { Product } from '@/types/product';
import StarRating from './StarRating';
import { useCart } from '@/context/CartContext';
import { ShoppingCartIcon } from './icons';
interface ProductCardProps {
product: Product;
}
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
const { addToCart } = useCart();
// 计算折扣百分比
const discountPercentage = product.originalPrice ?
Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100) : 0;
// 处理添加到购物车
const handleAddToCart = () => {
addToCart(product, 1);
// 添加产品卡片动画效果
const card = document.getElementById(`product-card-${product.id}`);
if (card) {
card.classList.add('scale-105');
setTimeout(() => {
card.classList.remove('scale-105');
}, 200);
}
};
return (
<div className="group relative bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md hover:scale-[1.02] flex flex-col h-full">
{/* 折扣标签 */}
{discountPercentage > 0 && (
<div className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">
-{discountPercentage}%
</div>
)}
{/* 图片容器 */}
<div className="relative aspect-w-1 aspect-h-1 overflow-hidden">
<Image
src={product.thumbnailUrl}
alt={product.name}
fill
className="object-cover object-center transition-transform duration-500 group-hover:scale-110"
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
/>
</div>
{/* 产品信息 */}
<div className="p-4 flex flex-col flex-grow">
<div className="flex-grow">
<h3 className="text-sm font-medium text-gray-700 mb-1">{product.name}</h3>
<StarRating rating={product.rating.average} count={product.rating.count} />
<div className="mt-2 mb-4">
<span className="text-lg font-semibold text-gray-900">¥{product.price}</span>
{product.originalPrice && (
<span className="ml-2 text-sm text-gray-500 line-through">¥{product.originalPrice}</span>
)}
</div>
</div>
{/* 添加到购物车按钮 */}
<button
onClick={handleAddToCart}
className="w-full bg-indigo-600 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-indigo-700 transition-colors"
>
<ShoppingCartIcon className="w-5 h-5 mr-2" />
<span>加入购物车</span>
</button>
</div>
</div>
);
};
这个组件自带折扣标签、评分系统、动画效果，可以说是相当智能了！
🧩 遇到的问题与解决
开发的道路上总会有坑，我们也不例外。比如，我们在Next.js 13的App Router中遇到了这个错误：
Error: ./src/context/CartContext.tsx:1:10
createContext hook only works in a client component
和AI聊了几句：
我： 这个错误怎么解决呀？
AI： 这是因为Next.js的App Router中，组件默认是服务器组件，但createContext只能在客户端组件中使用。只需在文件顶部添加"use client"指令：
"use client";
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
添加后，问题立刻解决了！看，有AI在，bug都不是事！🐛
🔮 CSS问题解决
我们还遇到了一个CSS问题，@theme inline语法报错：
Unknown at rule @theme
AI立刻给出了解决方案，将其替换为标准CSS变量定义：
:root {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
问题解决得如此优雅，连我这个CSS苦手都忍不住拍手叫好！👏
🚀 最后一步：展示成果
代码写完了，接下来就是"炫耀时间"！
现在只是构筑好了基础架构，剩下的就由各位大佬们自由发挥啦！
💎 总结与思考
通过这种方式开发网站，我们实现了：
- ⏱️ 大幅减少开发时间，从几天到几十分钟
- 💪 无需深厚的技术背景，AI帮你搞定复杂代码
- 🧠 学习最新的开发技术和设计模式
AI编程时代已经来临，它不是来替代我们的，而是帮助我们更好地释放创造力。当AI帮我们处理繁琐的代码细节时，我们可以把精力放在更有创意的工作上。
以前，编程是"人工智能"；现在，编程是"人+人工智能"。这个时代，不会和AI协作的程序员，可能将面临被会用AI的程序员取代的风险！
