要说这前后端开发工具链，这些年实在是变化太快。从基础的编辑器配置到复杂的自动化部署，整个Web开发生态几乎每年都在更新换代。这篇文章的核心目的，就是帮大家把这条链路上的关键工具和技术栈梳理清楚，提供一个相对完整、可落地的参考方案。

0. 前言

为什么偏偏需要这样一份指南？原因其实不难理解。

首先是工具碎片化的问题。前后端开发涉及的工具有几十上百种，新手往往连该从哪个入手都一头雾水。其次是技术更新速度实在太快，今天热门的框架，明天可能就有更优的替代方案上线。再者，正确的工具选择确实能让开发效率翻倍，团队协作时的统一工具链更是项目维护的基础保障。当然，所有这些都需要你花时间去持续学习和适应。

1. 前端开发工具

前端工具主要负责构建用户界面和交互逻辑，这部分在现代Web应用里几乎是核心中的核心。下面逐个来看几个主流框架的技术特点。

1.1 React vs Vue3 vs Next.js 技术对比

React作为Facebook推出的组件化库，早已成为行业标准。它通过函数式组件和Hooks来管理状态与生命周期，虚拟DOM渲染机制保证了不错的性能表现。

1.1.1 React 代码示例

// React 函数组件与 Hooks
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      } finally {
        setLoading(false);
      }
    }
    fetchUser();
  }, [userId]);

  if (loading) return 
加载中...
;
  if (!user) return 
用户不存在
;

  return (
    

      
{user.name}
      
{user.email}
      
    
  );
}

export default UserProfile;

Vue3引入的Composition API让代码复用性明显提升，响应式系统改为基于Proxy实现，比Vue2的Object.defineProperty更高效，能处理的数据类型也更丰富。这让它在中小型项目中表现格外亮眼。

1.1.2 Vue3 代码示例

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  userId: {
    type: String,
    required: true
  }
});

const user = ref(null);
const loading = ref(true);

const fetchUser = async (id) => {
  loading.value = true;
  try {
    const response = await fetch(`/api/users/${id}`);
    user.value = await response.json();
  } catch (error) {
    console.error('Failed to fetch user:', error);
    user.value = null;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchUser(props.userId);
});

watch(() => props.userId, (newId) => {
  fetchUser(newId);
});
</script>

Next.js把React扩展成了全栈框架，原生支持服务器端渲染（SSR）和静态站点生成（SSG），这对SEO和加载速度的改善相当显著。它与Vercel的无缝集成还支持增量静态再生（ISR），意味着你可以动态更新静态页面，而不需要全站重建。

1.1.3 Next.js 代码示例

// pages/users/[id].js - Next.js 动态路由
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

export default function UserPage({ user: initialUser }) {
  const router = useRouter();
  const [user, setUser] = useState(initialUser);

  // 客户端数据更新
  useEffect(() => {
    if (router.query.refresh) {
      fetch(`/api/users/${router.query.id}`)
        .then(res => res.json())
        .then(setUser);
    }
  }, [router.query]);

  if (router.isFallback) {
    return 
Loading...
;
  }

  return (
    <>
      
        
        
      
      

        
{user.name}
        
邮箱: {user.email}
        
注册时间: {new Date(user.createdAt).toLocaleDateString()}
        
      
    
  );
}

// 静态站点生成 (SSG)
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();
  const paths = users.map((user) => ({
    params: { id: user.id.toString() }
  }));
  return {
    paths,
    fallback: 'blocking' // ISR 支持
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();
  return {
    props: { user },
    revalidate: 60 // 60秒后重新验证
  };
}

1.1.4 前端框架性能对比表

1.2 补充前端工具：SolidJS

除了主流框架，SolidJS也值得关注。它强调的是细粒度响应式更新，性能表现优于许多传统框架。编译时优化能显著减少运行时开销，适合对性能有极致要求的场景。

