Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 4919bc6194 添加后端todo-list

2025-10-21 01:44:01 +08:00

17 KiB

Raw Blame History

🎯 网站现代化重构方案

目标：将静态 Astro 网站升级为具有评论系统、数据统计、用户交互的动态网站

📊 方案对比

方案 A：Astro + Node.js 后端（推荐）⭐⭐⭐⭐⭐

最适合当前项目！

技术栈

前端：Astro + React/Vue 组件（动态部分）
后端：Node.js + Express/Fastify
数据库：PostgreSQL / MongoDB
缓存：Redis
API：REST / GraphQL
部署：Docker + PM2

优势

✅ 前后端分离，灵活可维护 ✅ Astro 保留静态生成的性能优势 ✅ 支持实时数据更新 ✅ 可扩展性强 ✅ 成熟的技术生态

架构图

┌─────────────────────────────────────┐
│     用户浏览器 (静态部分)             │
├─────────────────────────────────────┤
│  Astro 静态生成                       │
│  - 首页、报告页面                     │
│  - SEO 优化                           │
└────────────────┬────────────────────┘
                 │
        ┌────────▼────────┐
        │  动态组件加载    │
        │  (React/Vue)     │
        ├─────────────────┤
        │ - 评论系统      │
        │ - 数据统计      │
        │ - 用户互动      │
        └────────┬────────┘
                 │ API 调用
        ┌────────▼────────┐
        │  Node.js 后端    │
        ├─────────────────┤
        │ - 用户管理      │
        │ - 评论处理      │
        │ - 数据分析      │
        │ - 权限控制      │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  数据库          │
        ├─────────────────┤
        │ - PostgreSQL    │
        │ - Redis Cache   │
        └─────────────────┘

方案 B：Astro + 第三方服务（快速启动）⭐⭐⭐⭐

无需后端维护，快速上线

技术栈

前端：Astro（保持不变）
评论：Disqus / Giscus / Utterances
数据统计：Google Analytics / Plausible
用户系统：Supabase / Firebase
内容管理：Contentful / Sanity
部署：Vercel / Netlify

优势

✅ 零后端维护 ✅ 快速集成 ✅ 自动扩展 ✅ 成本低 ✅ 部署简单

缺点

❌ 功能受限 ❌ 数据隐私性 ❌ 成本可能增加

方案 C：Astro + Hybrid Rendering（终极方案）⭐⭐⭐⭐⭐

Astro 4.0+ 的新特性：静态和动态混合

技术栈

Astro Hybrid SSR：部分页面服务端渲染
后端：Node.js
数据库：PostgreSQL
实时：WebSocket
部署：自托管或 Vercel

优势

✅ 性能最优 ✅ SEO 完美 ✅ 实时交互 ✅ 完全控制

🏗️ 推荐方案详细实现

方案 A：完整实现步骤

第一阶段：前端重构（1-2周）

1. 更新 Astro 配置支持混合渲染

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import node from '@astrojs/node';

export default defineConfig({
  integrations: [
    react(),
    tailwind(),
  ],
  // 启用混合渲染
  output: 'hybrid',
  adapter: node({
    mode: 'standalone'
  }),
  vite: {
    define: {
      'process.env.NODE_ENV': JSON.stringify('production')
    }
  }
});

2. 创建动态 React 组件

// src/components/comments/CommentSection.tsx
import React, { useState, useEffect } from 'react';
import type { Comment } from '../../types/comment';

export default function CommentSection({ reportId }: { reportId: string }) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [newComment, setNewComment] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchComments();
  }, [reportId]);

  const fetchComments = async () => {
    try {
      const response = await fetch(`/api/comments?reportId=${reportId}`);
      const data = await response.json();
      setComments(data);
    } catch (error) {
      console.error('Failed to fetch comments:', error);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await fetch('/api/comments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          reportId,
          content: newComment,
          author: 'Anonymous', // 需要用户系统
        })
      });
      const comment = await response.json();
      setComments([...comments, comment]);
      setNewComment('');
    } catch (error) {
      console.error('Failed to post comment:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mt-8 p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-4">评论 ({comments.length})</h2>
      
      {/* 评论列表 */}
      <div className="space-y-4 mb-6">
        {comments.map((comment) => (
          <div key={comment.id} className="p-4 bg-gray-50 rounded-lg">
            <div className="flex justify-between items-start">
              <strong className="text-gray-800">{comment.author}</strong>
              <time className="text-sm text-gray-500">
                {new Date(comment.createdAt).toLocaleDateString('zh-CN')}
              </time>
            </div>
            <p className="text-gray-600 mt-2">{comment.content}</p>
          </div>
        ))}
      </div>

      {/* 评论表单 */}
      <form onSubmit={handleSubmit} className="pt-6 border-t">
        <textarea
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="分享你的想法..."
          className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          rows={4}
          required
        />
        <button
          type="submit"
          disabled={loading}
          className="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {loading ? '发布中...' : '发布评论'}
        </button>
      </form>
    </div>
  );
}

