使用 CloudFlare D1 在Nuxt中自定义评论功能

          import type { D1Database } from '@cloudflare/workers-types'
import type { Comment } from './db/schema'
import { eq } from 'drizzle-orm'
import { Hono } from 'hono'
import { createDb } from './db'
import { comments } from './db/schema'

const app = new Hono<{ Bindings: { DB: D1Database } }>()

interface CreateCommentBody {
  content: string
  author: string
  email: string
  postId: string
  parentId?: number
}

app.get('/', (c) => {
  return c.json({ message: 'Hello World' })
})

// 创建评论
app.post('/comments', async (c) => {
  const db = createDb(c.env.DB)
  const body = await c.req.json<CreateCommentBody>()

  const ip = c.req.header('cf-connecting-ip')
    || c.req.header('x-forwarded-for')
    || 'unknown'

  const newComment = await db.insert(comments).values({
    content: body.content,
    author: body.author,
    email: body.email,
    postId: body.postId,
    ip,
    parentId: body.parentId || null,
  }).returning()

  return c.json(newComment[0])
})

interface CommentWithReplies extends Comment {
  replies: CommentWithReplies[]
}

// 获取评论列表（树状结构）
app.get('/comments', async (c) => {
  const db = createDb(c.env.DB)

  const allComments = await db
    .select()
    .from(comments)
    .orderBy(comments.createdAt)

  // 构建评论树
  const commentMap = new Map<number, CommentWithReplies>()
  const rootComments: CommentWithReplies[] = []

  allComments.forEach((comment) => {
    commentMap.set(comment.id, { ...comment, replies: [] })
  })

  allComments.forEach((comment) => {
    if (comment.parentId) {
      const parentComment = commentMap.get(comment.parentId)
      if (parentComment) {
        parentComment.replies.push(commentMap.get(comment.id)!)
      }
    }
    else {
      rootComments.push(commentMap.get(comment.id)!)
    }
  })

  return c.json(rootComments)
})

// 更新评论
app.patch('/comments/:id', async (c) => {
  const db = createDb(c.env.DB)
  const id = Number(c.req.param('id'))
  const { content } = await c.req.json<{ content: string }>()

  const updatedComment = await db.update(comments)
    .set({
      content,
      updatedAt: new Date().toISOString(),
    })
    .where(eq(comments.id, id))
    .returning()

  return c.json((updatedComment)[0])
})

// 删除评论
app.delete('/comments/:id', async (c) => {
  const db = createDb(c.env.DB)
  const id = Number(c.req.param('id'))

  await db.delete(comments)
    .where(eq(comments.id, id))

  return c.json({ success: true })
})

// 获取特定文章的评论列表
app.get('/posts/:postId/comments', async (c) => {
  const db = createDb(c.env.DB)
  const postId = c.req.param('postId')

  const allComments = await db
    .select()
    .from(comments)
    .where(eq(comments.postId, postId))
    .orderBy(comments.createdAt)

  // 构建评论树
  const commentMap = new Map<number, CommentWithReplies>()
  const rootComments: CommentWithReplies[] = []

  allComments.forEach((comment) => {
    commentMap.set(comment.id, { ...comment, replies: [] })
  })

  allComments.forEach((comment) => {
    if (comment.parentId) {
      const parentComment = commentMap.get(comment.parentId)
      if (parentComment) {
        parentComment.replies.push(commentMap.get(comment.id)!)
      }
    }
    else {
      rootComments.push(commentMap.get(comment.id)!)
    }
  })

  return c.json(rootComments)
})

export default app

        

          import type { AnySQLiteColumn } from 'drizzle-orm/sqlite-core'
import { sql } from 'drizzle-orm'
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'

// 定义表结构
export const comments = sqliteTable('comments', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  content: text('content').notNull(),
  author: text('author').notNull(),
  email: text('email').notNull(),
  ip: text('ip').notNull(),
  postId: text('post_id').notNull(),
  parentId: integer('parent_id').references((): AnySQLiteColumn => comments.id),
  likes: integer('likes').default(0).notNull(),
  createdAt: text('created_at')
    .default(sql`CURRENT_TIMESTAMP`)
    .notNull(),
  updatedAt: text('updated_at')
    .default(sql`CURRENT_TIMESTAMP`)
    .notNull(),
})