// SolidJS 响应式示例
import { createSignal, createEffect } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  const [doubleCount, setDoubleCount] = createSignal(0);

  // 细粒度响应式更新
  createEffect(() => {
    setDoubleCount(count() * 2);
  });

  return (
    

      
计数: {count()}
      
双倍: {doubleCount()}
       setCount(count() + 1)}>增加
    
  );
}

2. 后端开发工具

后端工具负责服务器逻辑、数据处理和API构建，这是确保应用安全性和可扩展性的关键层。

2.1 Express.js vs Django vs Lara vel 架构对比

Express.js作为Node.js的轻量框架，凭借简洁的路由和中间件系统受到广泛欢迎，尤其适合快速原型开发。

2.1.1 Express.js 代码示例

// Express.js RESTful API 示例
const express = require('express');
const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(express.json());

// 用户模型
const UserSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  name: String,
  createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', UserSchema);

// 身份验证中间件
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) {
    return res.status(401).json({ error: '访问令牌是必需的' });
  }
  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.status(403).json({ error: '无效令牌' });
    req.user = user;
    next();
  });
};

// 用户注册
app.post('/api/auth/register', async (req, res) => {
  try {
    const { email, password, name } = req.body;
    // 检查用户是否已存在
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.status(400).json({ error: '用户已存在' });
    }
    // 加密密码
    const saltRounds = 10;
    const hashedPassword = await bcrypt.hash(password, saltRounds);
    // 创建用户
    const user = new User({
      email,
      password: hashedPassword,
      name
    });
    await user.sa ve();
    // 生成JWT令牌
    const token = jwt.sign(
      { userId: user._id, email: user.email },
      process.env.JWT_SECRET,
      { expiresIn: '24h' }
    );
    res.status(201).json({
      message: '用户创建成功',
      token,
      user: {
        id: user._id,
        email: user.email,
        name: user.name
      }
    });
  } catch (error) {
    res.status(500).json({ error: '服务器错误' });
  }
});

// 获取用户信息
app.get('/api/users/profile', authenticateToken, async (req, res) => {
  try {
    const user = await User.findById(req.user.userId).select('-password');
    if (!user) {
      return res.status(404).json({ error: '用户不存在' });
    }
    res.json(user);
  } catch (error) {
    res.status(500).json({ error: '服务器错误' });
  }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

Django使用Python构建，内置ORM和管理员面板，适合复杂应用如内容管理系统。安全方面，它提供了CSRF保护、SQL注入防御等特性，在金融或医疗类项目中很常见。

2.1.2 Django 代码示例

# Django REST Framework API 示例
# models.py
from django.db import models
from django.contrib.auth.models import AbstractUser
from django.utils import timezone

class CustomUser(AbstractUser):
    email = models.EmailField(unique=True)
    a vatar = models.URLField(blank=True, null=True)
    created_at = models.DateTimeField(default=timezone.now)
    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = ['username']

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    author = models.ForeignKey(CustomUser, on_delete=models.CASCADE, related_name='posts')
    created_at = models.DateTimeField(default=timezone.now)
    updated_at = models.DateTimeField(auto_now=True)
    class Meta:
        ordering = ['-created_at']

# serializers.py
from rest_framework import serializers
from .models import CustomUser, Post

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = CustomUser
        fields = ['id', 'username', 'email', 'a vatar', 'created_at']
        read_only_fields = ['id', 'created_at']

class PostSerializer(serializers.ModelSerializer):
    author = UserSerializer(read_only=True)
    class Meta:
        model = Post
        fields = ['id', 'title', 'content', 'author', 'created_at', 'updated_at']
        read_only_fields = ['id', 'created_at', 'updated_at']

# views.py
from rest_framework import generics, permissions, status
from rest_framework.response import Response
from rest_framework.decorators import api_view, permission_classes
from django.contrib.auth import authenticate
from rest_framework_simplejwt.tokens import RefreshToken
from .models import CustomUser, Post
from .serializers import UserSerializer, PostSerializer

class PostListCreateView(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer
    permission_classes = [permissions.IsAuthenticatedOrReadOnly]
    def perform_create(self, serializer):
        serializer.sa ve(author=self.request.user)

class PostDetailView(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer
    permission_classes = [permissions.IsAuthenticatedOrReadOnly]
    def get_permissions(self):
        if self.request.method in ['PUT', 'PATCH', 'DELETE']:
            return [permissions.IsAuthenticated()]
        return [permissions.AllowAny()]

@api_view(['POST'])
@permission_classes([permissions.AllowAny])
def register_user(request):
    serializer = UserSerializer(data=request.data)
    if serializer.is_valid():
        user = serializer.sa ve()
        user.set_password(request.data.get('password'))
        user.sa ve()
        refresh = RefreshToken.for_user(user)
        return Response({
            'message': '用户注册成功',
            'refresh': str(refresh),
            'access': str(refresh.access_token),
            'user': UserSerializer(user).data
        }, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

# urls.py
from django.urls import path
from . import views
urlpatterns = [
    path('api/auth/register/', views.register_user, name='register'),
    path('api/posts/', views.PostListCreateView.as_view(), name='post-list-create'),
    path('api/posts//', views.PostDetailView.as_view(), name='post-detail'),
]

2.1.3 Supabase 后端即服务示例

Supabase作为后端即服务（BaaS）平台，提供了PostgreSQL数据库和实时API。它的实时订阅基于WebSockets，能实现即时数据同步，比如聊天应用。用起来比从头搭建后端要省事得多。

// Supabase 集成示例
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

// 用户认证
export const authService = {
  async signUp(email, password, userData) {
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: userData
      }
    })
    return { data, error }
  },
  async signIn(email, password) {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password
    })
    return { data, error }
  },
  async signInWithGithub() {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'github',
      options: {
        redirectTo: `${window.location.origin}/auth/callback`
      }
    })
    return { data, error }
  }
}

