菜鸟教程
教程 react tutorial

博客系统 / 评论系统（中级）

博客系统和评论系统是前端开发中常见的应用场景。在这个项目中，我们将实现一个简单的博客系统，并附带评论功能。通过此项目，开发者可以深入了解如何使用 React 构建更复杂的应用，如何进行状态管理、数据传输与表单处理等。

1. 项目结构

项目中主要涉及以下功能模块：

  • 博客列表：展示所有博客的列表。
  • 单个博客详情：展示单个博客的详细内容及评论。
  • 评论功能：允许用户在每篇博客下评论。
  • 路由配置：使用 React Router 进行页面路由管理。

目录结构

bash 
src/
  ├── components/
  │   ├── BlogList.js
  │   ├── BlogDetail.js
  │   └── CommentForm.js
  ├── App.js
  ├── index.js
  └── api.js

`

2. 设置 API 模拟

为了方便开发，项目将模拟后端接口。我们创建一个 api.js 文件来模拟获取博客和评论数据的请求。

js 
// api.js
export const getBlogs = async () => {
  return [
    { id: 1, title: 'React 入门', content: '这是 React 入门的博客内容' },
    { id: 2, title: 'Vue 入门', content: '这是 Vue 入门的博客内容' },
  ];
};

export const getComments = async (blogId) => {
  const comments = {
    1: [
      { id: 1, text: '很棒的博客！' },
      { id: 2, text: '学到了很多！' },
    ],
    2: [
      { id: 3, text: 'Vue 也很好用！' },
    ],
  };
  return comments[blogId] || [];
};

export const postComment = async (blogId, commentText) => {
  console.log(`为博客 ${blogId} 添加了评论：${commentText}`);
};

3. 实现博客列表组件

在 BlogList.js 文件中，我们实现博客列表组件，负责展示所有博客的标题并可以点击查看详情。

js 
import React, { useEffect, useState } from 'react';
import { getBlogs } from '../api';

function BlogList({ onSelectBlog }) {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    const fetchBlogs = async () => {
      const blogs = await getBlogs();
      setBlogs(blogs);
    };
    fetchBlogs();
  }, []);

  return (
    <div>
      <h2>博客列表</h2>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id} onClick={() => onSelectBlog(blog.id)}>
            {blog.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BlogList;

4. 实现博客详情组件

在 BlogDetail.js 文件中，我们实现单个博客的详情展示，并且可以展示该博客下的所有评论，以及提交新的评论。

js 
import React, { useState, useEffect } from 'react';
import { getComments, postComment } from '../api';
import CommentForm from './CommentForm';

function BlogDetail({ blogId }) {
  const [comments, setComments] = useState([]);
  const [blogContent, setBlogContent] = useState('');

  useEffect(() => {
    const fetchComments = async () => {
      const comments = await getComments(blogId);
      setComments(comments);
    };
    const fetchBlogContent = async () => {
      const blogs = await getBlogs();
      const blog = blogs.find((b) => b.id === blogId);
      setBlogContent(blog.content);
    };
    fetchComments();
    fetchBlogContent();
  }, [blogId]);

  const handlePostComment = async (commentText) => {
    await postComment(blogId, commentText);
    const updatedComments = await getComments(blogId);
    setComments(updatedComments);
  };

  return (
    <div>
      <h2>博客内容</h2>
      <p>{blogContent}</p>
      <h3>评论</h3>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
      <CommentForm onPostComment={handlePostComment} />
    </div>
  );
}

export default BlogDetail;

5. 实现评论表单组件

在 CommentForm.js 文件中，我们实现评论表单组件，允许用户输入评论并提交。

js 
import React, { useState } from 'react';

function CommentForm({ onPostComment }) {
  const [comment, setComment] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment) {
      onPostComment(comment);
      setComment('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={comment} 
        onChange={(e) => setComment(e.target.value)} 
        placeholder="请输入评论"
      />
      <button type="submit">提交评论</button>
    </form>
  );
}

export default CommentForm;

6. 配置路由

在 App.js 文件中，配置 React Router 来管理博客列表页面与博客详情页面的路由。

js 
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import BlogList from './components/BlogList';
import BlogDetail from './components/BlogDetail';

function App() {
  const [selectedBlogId, setSelectedBlogId] = useState(null);

  const handleSelectBlog = (blogId) => {
    setSelectedBlogId(blogId);
  };

  return (
    <Router>
      <Routes>
        <Route 
          path="/" 
          element={<BlogList onSelectBlog={handleSelectBlog} />} 
        />
        <Route 
          path="/blog/:id" 
          element={<BlogDetail blogId={selectedBlogId} />} 
        />
      </Routes>
    </Router>
  );
}

export default App;

7. 总结

通过实现一个简单的博客系统和评论系统，我们学习了如何在 React 中处理复杂的状态管理、组件间通信、表单处理、路由配置等问题。同时，也深入理解了如何与模拟后端进行交互，管理异步请求的生命周期。

此项目是学习中级 React 开发技能的一个有效方式，为开发更复杂的应用奠定了基础。

相关内容