如何将新的 "rails new myapp --api" 与客户端 JavaScript 框架一起使用？

Question

如果这是一个愚蠢的问题，我深表歉意，但我不明白使用 JSON in accordance with a JavaScript framework in Rails 5.0:

的基本原理

Rails is not only a great choice when you want to build a full-stack application that uses server-side rendering of HTML templates, but also a great companion for the new crop of client-side JavaScript or native applications that just needs the backend to speak JSON. We’ve made this even clearer now with the new –api mode. If you create a new Rails application using rails new backend --api, you’ll get a slimmed down skeleton and configuration that assumes you’ll be working with JSON, not HTML.

React 似乎受到很多人的青睐，所以我想学习如何将它与 Rails 后端一起使用。要构建哈希，我倾向于使用 Jbuilder。

我的主要困惑是如何在没有 .html.erb 视图的情况下构建布局。如果我只有两个文件，一个 .json.jbuilder，一个 .js.jsx — 我该如何调用 React 组件？还是每个控制器方法都需要三个对应的视图？还是我完全忽略了 --api 的要点？

Answer 1

您的 .json.jbuilder 文件用于格式化来自服务器的响应。在 API 应用程序中，它们的核心目的与标准 MVC 应用程序中的视图完全相同 - 它们公开数据。对于 API 个应用程序，数据采用 JSON 格式，可以通过端点访问。

对于 API 个应用程序，您可以清楚地区分后端逻辑和前端逻辑。它们是两个独立的应用程序，它们具有用于通信的界面。您不需要 React 应用程序或任何其他前端应用程序来查看数据，您可以使用 Postman 等工具访问端点以查看 Rails 应用程序中的每个端点 returns.

当您想要构建一个将使用 API 应用程序的端点并显示数据的界面时，React 会介入。这就是 React 及其 .js.jsx 组件介入的地方。

Have a look at the source code of a React-Rails app I've built。它不是标准的 API 应用程序，但基于相同的想法构建：

Here 您可以看到 componentDidMount() 函数如何向 React

中的项目端点发出 $http 请求

React.createClass({
getInitialState() {
    return { items: [] }
},


componentDidMount() {
    $.getJSON('/api/v1/items.json', (response) => { this.setState({ items: response }) });
},

并且 here 您可以看到服务器 returns 到该端点的内容。

  def index
    respond_with Item.all
  end

对于标准的 API 应用程序，控制器语法可能有点不同，并且会有一个 .json.jbuilder 文件可以让我格式化响应，但总体思路是一样。

如果您想更好地了解这个概念，请查看我关于该主题的 tutorial。

如何将新的 "rails new myapp --api" 与客户端 JavaScript 框架一起使用？

How does one use the new "rails new myapp --api" with a client-side JavaScript framework?

ruby

ruby-on-rails

ruby-on-rails-5