// 数据库操作
export const postService = {
  async getPosts() {
    const { data, error } = await supabase
      .from('posts')
      .select(`
        *,
        author:profiles(id, username, a vatar_url)
      `)
      .order('created_at', { ascending: false })
    return { data, error }
  },
  async createPost(postData) {
    const { data: { user } } = await supabase.auth.getUser()
    const { data, error } = await supabase
      .from('posts')
      .insert([{
        ...postData,
        author_id: user.id
      }])
      .select()
    return { data, error }
  },
  subscribeToUpdates(callback) {
    return supabase
      .channel('posts')
      .on('postgres_changes',
        { event: '*', schema: 'public', table: 'posts' },
        callback
      )
      .subscribe()
  }
}

// 文件存储
export const storageService = {
  async uploadFile(bucket, file, path) {
    const { data, error } = await supabase.storage
      .from(bucket)
      .upload(path, file, {
        cacheControl: '3600',
        upsert: false
      })
    return { data, error }
  },
  getPublicUrl(bucket, path) {
    const { data } = supabase.storage
      .from(bucket)
      .getPublicUrl(path)
    return data.publicUrl
  }
}

2.1.4 后端框架对比表

3. 数据库工具

数据库是Web应用的核心存储层。选择关系型还是非关系型，很大程度上取决于你的数据结构特点和查询需求。

3.1 关系型 vs 非关系型数据库选择指南

PostgreSQL作为关系型数据库的代表，支持JSON存储和全文搜索等高级功能，适合处理复杂查询。

3.1.1 PostgreSQL 高级功能示例