// 导出类型
export type Comment = typeof comments.$inferSelect
export type NewComment = typeof comments.$inferInsert

        

          import type { D1Database } from '@cloudflare/workers-types'
import { drizzle } from 'drizzle-orm/d1'
import * as schema from './schema'

export function createDb(d1: D1Database) {
  return drizzle(d1, { schema })
}

export type DbType = ReturnType<typeof createDb>

        

          import type { Config } from 'drizzle-kit'

export default {
  schema: './cloudflare-d1/db/schema.ts',
  out: './migrations',
  driver: 'd1-http',
  dialect: 'sqlite',
} satisfies Config

        

          import type { D1Database } from '@cloudflare/workers-types'

interface Env {
  DB: D1Database
}

        

          import { z } from 'zod'

// 创建评论的基础验证模式
const CommentBaseSchema = z.object({
  content: z.string()
    .min(1, '评论内容不能为空')
    .max(1000, '评论内容不能超过1000字'),
  author: z.string()
    .min(2, '昵称至少需要2个字符')
    .max(50, '昵称不能超过50个字符'),
  email: z.string()
    .email('请输入有效的邮箱地址'),
  postId: z.string()
    .min(1, '文章ID不能为空'),
})

        

          interface ResponseBody<T = any> {
  data: T
  code: number
  message: string
}

        

          import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  const config = useRuntimeConfig()
  const baseURL = config.public.BASE_URL

  return useFetch(`${baseURL}${url}`, {
    ...options,
    $fetch: useNuxtApp().$api as typeof $fetch,
  })
}

        

          export interface ApiResponse<T = any> {
  data: T
  code: number
  message: string
}

        

          import type { CommentResponseDto, CreateCommentDto } from '~~/cloudflare-d1/db/dto/comment.dto'
import type { ApiResponse } from '~/service/request/response'
import { useAPI } from '~/service/request'

/**
 * 1. 获取评论列表
 * @param postId 文章ID
 */
export function getCommentsByPostId(postId: string) {
  return useAPI<ApiResponse<CommentResponseDto>>(`/posts/getCommentsByPostId/${postId}`, {
    method: 'GET',
    query: { postId },
  })
}

/**
 * 2. 创建评论
 * @param data 评论数据
 */
export function createCommentApi(data: CreateCommentDto) {
  return useAPI<ApiResponse<CommentResponseDto>>('/comments', {
    method: 'POST',
    body: data,
  })
}

        

          import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  const config = useRuntimeConfig()
  const baseURL = config.public.NUXT_PUBLIC_BASE_URL
  const nuxtApp = useNuxtApp()
  
  return nuxtApp.$api<T>(`${baseURL}${url}`, options as any)
}

        

          /* eslint-disable unused-imports/no-unused-vars */
export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    onRequest({ request, options }) {
      options.headers.set('Custom', '666')
    },

    async onResponse({ request, response, options }) {
      // 在这里添加您的响应拦截逻辑
    },

    async onResponseError({ request, response, options }) {
      if (response.status === 401) {
        // 处理认证错误
      }
    },
  })

  return {
    provide: {
      api,
    },
  }
})

        

          export default defineNuxtConfig({
  plugins: [
    { src: '~~/plugins/api.client.ts', mode: 'client' },
  ],
})

        

          import type { Hono } from 'hono'
import { cors } from 'hono/cors'

export function routeConfig(app: Hono<any>) {
  app.use('/*', cors({
    origin: '*', // 或者指定具体域名
    allowHeaders: ['Custom', 'Content-Type'], // 允许的请求头
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'], // 允许的请求方法
    exposeHeaders: ['Content-Length', 'X-Requested-With'],
    maxAge: 86400,
    credentials: true,
  }))
}

        

          import { routeConfig } from './route.config'

const app = new Hono<{ Bindings: { DB: D1Database } }>()

/** 路由配置 */
routeConfig(app)

        

          import { getCommentsByPostId } from '~/service/api/comments'

const router = useRouter()

getCommentsByPostId('post-1').then((res) => {
  console.log(res, 'res')
})