使用 Rails API 構建一個 React 應用程式的詳細步驟
目錄
- 後端：Rails API部分
- 前端：React部分
- React元件
- 使用 axios 獲取 API 資料
【51CTO.com快譯】使用React建立專案時，動態資料無法儲存的問題要怎麼辦呢？為此，我開始尋找一個充當備份的API來解決這一問題。
在本文中，我將介紹如何設定和構建一個以React作為前端的Rails API的一些要點，以幫助那些和我遇到一樣問題的人。
本文計劃使用Rails API作為後端，React作為前端，所以需要學習本文的人遵循同樣的路徑和步驟。
後端：Rails API部分
作為建立Rails API之前的先決條件，建議使用Postgres配置，因為它比SQLite更容易部署。然後在你的目錄中找到並建立一個新專案，輸入以下命令：
rails new <app_name> --api --database=postgresql cd` `<alckoaEpp_name>
--database標誌是為了選擇我們的資料庫引擎，這裡我們使用Postgresql，而--api是為了建立一個基於Rails的API來使用我們需要的東西並跳過我們不會使用的額外配置。
使用編輯器開啟專案。然後開啟Gemfile並新增rack-cors：
gem 'rack-cors',:require => 'rack/cors'
然後，執行 `bundle install`
在運www.cppcns.com
輸出結果將是這樣顯示：
Created database 'app_name_development'
Created database 'app_name_test'
開啟終端並執行以下命令來建立控制器和模型：
rails generate model Movie name rating:integer rails generate controller Movies index create update destroy rails db:migrate
接下來實現控制器中的空方法來讓API正常工作：
現在有了一個管理模型的控制器，接著將把一些電影複製seed.rb檔案中，以在瀏覽器中顯示它們，測試是否可以將資料轉換成on格式。複製以下電影：
Movie.create(name: "Titanic",rating: 5) Movie.create(name: "We were soldiers",rating: 4) Movie.create(name: "L'amour quand elle nous tient",rating: 5) Movie.create(name: "Nobody's Fool",rating: 2)
之後，將這四個元素貼上到專案中執行：rails db:seed
接下來可以開始編寫程式碼了。首先從route.rb開始。如果你開啟該檔案，你將發現由控制器自動生成的路由。因為我們將為API定義自己的路由，所以我們將刪除它們來定義新的路由/ API：
Rails.application.routes.draw do resources :movies end
要檢視你的應用程式，需要開啟瀏覽器視窗並導航到http://localhost:3000。您將看到Rails預設的歡迎頁面。但是新增路由後，這意味著http://localhost:3000/movies將獲得我們在資料庫中的所有電影。也可以在瀏覽器上安裝任何 JSON 檢視器擴充套件以檢視格式化資料。
前端：React部分
現在我們有了一個基本的API，讓我們使用它來設定前端React應用程式：
npx create_react-app
Create React App 是 Facebook 的一個專案，可幫助您無需任何配置即可快速開始使用 React 應用程式。
首先，確保你安裝了Node.js和npm。然後，確保你在Rails目錄之外，並執行以下命令來建立react app：
npx create-react-app my_react
這將建立一個與我們的API通訊的React應用程式。在目錄中輸入cd my_react並執行npm start後，將在http://localhost:3000上開啟它。
React元件
React的主要優點之一是元件的概念，所以我們像下圖一樣建立我們所需的元件，刪除不需要的元件。
在源目錄中，我們將建立一個新的資料夾**元件**，並在其中放置要顯示的檔案。
讓我們建立我們的第一個元件。讓我們在 todo- app/src/components/Movie.js 中建立一個新檔案：
import React,{ Component } from 'react';
class Song extends Component {
render() {
return (
<div>
<h1>movies</h1>
</div>
);
}
}
export default Song;
這就是我們的元件。接著將它匯入到我們的應用程式檔案中，以便將它顯示到瀏覽器中。
import './App.';
import Song from './components/Song';
function App() {
return (
<div className="App">
<Song />
</div>
);
}
export default App;
使用 axios 獲取 API 資料
是時候從後端載入資料了。可以使用任何包來獲取/儲存資料。這次我們使用 axios。
安裝 axios 並在 Movie 元件中匯入。
npm install axios --save
首先在建構函式中將狀態初始化為一個空陣列：
constructor(props) {
super(props)
this.state = {
movies: []
}
}
由於我們已經在元件中初始化了狀態，現在讓我lckoaE們實現 componentDidMount()方法來從 API 載入我們的資料：
componentDidMount() {
axios.get('http://localhost:3000/movies')
.then(response => {
console.log(response)
this.setState({movies: response.data})
})
.catch(error => console.log(error))
}
import axios from 'axios'
記住匯入axios：
import axios from 'axios'
到這裡你會因會被cors遮蔽而無法獲得你的資料。為了避免這種情況，你必須在config/appcation.rb中使用API：
config.middleware.insert_before 0,Rack::Cors do allow do origins 'http://localhost:3000' resource '*',:headers => :any,:methods => [:get,:post,:put,:delete,:options] end end
現在我們知道我們可以從 API 中獲取想法，讓我們在 React 元件中使用它們。我們可以更改渲染函式以從狀態迭代列表想法並顯示它們中的每一個：
現在我們知道我們能夠從API中獲取思想，讓我們在React元件中使用它們。我們可以改變render函式來遍歷來自狀態http://www.cppcns.com的列表想法，並顯示它們中的每一個：
render() {
return (
<div>
{this.state.movies.map((movie) => {
return(
<div className="tile" key={movie.id} >
<h2>{movie.name}:<span>{movie.rating}</span></h2>
</div>
)
})}
&http://www.cppcns.comlt;/div>
);
}
現在我們可以在瀏覽器中看到我們的資料了。
到此這篇關於使用 Rails API 構建一個 React 應用程式的文章就介紹到這了,更多相關Rails API 構建React 應用程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！