第17章 API Routes

// src/app/api/comments/route.js
import { NextResponse } from 'next/server'

// 模拟数据库
let comments = [
    { id: 1, articleId: 'hello-world', user: '小明', content: '写得不错！', time: '2026-06-10' },
    { id: 2, articleId: 'hello-world', user: '小红', content: '学到了！', time: '2026-06-11' },
    { id: 3, articleId: 'react-basics', user: '小刚', content: '感谢分享', time: '2026-06-11' }
]

// GET：获取评论（支持按文章筛选）
export async function GET(request) {
    const articleId = request.nextUrl.searchParams.get('articleId')

    let result = comments
    if (articleId) {
        result = comments.filter(c => c.articleId === articleId)
    }

    return NextResponse.json({
        success: true,
        total: result.length,
        data: result
    })
}

// POST：添加评论
export async function POST(request) {
    try {
        const body = await request.json()

        // 验证必填字段
        if (!body.user || !body.content || !body.articleId) {
            return NextResponse.json(
                { success: false, message: '缺少必填字段：user、content、articleId' },
                { status: 400 }
            )
        }

        // 验证内容长度
        if (body.content.length > 500) {
            return NextResponse.json(
                { success: false, message: '评论内容不能超过 500 字' },
                { status: 400 }
            )
        }

        // 创建新评论
        const newComment = {
            id: comments.length + 1,
            articleId: body.articleId,
            user: body.user,
            content: body.content,
            time: new Date().toISOString().split('T')[0]
        }

        comments.push(newComment)

        return NextResponse.json({
            success: true,
            data: newComment,
            message: '评论成功！'
        }, { status: 201 })

    } catch (error) {
        return NextResponse.json(
            { success: false, message: '请求格式错误，请发送 JSON' },
            { status: 400 }
        )
    }
}复制

// src/app/articles/[slug]/page.js（部分代码）
'use client'

import { useState } from 'react'

export default function ArticlePage() {
    const [comments, setComments] = useState([])
    const [user, setUser] = useState('')
    const [content, setContent] = useState('')

    // 提交评论
    async function handleSubmit(e) {
        e.preventDefault()

        // 发送 POST 请求
        const res = await fetch('/api/comments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                user: user,
                content: content,
                articleId: 'hello-world'
            })
        })

        const data = await res.json()

        if (data.success) {
            setComments([...comments, data.data])
            setContent('')
            alert('评论成功！')
        } else {
            alert('评论失败：' + data.message)
        }
    }

    return (
        <div>
            <h1>文章页面</h1>

            {/* 评论表单 */}
            <form onSubmit={handleSubmit}>
                <input
                    value={user}
                    onChange={(e) => setUser(e.target.value)}
                    placeholder="你的名字"
                    required
                />
                <textarea
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    placeholder="写下你的评论..."
                    required
                />
                <button type="submit">提交评论</button>
            </form>

            {/* 评论列表 */}
            <div>
                {comments.map(c => (
                    <div key={c.id}>
                        <strong>{c.user}</strong> · {c.time}
                        <p>{c.content}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}复制