-- PostgreSQL JSON 操作和全文搜索
CREATE TABLE articles (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    metadata JSONB,
    tags TEXT[],
    search_vector tsvector,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 创建全文搜索索引
CREATE INDEX articles_search_idx ON articles USING GIN(search_vector);
CREATE INDEX articles_metadata_idx ON articles USING GIN(metadata);

-- 触发器自动更新搜索向量
CREATE OR REPLACE FUNCTION update_search_vector()
RETURNS TRIGGER AS $$
BEGIN
    NEW.search_vector := to_tsvector('chinese', COALESCE(NEW.title, '') || ' ' || COALESCE(NEW.content, ''));
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER articles_search_update
    BEFORE INSERT OR UPDATE ON articles
    FOR EACH ROW EXECUTE FUNCTION update_search_vector();

-- 复杂查询示例
-- 1. JSON 查询
INSERT INTO articles (title, content, metadata, tags)
VALUES('PostgreSQL教程', '学习PostgreSQL数据库', '{"author": "张三", "difficulty": "中级", "views": 1500}', ARRAY['数据库', '教程', 'PostgreSQL']);

-- 查询特定作者的文章
SELECT title, metadata->>'author' as author
FROM articles
WHERE metadata->>'author' = '张三';

-- 查询浏览量大于1000的文章
SELECT title, metadata->>'views' as views
FROM articles
WHERE (metadata->>'views')::int > 1000;

-- 2. 全文搜索
SELECT title, ts_rank(search_vector, query) as rank
FROM articles, to_tsquery('chinese', '数据库 & 教程') query
WHERE search_vector @@ query
ORDER BY rank DESC;

-- 3. 数组操作
SELECT title FROM articles WHERE 'PostgreSQL' = ANY(tags);

-- 4. 窗口函数和 CTE
WITH article_stats AS (
    SELECT
        title,
        (metadata->>'views')::int as views,
        ROW_NUMBER() OVER (ORDER BY (metadata->>'views')::int DESC) as rank,
        LAG((metadata->>'views')::int) OVER (ORDER BY (metadata->>'views')::int DESC) as prev_views
    FROM articles
    WHERE metadata->>'views' IS NOT NULL
)
SELECT title, views, rank,
       CASE
           WHEN prev_views IS NULL THEN '最高'
           ELSE ((prev_views - views)::float / prev_views * 100)::decimal(5,2) || '%'
       END as diff_from_prev
FROM article_stats
WHERE rank <= 10;

MongoDB则是非关系型NoSQL数据库的代表，以文档形式存储数据，schema灵活，适合社交平台这类场景。它的聚合管道功能很强，能完成复杂的数据转换和分析。

3.1.2 MongoDB 聚合管道示例

// MongoDB 聚合管道和复杂查询
const { MongoClient } = require('mongodb');
const client = new MongoClient('mongodb://localhost:27017');
const db = client.db('social_platform');

// 数据库操作服务
class SocialPlatformService {
  constructor() {
    this.users = db.collection('users');
    this.posts = db.collection('posts');
  }

  // 1. 用户推荐算法：基于共同关注者推荐
  async getUserRecommendations(userId, limit = 5) {
    return await this.users.aggregate([
      { $match: { _id: new ObjectId(userId) } },
      {
        $lookup: {
          from: 'users',
          localField: 'following',
          foreignField: '_id',
          as: 'following_users'
        }
      },
      { $unwind: '$following_users' },
      {
        $lookup: {
          from: 'users',
          localField: 'following_users.following',
          foreignField: '_id',
          as: 'potential_follows'
        }
      },
      { $unwind: '$potential_follows' },
      {
        $match: {
          'potential_follows._id': { $ne: new ObjectId(userId) },
          'potential_follows._id': { $nin: '$following' }
        }
      },
      {
        $group: {
          _id: '$potential_follows._id',
          user: { $first: '$potential_follows' },
          mutual_connections: { $sum: 1 }
        }
      },
      { $sort: { mutual_connections: -1 } },
      { $limit: limit },
      {
        $project: {
          _id: 1,
          username: '$user.username',
          profile: '$user.profile',
          mutual_connections: 1
        }
      }
    ]).toArray();
  }

  // 2. 热门文章分析：多维度排序
  async getTrendingPosts(timeframe = 24) {
    const cutoffDate = new Date(Date.now() - timeframe * 60 * 60 * 1000);
    return await this.posts.aggregate([
      {
        $match: {
          created_at: { $gte: cutoffDate }
        }
      },
      {
        $addFields: {
          like_count: { $size: '$likes' },
          comment_count: { $size: '$comments' },
          engagement_score: {
            $add: [
              { $multiply: [{ $size: '$likes' }, 3] },
              { $multiply: [{ $size: '$comments' }, 5] },
              { $multiply: ['$views', 0.1] }
            ]
          }
        }
      },
      {
        $lookup: {
          from: 'users',
          localField: 'author_id',
          foreignField: '_id',
          as: 'author'
        }
      },
      { $unwind: '$author' },
      {
        $project: {
          title: 1,
          content: { $substr: ['$content', 0, 150] },
          author: { username: '$author.username', profile: '$author.profile' },
          tags: 1,
          like_count: 1,
          comment_count: 1,
          views: 1,
          engagement_score: 1,
          created_at: 1
        }
      },
      { $sort: { engagement_score: -1 } },
      { $limit: 20 }
    ]).toArray();
  }

  // 更多聚合操作...
}

3.1.3 数据库选择决策树

数据一致性要求高？
├─ 是 → 关系型数据库
│   ├─ 复杂查询需求？
│   │   ├─ 是 → PostgreSQL (JSON支持 + 高级功能)
│   │   └─ 否 → MySQL (性能优化 + 简单配置)
│   └─ 企业级需求？
│       ├─ 是 → Oracle/SQL Server
│       └─ 否 → SQLite (轻量级应用)
└─ 否 → 文档型数据库
    ├─ 水平扩展需求？
    │   ├─ 是 → MongoDB (分片支持)
    │   └─ 否 → CouchDB (同步支持)
    └─ 实时性要求？
        ├─ 是 → Redis (内存数据库)
        └─ 否 → 文件存储

3.1.4 数据库性能对比

4. Runtime环境工具

Runtime环境提供应用运行的底座，涵盖服务器管理和部署平台。现在主流的选项已经从前几年的传统服务器托管转向了Serverless和Edge Computing。

4.1 Vercel vs Cloudflare vs AWS 部署对比

Vercel专注前端框架尤其是Next.js的部署，全局CDN和自动缩放机制做得相当成熟。

4.1.1 Vercel 部署配置示例

// vercel.json - Vercel 配置文件
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/$1" },
    { "src": "/(.*)", "dest": "/$1" }
  ],
  "env": {
    "DATABASE_URL": "@database_url",
    "JWT_SECRET": "@jwt_secret"
  },
  "functions": {
    "pages/api/users/[id].js": {
      "maxDuration": 10
    }
  },
  "regions": ["hkg1", "nrt1"],
  "cleanUrls": true,
  "trailingSlash": false,
  "rewrites": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*" }
  ],
  "redirects": [
    { "source": "/old-home", "destination": "/", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" }
      ]
    }
  ]
}