3. 创建数据统计组件

// src/components/stats/ReportStats.tsx
import React, { useState, useEffect } from 'react';
import type { ReportStats as Stats } from '../../types/stats';

export default function ReportStats({ reportId }: { reportId: string }) {
  const [stats, setStats] = useState<Stats | null>(null);

  useEffect(() => {
    fetch(`/api/stats/${reportId}`)
      .then(r => r.json())
      .then(setStats);
  }, [reportId]);

  if (!stats) return <div>加载中...</div>;

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg">
      <div className="text-center">
        <div className="text-3xl font-bold text-blue-600">{stats.views}</div>
        <div className="text-sm text-gray-600">浏览量</div>
      </div>
      <div className="text-center">
        <div className="text-3xl font-bold text-green-600">{stats.comments}</div>
        <div className="text-sm text-gray-600">评论数</div>
      </div>
      <div className="text-center">
        <div className="text-3xl font-bold text-yellow-600">{stats.likes}</div>
        <div className="text-sm text-gray-600">点赞数</div>
      </div>
      <div className="text-center">
        <div className="text-3xl font-bold text-red-600">{stats.shares}</div>
        <div className="text-sm text-gray-600">分享数</div>
      </div>
    </div>
  );
}

第二阶段：后端开发（2-3周）

1. 创建 Node.js 后端

// server/index.ts
import express from 'express';
import cors from 'cors';
import { Pool } from 'pg';

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

// 数据库连接
const pool = new Pool({
  connectionString: process.env.DATABASE_URL
});

// ==================== 评论 API ====================

