基于React.js、Node.js、MongoDB的博客列表与详情页跳转加载机制问询

整个交互的底层核心是前后端通过字段拆分做数据瘦身，前端通过动态路由实现不同URL的页面匹配，和Medium、Blogger的通用逻辑完全一致：

• 数据库存储单篇文章的全量数据，拆分出「列表页需要的摘要字段」和「详情页才需要的完整正文」
• 后端提供两个粒度的接口：列表接口仅返回摘要相关字段，不传输大体积的完整正文；详情接口根据URL传入的参数返回对应单篇文章的全部数据
• 前端通过动态路由匹配不同的文章路径，首页渲染摘要卡片，卡片绑定跳转链接，进入详情路由后再拉取对应文章的完整内容

最终实现效果和你提到的两张示意图完全对应：首页卡片仅展示封面、标题、摘要、阅读更多按钮，点击后跳转到独立URL的详情页展示全文。

一、MongoDB 数据结构设计 #

使用Mongoose定义文章Schema时，提前拆分好列表和详情需要的字段：

// models/Post.js
const mongoose = require('mongoose');

const PostSchema = new mongoose.Schema({
  title: { type: String, required: true },
  slug: { type: String, required: true, unique: true }, // URL友好的自定义别名，替代原生ID做路径参数
  excerpt: { type: String, required: true }, // 手动编写的精准摘要，也可以设置为自动截取正文前120字
  content: { type: String, required: true }, // 完整正文，支持Markdown/HTML格式
  coverImage: String,
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Post', PostSchema);

二、Node.js 后端接口实现 #

基于Express框架编写两个核心接口，注意接口的返回字段粒度：

// routes/posts.js
const router = require('express').Router();
const Post = require('../models/Post');

// 首页列表接口：排除完整正文字段，减少无效数据传输
router.get('/', async (req, res) => {
  try {
    // select('-content') 表示查询结果不返回content字段
    const postList = await Post.find().select('-content').sort({ createdAt: -1 });
    res.json(postList);
  } catch (err) {
    res.status(500).json({ message: '服务器处理异常' });
  }
});

// 单篇详情接口：根据slug返回文章完整数据
router.get('/:slug', async (req, res) => {
  try {
    const postDetail = await Post.findOne({ slug: req.params.slug });
    if (!postDetail) return res.status(404).json({ message: '文章不存在' });
    res.json(postDetail);
  } catch (err) {
    res.status(500).json({ message: '服务器处理异常' });
  }
});

module.exports = router;

三、React 前端实现 #

使用React Router v6配置动态路由，实现不同路径的页面匹配：

1. 路由配置 #

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import PostDetail from './pages/PostDetail';

function App() {
  return (
    <Router>
      <Routes>
        {/* 首页路由 */}
        <Route path="/" element={<Home />} />
        {/* 文章详情动态路由，:slug为可变化的路径参数 */}
        <Route path="/post/:slug" element={<PostDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 首页摘要卡片实现 #

// pages/Home.js
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // 拉取列表接口数据
    fetch('/api/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div className="post-list">
      {posts.map(post => (
        // 整个卡片绑定跳转链接，点击即跳转到对应文章的独立URL
        <Link to={`/post/${post.slug}`} className="post-card" key={post._id}>
          <img src={post.coverImage} alt={post.title} />
          <h2>{post.title}</h2>
          <p className="excerpt">{post.excerpt}</p>
          <span className="read-more">阅读更多</span>
        </Link>
      ))}
    </div>
  );
}

export default Home;

3. 文章详情页实现 #

// pages/PostDetail.js
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function PostDetail() {
  // 从当前路由中提取slug参数
  const { slug } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    // 根据slug拉取对应文章的完整内容
    fetch(`/api/posts/${slug}`)
      .then(res => res.json())
      .then(data => setPost(data));
  }, [slug]);

  if (!post) return <div>内容加载中...</div>;

  return (
    <div className="post-detail">
      <h1>{post.title}</h1>
      <div className="post-meta">发布时间：{new Date(post.createdAt).toLocaleDateString()}</div>
      {/* 渲染完整正文，若为Markdown格式可搭配解析库转成HTML */}
      <div 
        className="post-content" 
        dangerouslySetInnerHTML={{ __html: post.content }}
      ></div>
    </div>
  );
}

export default PostDetail;

四、落地注意事项 #

• 路由参数优先用自定义slug，不要直接暴露MongoDB的原生_id，既对SEO友好，URL也更易读
• 列表接口一定要通过select('-content')排除完整正文字段，避免首页加载时拉取大体积的长文数据，拖慢首屏速度
• 详情接口要做存在性校验，文章找不到时返回404状态和对应提示，避免渲染空页面
• 若存储的是Markdown格式的正文，前端需要搭配格式解析库渲染成可阅读的HTML，不要直接输出原始语法

内容的提问来源于stack exchange，提问作者Dulya Perera