React + Egg.js + MySQL：评论组件深度剖析（三）

2024-02-01 15:52:53

构建评论组件（三）

数据模型

评论组件依赖于数据模型来存储和管理评论数据。在 MySQL 中，我们创建了一个名为 comments 的表，包含以下字段：

CREATE TABLE comments (
  id INT NOT NULL AUTO_INCREMENT,
  content TEXT NOT NULL,
  author VARCHAR(255) NOT NULL,
  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
);

路由配置

为了在 React 应用中呈现评论组件，我们需要配置路由。在 routes/web.js 中，添加以下路由：

module.exports = app => {
  // 评论列表页
  app.get('/comments', 'comment.list');

  // 创建评论
  app.post('/comments', 'comment.create');

  // 更新评论
  app.put('/comments/:id', 'comment.update');

  // 删除评论
  app.delete('/comments/:id', 'comment.destroy');
};

后端接口

在 Egg.js 中，我们定义了以下后端接口来操作评论数据：

// service/comment.js
class CommentService extends Service {
  async list() {
    return await this.ctx.model.Comment.findAll();
  }

  async create(data) {
    return await this.ctx.model.Comment.create(data);
  }

  async update(id, data) {
    const comment = await this.ctx.model.Comment.findByPk(id);
    if (!comment) {
      this.ctx.throw(404, 'Comment not found');
    }
    return await comment.update(data);
  }

  async destroy(id) {
    const comment = await this.ctx.model.Comment.findByPk(id);
    if (!comment) {
      this.ctx.throw(404, 'Comment not found');
    }
    return await comment.destroy();
  }
}

整合前端和后端

在 React 组件中，我们通过以下代码整合前端和后端：

// components/CommentList.js
import { useState, useEffect } from 'react';
import { useHttp } from 'use-http';

const CommentList = () => {
  const [comments, setComments] = useState([]);
  const { get, post, put, delete: del } = useHttp();

  useEffect(() => {
    get('/comments').then(res => setComments(res.data));
  }, []);

  const handleCreate = (data) => {
    post('/comments', data).then(res => setComments([...comments, res.data]));
  };

  const handleUpdate = (id, data) => {
    put(`/comments/${id}`, data).then(res => {
      const updatedComments = comments.map(comment => comment.id === id ? res.data : comment);
      setComments(updatedComments);
    });
  };

  const handleDelete = (id) => {
    del(`/comments/${id}`).then(() => setComments(comments.filter(comment => comment.id !== id)));
  };

  return (
    <div>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <p>{comment.content}</p>
            <p>Author: {comment.author}</p>
          </li>
        ))}
      </ul>
      <Form onCreate={handleCreate} />
    </div>
  );
};