// 获取评论
app.get('/api/comments', async (req, res) => {
  try {
    const { reportId } = req.query;
    const result = await pool.query(
      `SELECT * FROM comments 
       WHERE report_id = $1 
       ORDER BY created_at DESC`,
      [reportId]
    );
    res.json(result.rows);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 发布评论
app.post('/api/comments', async (req, res) => {
  try {
    const { reportId, content, author, email } = req.body;
    
    // 数据验证
    if (!content || content.length > 5000) {
      return res.status(400).json({ error: '评论内容无效' });
    }

    const result = await pool.query(
      `INSERT INTO comments (report_id, content, author, email, created_at)
       VALUES ($1, $2, $3, $4, NOW())
       RETURNING *`,
      [reportId, content, author, email]
    );
    
    res.json(result.rows[0]);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// ==================== 统计 API ====================

// 获取报告统计
app.get('/api/stats/:reportId', async (req, res) => {
  try {
    const { reportId } = req.params;
    
    const result = await pool.query(
      `SELECT 
        COALESCE(views, 0) as views,
        COALESCE(comments, 0) as comments,
        COALESCE(likes, 0) as likes,
        COALESCE(shares, 0) as shares
       FROM report_stats
       WHERE report_id = $1`,
      [reportId]
    );
    
    res.json(result.rows[0] || {
      views: 0,
      comments: 0,
      likes: 0,
      shares: 0
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 记录浏览
app.post('/api/stats/:reportId/view', async (req, res) => {
  try {
    const { reportId } = req.params;
    await pool.query(
      `INSERT INTO report_stats (report_id, views)
       VALUES ($1, 1)
       ON CONFLICT (report_id) 
       DO UPDATE SET views = views + 1`,
      [reportId]
    );
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// ==================== 点赞 API ====================

app.post('/api/stats/:reportId/like', async (req, res) => {
  try {
    const { reportId } = req.params;
    const clientId = req.body.clientId; // 使用客户端 ID 避免重复点赞
    
    const checkResult = await pool.query(
      `SELECT * FROM likes WHERE report_id = $1 AND client_id = $2`,
      [reportId, clientId]
    );

    if (checkResult.rows.length > 0) {
      return res.status(400).json({ error: '已点赞' });
    }

    await pool.query(
      `INSERT INTO likes (report_id, client_id) VALUES ($1, $2)`,
      [reportId, clientId]
    );

    await pool.query(
      `UPDATE report_stats SET likes = likes + 1 WHERE report_id = $1`,
      [reportId]
    );

    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

2. 数据库 schema

-- 评论表
CREATE TABLE comments (
  id SERIAL PRIMARY KEY,
  report_id VARCHAR(100) NOT NULL,
  author VARCHAR(100) NOT NULL,
  email VARCHAR(100),
  content TEXT NOT NULL,
  status VARCHAR(20) DEFAULT 'pending', -- pending, approved, rejected
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- 报告统计表
CREATE TABLE report_stats (
  id SERIAL PRIMARY KEY,
  report_id VARCHAR(100) UNIQUE NOT NULL,
  views INTEGER DEFAULT 0,
  comments INTEGER DEFAULT 0,
  likes INTEGER DEFAULT 0,
  shares INTEGER DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- 点赞表
CREATE TABLE likes (
  id SERIAL PRIMARY KEY,
  report_id VARCHAR(100) NOT NULL,
  client_id VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT NOW(),
  UNIQUE(report_id, client_id)
);

-- 索引优化
CREATE INDEX idx_comments_report ON comments(report_id);
CREATE INDEX idx_stats_report ON report_stats(report_id);
CREATE INDEX idx_likes_report ON likes(report_id);

第三阶段：集成与部署（1-2周）

1. 在 Astro 页面中使用新组件

---
// src/pages/report/ai-eda-paper-report/index.astro
// ... 其他导入
import CommentSection from '../../../components/comments/CommentSection';
import ReportStats from '../../../components/stats/ReportStats';

const reportId = 'ai-eda-paper-report';

// 记录浏览
if (Astro.request.method === 'GET') {
  await fetch('http://localhost:3000/api/stats/ai-eda-paper-report/view', {
    method: 'POST'
  });
}
---

<BaseLayout ...>
  <!-- 统计卡片 -->
  <ReportStats client:load reportId={reportId} />
  
  <!-- ... 其他内容 -->
  
  <!-- 评论系统 -->
  <CommentSection client:load reportId={reportId} />
</BaseLayout>

2. Docker 部署

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

3. Docker Compose

# docker-compose.yml
version: '3.8'

services:
  api:
    build: .
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://user:password@postgres:5432/jiao77
      NODE_ENV: production
    depends_on:
      - postgres
    restart: unless-stopped

  postgres:
    image: postgres:15
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: jiao77
    volumes:
      - postgres_data:/var/lib/postgresql/data
    restart: unless-stopped

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - api
    restart: unless-stopped

volumes:
  postgres_data:

📋 实施路线图

阶段	任务	时间	优先级
P0	前端：Astro 混合渲染配置	3天	🔴 必须
P0	前端：React 评论组件	4天	🔴 必须
P0	后端：Express 基础项目	2天	🔴 必须
P1	后端：评论 API	3天	🟠 重要
P1	后端：统计 API	2天	🟠 重要
P1	数据库设计与优化	2天	🟠 重要
P2	前端：统计组件	2天	🟡 可选
P2	用户认证系统	5天	🟡 可选
P3	测试与优化	3天	🟢 后续
P3	Docker 部署	2天	🟢 后续

💰 成本对比

方案 A：自托管（年成本）

VPS：¥360-1200
域名：¥69
SSL：免费 (Let's Encrypt)
总计：≈ ¥500/年

方案 B：第三方服务（年成本）

Disqus Pro：$120
Firebase：≈ $50-500
Google Analytics：免费
总计：≈ ¥1000-4000/年

方案 C：Vercel 部署（年成本）

高级计划：$20/月
数据库：¥500/年
总计：≈ ¥3000/年

🔒 安全建议

数据验证

// 使用 zod 进行数据验证
import { z } from 'zod';

const CommentSchema = z.object({
  reportId: z.string().min(1),
  content: z.string().min(1).max(5000),
  author: z.string().min(1).max(100),
  email: z.string().email().optional()
});

XSS 防护

import DOMPurify from 'isomorphic-dompurify';

const sanitized = DOMPurify.sanitize(userInput);

速率限制

import rateLimit from 'express-rate-limit';

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
});

app.post('/api/comments', limiter, (req, res) => {
  // ...
});

CORS 配置

app.use(cors({
  origin: process.env.ALLOWED_ORIGINS?.split(','),
  credentials: true
}));

📈 性能优化

查询优化
- 添加数据库索引
- 使用分页加载评论
- Redis 缓存热门数据
前端优化
- 代码分割
- 懒加载评论组件
- 虚拟滚动（大量评论）
CDN 加速
- 静态资源 CDN
- API 响应缓存

🎯 总结

最推荐方案：方案 A（Astro + Node.js + PostgreSQL）

✅ 完全控制：所有功能自主开发 ✅ 成本低：仅需便宜 VPS ✅ 性能好：Astro 保留优势 ✅ 可扩展：微服务架构 ✅ 学习价值：深入技术栈

🚀 快速开始

你想我帮你立即开始哪个方面？

立即创建后端项目 → 生成 Express 项目结构
更新 Astro 配置 → 启用混合渲染
创建 React 组件 → 评论和统计组件
设计数据库 → SQL 脚本和迁移
Docker 配置 → 完整部署方案

17 KiB Raw Blame History Unescape Escape