【51CTO.com快譯】使用React創(chuàng)建項(xiàng)目時(shí)，動(dòng)態(tài)數(shù)據(jù)無(wú)法保存的問(wèn)題要怎么辦呢？為此，我開始尋找一個(gè)充當(dāng)備份的API來(lái)解決這一問(wèn)題。

在本文中，我將介紹如何設(shè)置和構(gòu)建一個(gè)以React作為前端的Rails API的一些要點(diǎn)，以幫助那些和我遇到一樣問(wèn)題的人。

本文計(jì)劃使用Rails API作為后端，React作為前端，所以需要學(xué)習(xí)本文的人遵循同樣的路徑和步驟。

后端：Rails API部分

作為創(chuàng)建Rails API之前的先決條件，建議使用Postgres配置數(shù)據(jù)庫(kù)，因?yàn)樗萐QLite更容易部署。然后在你的目錄中找到并創(chuàng)建一個(gè)新項(xiàng)目，輸入以下命令：

rails new <app_name> --api --database=postgresql 
cd` `<app_name> 

--database標(biāo)志是為了選擇我們的數(shù)據(jù)庫(kù)引擎，這里我們使用Postgresql，而--api是為了創(chuàng)建一個(gè)基于Rails的API來(lái)使用我們需要的東西并跳過(guò)我們不會(huì)使用的額外配置。

使用編輯器打開項(xiàng)目。然后打開Gemfile并添加rack-cors：

gem 'rack-cors', :require => 'rack/cors' 

然后，運(yùn)行 `bundle install`

在運(yùn)行新的Rails應(yīng)用程序之前，必須先將其連接到數(shù)據(jù)庫(kù)。接下來(lái)這一步，將把新創(chuàng)建的Rails應(yīng)用程序連接到PostgreSQL數(shù)據(jù)庫(kù)，這樣就可以在需要時(shí)存儲(chǔ)和獲取配方數(shù)據(jù)。這步需要輸入：`rails db:create`

輸出結(jié)果將是這樣顯示：

Created database 'app_name_development'
Created database 'app_name_test'

打開終端并運(yùn)行以下命令來(lái)創(chuàng)建控制器和模型：

rails generate model Movie name rating:integer 
rails generate controller Movies index create update destroy 
rails db:migrate 

接下來(lái)實(shí)現(xiàn)控制器中的空方法來(lái)讓API正常工作：

現(xiàn)在有了一個(gè)管理模型的控制器，接著將把一些電影復(fù)制seed.rb文件中，以在瀏覽器中顯示它們，測(cè)試是否可以將數(shù)據(jù)轉(zhuǎn)換成json格式。復(fù)制以下電影：

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) 

之后，將這四個(gè)元素粘貼到項(xiàng)目中運(yùn)行：rails db:seed

接下來(lái)可以開始編寫代碼了。首先從route.rb開始。如果你打開該文件，你將發(fā)現(xiàn)由控制器自動(dòng)生成的路由。因?yàn)槲覀儗锳PI定義自己的路由，所以我們將刪除它們來(lái)定義新的路由/ API：

Rails.application.routes.draw do 
resources :movies 
end 

要查看你的應(yīng)用程序，需要打開瀏覽器窗口并導(dǎo)航到http://localhost:3000。您將看到Rails默認(rèn)的歡迎頁(yè)面。但是添加路由后，這意味著http://localhost:3000/movies將獲得我們?cè)跀?shù)據(jù)庫(kù)中的所有電影。也可以在瀏覽器上安裝任何 JSON 查看器擴(kuò)展以查看格式化數(shù)據(jù)。

前端：React部分

現(xiàn)在我們有了一個(gè)基本的API，讓我們使用它來(lái)設(shè)置前端React應(yīng)用程序：

npx create_react-app 

Create React App 是 Facebook 的一個(gè)項(xiàng)目，可幫助您無(wú)需任何配置即可快速開始使用 React 應(yīng)用程序。

首先，確保你安裝了Node.js和npm。然后，確保你在Rails目錄之外，并運(yùn)行以下命令來(lái)創(chuàng)建react app：

npx create-react-app my_react 

這將創(chuàng)建一個(gè)與我們的API通信的React應(yīng)用程序。在目錄中輸入cd my_react并運(yùn)行npm start后，將在http://localhost:3000上打開它。

React組件

React的主要優(yōu)點(diǎn)之一是組件的概念，所以我們像下圖一樣創(chuàng)建我們所需的組件，刪除不需要的組件。

在源目錄中，我們將創(chuàng)建一個(gè)新的文件夾**組件**，并在其中放置要顯示的文件。

讓我們創(chuàng)建我們的第一個(gè)組件。讓我們?cè)?todo- app/src/components/Movie.js 中創(chuàng)建一個(gè)新文件：

import React, { Component } from 'react'; 
class Song extends Component { 
render() { 
return ( 
<div> 
<h1>movies</h1> 
</div> 
); 
} 
} 
export default Song; 

這就是我們的組件。接著將它導(dǎo)入到我們的應(yīng)用程序文件中，以便將它顯示到瀏覽器中。

import './App.css'; 
import Song from './components/Song'; 
function App() { 
return ( 
<div className="App"> 
<Song /> 
</div> 
); 
} 
export default App; 

使用 axios 獲取 API 數(shù)據(jù)

是時(shí)候從后端加載數(shù)據(jù)了?？梢允褂萌魏伟鼇?lái)獲取/存儲(chǔ)數(shù)據(jù)。這次我們使用 axios。

安裝 axios 并在 Movie 組件中導(dǎo)入。

npm install axios --save 

首先在構(gòu)造函數(shù)中將狀態(tài)初始化為一個(gè)空數(shù)組：

constructor(props) { 
super(props) 
this.state = { 
movies: [] 
} 
} 

由于我們已經(jīng)在組件中初始化了狀態(tài)，現(xiàn)在讓我們實(shí)現(xiàn) componentDidMount()方法來(lái)從 API 加載我們的數(shù)據(jù)：

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' 

記住導(dǎo)入axios：

import axios from 'axios' 

到這里你會(huì)因會(huì)被cors屏蔽而無(wú)法獲得你的數(shù)據(jù)。為了避免這種情況，你必須在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 

現(xiàn)在我們知道我們可以從 API 中獲取想法，讓我們?cè)?React 組件中使用它們。我們可以更改渲染函數(shù)以從狀態(tài)迭代列表想法并顯示它們中的每一個(gè)：

現(xiàn)在我們知道我們能夠從API中獲取思想，讓我們?cè)赗eact組件中使用它們。我們可以改變r(jià)ender函數(shù)來(lái)遍歷來(lái)自狀態(tài)的列表想法，并顯示它們中的每一個(gè)：

render() { 
return ( 
<div> 
 
{this.state.movies.map((movie) => { 
 
return( 
 
<div className="tile" key={movie.id} > 
 
<h2>{movie.name}:<span>{movie.rating}</span></h2> 
 
</div> 
) 
})} 
</div> 
); 
} 

現(xiàn)在我們可以在瀏覽器中看到我們的數(shù)據(jù)了。

到此這篇關(guān)于使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的文章就介紹到這了,更多相關(guān)Rails API 構(gòu)建React 應(yīng)用程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論