React如何访问Ruby on Rails后端模型？RESTful服务对接最佳实践

你提到的新建独立控制器（比如posts_react_controller）的方案并非最佳实践，会带来代码冗余和维护成本，下面是更规范的两种实现方式：

1. 复用现有控制器，根据请求格式返回不同响应 #

Rails原生支持根据请求的格式（HTML/JSON）返回不同内容，无需新建控制器。只需要在原有的PostsController里添加respond_to逻辑：

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
    respond_to do |format|
      format.html # 保留原有的页面渲染逻辑
      format.json { render json: @posts }
    end
  end

  # 其他动作（show/create/update/destroy）同理添加format.json分支
end

前端发起请求时，有两种方式获取JSON数据：

• 直接请求带.json后缀的路由：fetch('/posts.json')
• 在请求头里指定Accept: application/json，直接请求/posts

这种方式复用了现有控制器的业务逻辑，避免重复代码，符合RESTful设计原则。

2. 用命名空间拆分API路由（推荐） #

如果希望API路由和页面路由彻底分离，便于后续API版本迭代，可以用Rails的命名空间功能创建独立的API控制器：

第一步：配置路由 #

在config/routes.rb里添加API命名空间：

Rails.application.routes.draw do
  # 原有的页面路由
  resources :posts

  # API路由
  namespace :api do
    namespace :v1 do
      resources :posts
    end
  end
end

第二步：创建API控制器 #

新建app/controllers/api/v1/posts_controller.rb：

class Api::V1::PostsController < ApplicationController
  # 若前端为独立部署的SPA，需禁用CSRF验证；同域场景可根据情况调整
  skip_before_action :verify_authenticity_token

  def index
    posts = Post.all
    render json: posts
  end

  def show
    post = Post.find(params[:id])
    render json: post
  end

  # 按需实现create/update/destroy等CRUD动作逻辑
end

前端请求示例 #

在React首页组件里发起请求获取数据：

import { useEffect, useState } from 'react';

const PostIndex = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/api/v1/posts')
      .then(response => response.json())
      .then(data => setPosts(data))
      .catch(error => console.error('获取帖子数据失败:', error));
  }, []);

  return (
    <div className="post-list">
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
};

export default PostIndex;

为什么不推荐新建独立控制器？ #

新建posts_react_controller会导致相同的模型操作逻辑（比如获取帖子列表、查询单条帖子）在两个控制器里重复编写，后续需求变更时需要同时维护两处代码，增加了维护成本，也不符合Rails的DRY（Don't Repeat Yourself）原则。

内容的提问来源于stack exchange，提问作者Christopher Centrella