// pages/api/edge-function.js - Vercel Edge Function
export const config = {
  runtime: 'edge',
}

export default async function handler(request) {
  const { searchParams } = new URL(request.url)
  const userId = searchParams.get('userId')

  try {
    const userData = await kv.get(`user:${userId}`)
    if (!userData) {
      return new Response(
        JSON.stringify({ error: 'User not found' }),
        {
          status: 404,
          headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' }
        }
      )
    }
    const response = {
      user: userData,
      region: request.headers.get('x-vercel-ip-country') || 'unknown',
      timestamp: new Date().toISOString(),
      edge: true
    }
    return new Response(
      JSON.stringify(response),
      {
        status: 200,
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 'public, max-age=60',
          'X-Powered-By': 'Vercel Edge Functions'
        }
      }
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: 'Internal server error' }),
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    )
  }
}

Cloudflare Workers则把计算推到了边缘节点，冷启动时间极短（通常不到1ms），非常适合全球部署的低延迟场景。它还集成了KV存储，可以实现分布式缓存。

4.1.2 Cloudflare Workers 示例

// Cloudflare Workers 高级功能示例
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const path = url.pathname

  switch (true) {
    case path.startsWith('/api/cache'):
      return handleCacheAPI(request)
    case path.startsWith('/api/ai'):
      return handleAIRequest(request)
    case path.startsWith('/api/storage'):
      return handleStorageRequest(request)
    case path.startsWith('/api/analytics'):
      return handleAnalytics(request)
    default:
      return handleStaticAssets(request)
  }
}

