【.com快译】使用React创建项目时，动态数据无法保存怎么办？为此，我开始寻找一个API作为后备来解决这个问题。在本文中，我将介绍如何设置和构建以React作为前端的RailsAPI的一些要点，以帮助那些和我有同样问题的人。本文打算使用RailsAPI作为后端，React作为前端，所以需要学习本文的小伙伴可以遵循相同的路径和步骤。后端：RailsAPI部分作为创建RailsAPI的先决条件，建议使用Postgres配置数据库，因为它比SQLite更容易部署。然后在你的目录下找到并新建一个项目，输入以下命令：railsnew--api--database=postgresqlcd``--databaseflag是选择我们的数据库引擎，这里我们使用Postgresql，--api是创建一个基于Rails的API来使用我们需要的东西并跳过我们不会使用的额外配置。使用编辑器打开项目。然后打开Gemfile并添加rack-cors：gem'rack-cors',:require=>'rack/cors'然后，运行`bundleinstall`在运行新的Rails应用程序之前，它必须首先连接到数据库。下一步是将新创建的Rails应用程序连接到PostgreSQL数据库，以便可以在需要时存储和检索食谱数据。此步骤需要键入：`railsdb:create`输出将如下所示：Createddatabase'app_name_development'Createddatabase'app_name_test'打开终端并运行以下命令创建控制器和模型：integerrailsgeneratecontrollerMoviesindexcreateupdatedestroyrailsdb:migrate接下来在控制器中实现empty方法以使API工作：现在我们有了一个管理模型的控制器，我们将把一些电影复制到seed.rb文件中在浏览器中添加Display来测试是否可以将数据转换成json格式。复制以下电影：Movie.create(name:"Titanic",rating:5)Movie.create(name:"Weweresoldiers",rating:4)Movie.create(name:"L'amourquandellenoustient",rating:5)Movie.create(name:"Nobody'sFool",rating:2)之后，将这四个元素粘贴到项目中运行：railsdb:seed然后就可以开始写代码了。首先从route.rb开始。如果你打开那个文件，你会发现控制器自动生成的路由。由于我们将为API定义自己的路由，因此我们将删除它们以定义新的路由/API：Rails.application.routes.drawdoresources:moviesend要查看您的应用程序，请打开浏览器窗口并导航至http://本地主机：3000。您将看到Rails默认的欢迎页面。但是加上路由之后，就意味着http://localhost:3000/movies会获取到我们数据库中所有的电影。您还可以在浏览器上安装任何JSON查看器扩展来查看格式化数据。前端：React部分现在我们有了一个基本的API，让我们用它来设置一个前端React应用程序：npxcreate_react-appCreateReactApp是一个Facebook项目，它可以帮助您快速开始使用React应用程序而无需任何配置。首先，确保安装了Node.js和npm。然后，确保您在Rails目录之外，并运行以下命令来创建React应用程序：npxcreate-react-appmy_react这将创建一个与我们的API通信的React应用程序。在目录中输入cdmy_react并运行npmstart后，它将在http://localhost:3000上打开。React组件React的主要优点之一是组件的概念，因此我们创建我们需要的组件并删除我们不需要的组件，如下图所示。在source目录下，我们会新建一个文件夹**components**，将要展示的文件放在里面。让我们创建我们的第一个组件。让我们在todo-app/src/components/Movie.js中创建一个新文件：importReact,{Component}from'react';classSongextendsComponent{render(){return(