用 Workers + D1 + R2
做一个博客系统

// ─── 工具函数：生成 JSON 响应（相当于 ResponseEntity）
function json(data, status = 200) {
  return new Response(JSON.stringify(data), {
    status,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',   // 允许跨域（Vue 前端需要）
    }
  });
}

// ─── 主入口（相当于 DispatcherServlet）
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const path = url.pathname;
    const method = request.method;

    // 处理 OPTIONS 预检请求（跨域必须）
    if (method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        }
      });
    }

    // ─── 路由分发（相当于 @RequestMapping）
    if (path === '/api/posts' && method === 'GET')    return getPosts(request, env);
    if (path === '/api/posts' && method === 'POST')   return createPost(request, env);
    if (path.startsWith('/api/posts/') && method === 'GET')    return getPost(request, env, path);
    if (path.startsWith('/api/posts/') && method === 'PUT')    return updatePost(request, env, path);
    if (path.startsWith('/api/posts/') && method === 'DELETE') return deletePost(request, env, path);
    if (path === '/api/upload' && method === 'POST')  return uploadImage(request, env);

    return json({ error: 'Not Found' }, 404);
  }
};

// ─── GET /api/posts ─── 获取文章列表
async function getPosts(request, env) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get('page')) || 1;
  const pageSize = 10;
  const offset = (page - 1) * pageSize;

  // SQL 查询（相当于 Mapper.selectPage()）
  const { results } = await env.DB
    .prepare('SELECT id, title, author, cover_url, created_at FROM posts ORDER BY created_at DESC LIMIT ? OFFSET ?')
    .bind(pageSize, offset)
    .all();

  const total = await env.DB
    .prepare('SELECT COUNT(*) as count FROM posts')
    .first();

  return json({ data: results, total: total.count, page });
}

// ─── GET /api/posts/:id ─── 获取单篇文章
async function getPost(request, env, path) {
  const id = path.split('/').pop();
  const post = await env.DB
    .prepare('SELECT * FROM posts WHERE id = ?')
    .bind(id)
    .first();

  if (!post) return json({ error: '文章不存在' }, 404);
  return json(post);
}

// ─── POST /api/posts ─── 创建文章
async function createPost(request, env) {
  // 简单的 Token 鉴权（生产环境请换 JWT）
  const token = request.headers.get('Authorization');
  if (token !== 'Bearer my-secret-token') {
    return json({ error: '未授权' }, 401);
  }

  const body = await request.json();
  const { title, content, author, cover_url } = body;

  if (!title || !content) {
    return json({ error: '标题和内容不能为空' }, 400);
  }

  const result = await env.DB
    .prepare('INSERT INTO posts (title, content, author, cover_url) VALUES (?, ?, ?, ?)')
    .bind(title, content, author || '匿名', cover_url || null)
    .run();

  return json({ id: result.meta.last_row_id, message: '发布成功' }, 201);
}

// ─── PUT /api/posts/:id ─── 更新文章
async function updatePost(request, env, path) {
  const id = path.split('/').pop();
  const body = await request.json();
  const { title, content, cover_url } = body;

  await env.DB
    .prepare('UPDATE posts SET title=?, content=?, cover_url=?, updated_at=datetime("now") WHERE id=?')
    .bind(title, content, cover_url, id)
    .run();

  return json({ message: '更新成功' });
}

// ─── DELETE /api/posts/:id ─── 删除文章
async function deletePost(request, env, path) {
  const id = path.split('/').pop();
  await env.DB
    .prepare('DELETE FROM posts WHERE id = ?')
    .bind(id)
    .run();
  return json({ message: '删除成功' });
}

// ─── POST /api/upload ─── 上传图片到 R2
async function uploadImage(request, env) {
  const formData = await request.formData();
  const file = formData.get('file');

  if (!file) return json({ error: '没有文件' }, 400);

  const filename = `covers/${Date.now()}-${file.name}`;
  await env.IMAGES.put(filename, file.stream(), {
    httpMetadata: { contentType: file.type }
  });

  // 返回公开访问 URL（需要 R2 开启公开访问，Step 4 有说明）
  const publicUrl = `https://images.你的域名.com/${filename}`;
  return json({ url: publicUrl });
}

<script setup>
import { ref } from 'vue'
import { uploadImage, createPost } from '@/api/blog'

const form = ref({ title: '', content: '', cover_url: '' })
const uploading = ref(false)

// 选择图片后自动上传
async function onFileChange(e) {
  const file = e.target.files[0]
  if (!file) return

  uploading.value = true
  const { data } = await uploadImage(file)
  form.value.cover_url = data.url   // 保存 R2 返回的图片 URL
  uploading.value = false
}

async function submit() {
  await createPost(form.value, 'my-secret-token')
  // 跳转到列表页...
}
</script>

<template>
  <input type="text" v-model="form.title" placeholder="文章标题" />
  <textarea v-model="form.content" placeholder="文章内容"></textarea>

  <!-- 图片上传 -->
  <input type="file" accept="image/*" @change="onFileChange" />
  <span v-if="uploading">上传中...</span>
  <img v-if="form.cover_url" :src="form.cover_url" style="max-width:200px" />

  <button @click="submit">发布文章</button>
</template>