// 1. KV缓存处理
async function handleCacheAPI(request) {
  const url = new URL(request.url)
  const key = url.searchParams.get('key')

  if (request.method === 'GET') {
    const cachedData = await KV_NAMESPACE.get(key, { type: 'json' })
    if (cachedData) {
      return new Response(JSON.stringify({
        data: cachedData,
        cached: true,
        timestamp: new Date().toISOString()
      }), {
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 'public, max-age=300',
          'X-Cache': 'HIT'
        }
      })
    }
    const sourceData = await fetchFromSource(key)
    await KV_NAMESPACE.put(key, JSON.stringify(sourceData), {
      expirationTtl: 3600
    })
    return new Response(JSON.stringify({
      data: sourceData,
      cached: false,
      timestamp: new Date().toISOString()
    }), {
      headers: {
        'Content-Type': 'application/json',
        'X-Cache': 'MISS'
      }
    })
  }
  // 其他方法处理...
}

// 2. AI处理请求
async function handleAIRequest(request) {
  const { prompt, model = '@cf/meta/llama-2-7b-chat-int8' } = await request.json()
  try {
    const response = await AI_BINDING.run(model, {
      messages: [
        { role: "system", content: "You are a helpful assistant specialized in web development." },
        { role: "user", content: prompt }
      ]
    })
    // 记录使用情况到分析
    await recordAIUsage(request.headers.get('CF-Connecting-IP'), model, prompt.length)
    return new Response(JSON.stringify({
      response: response.response,
      model: model,
      timestamp: new Date().toISOString()
    }), {
      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }
    })
  } catch (error) {
    return new Response(JSON.stringify({
      error: 'AI processing failed',
      message: error.message
    }), { status: 500, headers: { 'Content-Type': 'application/json' } })
  }
}

// 3. R2存储处理
async function handleStorageRequest(request) {
  const url = new URL(request.url)
  const filename = url.pathname.split('/').pop()

  if (request.method === 'GET') {
    const object = await R2_BUCKET.get(filename)
    if (!object) {
      return new Response('File not found', { status: 404 })
    }
    const headers = {
      'Content-Type': object.httpMetadata?.contentType || 'application/octet-stream',
      'Content-Length': object.size.toString(),
      'ETag': object.etag,
      'Cache-Control': 'public, max-age=31536000',
    }
    return new Response(object.body, { headers })
  }
  // PUT方法处理...
}

// 4. 实时分析
async function handleAnalytics(request) {
  const clientIP = request.headers.get('CF-Connecting-IP')
  const country = request.headers.get('CF-IPCountry')
  const colo = request.headers.get('CF-Colo')
  const analyticsData = {
    timestamp: Date.now(),
    ip: clientIP,
    country: country,
    datacenter: colo,
    userAgent: request.headers.get('User-Agent'),
    url: request.url,
    method: request.method,
  }
  await sendAnalytics(analyticsData)
  return new Response(JSON.stringify({
    recorded: true,
    location: { country: country, datacenter: colo }
  }))
}

// 辅助函数
async function fetchFromSource(key) {
  const response = await fetch(`https://api.example.com/data/${key}`)
  return await response.json()
}

async function recordAIUsage(ip, model, promptLength) {
  const usageKey = `ai_usage:${new Date().toISOString().split('T')[0]}`
  const existing = await KV_NAMESPACE.get(usageKey, { type: 'json' }) || {}
  existing[ip] = (existing[ip] || 0) + 1
  existing.total_requests = (existing.total_requests || 0) + 1
  existing.total_prompt_chars = (existing.total_prompt_chars || 0) + promptLength
  await KV_NAMESPACE.put(usageKey, JSON.stringify(existing))
}

async function sendAnalytics(data) {
  await KV_NAMESPACE.put(`analytics:${data.timestamp}`, JSON.stringify(data))
}

4.1.3 Runtime环境对比表

来源：互联网