使用 Rails API 構(gòu)建一個 React 應用程序的詳細步驟
【51CTO.com快譯】使用React創(chuàng)建項目時,動態(tài)數(shù)據(jù)無法保存的問題要怎么辦呢?為此,我開始尋找一個充當備份的API來解決這一問題。
在本文中,我將介紹如何設(shè)置和構(gòu)建一個以React作為前端的Rails API的一些要點,以幫助那些和我遇到一樣問題的人。
本文計劃使用Rails API作為后端,React作為前端,所以需要學習本文的人遵循同樣的路徑和步驟。
后端:Rails API部分
作為創(chuàng)建Rails API之前的先決條件,建議使用Postgres配置數(shù)據(jù)庫,因為它比SQLite更容易部署。然后在你的目錄中找到并創(chuàng)建一個新項目,輸入以下命令:
rails new <app_name> --api --database=postgresql cd` `<app_name>
--database標志是為了選擇我們的數(shù)據(jù)庫引擎,這里我們使用Postgresql,而--api是為了創(chuàng)建一個基于Rails的API來使用我們需要的東西并跳過我們不會使用的額外配置。
使用編輯器打開項目。然后打開Gemfile并添加rack-cors:
gem 'rack-cors', :require => 'rack/cors'
然后,運行 `bundle install`
在運行新的Rails應用程序之前,必須先將其連接到數(shù)據(jù)庫。接下來這一步,將把新創(chuàng)建的Rails應用程序連接到PostgreSQL數(shù)據(jù)庫,這樣就可以在需要時存儲和獲取配方數(shù)據(jù)。這步需要輸入:`rails db:create`
輸出結(jié)果將是這樣顯示:
Created database 'app_name_development'
Created database 'app_name_test'
打開終端并運行以下命令來創(chuàng)建控制器和模型:
rails generate model Movie name rating:integer rails generate controller Movies index create update destroy rails db:migrate
接下來實現(xiàn)控制器中的空方法來讓API正常工作:
現(xiàn)在有了一個管理模型的控制器,接著將把一些電影復制seed.rb文件中,以在瀏覽器中顯示它們,測試是否可以將數(shù)據(jù)轉(zhuǎn)換成json格式。復制以下電影:
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開始。如果你打開該文件,你將發(fā)現(xiàn)由控制器自動生成的路由。因為我們將為API定義自己的路由,所以我們將刪除它們來定義新的路由/ API:
Rails.application.routes.draw do resources :movies end
要查看你的應用程序,需要打開瀏覽器窗口并導航到http://localhost:3000。您將看到Rails默認的歡迎頁面。但是添加路由后,這意味著http://localhost:3000/movies將獲得我們在數(shù)據(jù)庫中的所有電影。也可以在瀏覽器上安裝任何 JSON 查看器擴展以查看格式化數(shù)據(jù)。
前端:React部分
現(xiàn)在我們有了一個基本的API,讓我們使用它來設(shè)置前端React應用程序:
npx create_react-app
Create React App 是 Facebook 的一個項目,可幫助您無需任何配置即可快速開始使用 React 應用程序。
首先,確保你安裝了Node.js和npm。然后,確保你在Rails目錄之外,并運行以下命令來創(chuàng)建react app:
npx create-react-app my_react
這將創(chuàng)建一個與我們的API通信的React應用程序。在目錄中輸入cd my_react并運行npm start后,將在http://localhost:3000上打開它。
React組件
React的主要優(yōu)點之一是組件的概念,所以我們像下圖一樣創(chuàng)建我們所需的組件,刪除不需要的組件。
在源目錄中,我們將創(chuàng)建一個新的文件夾**組件**,并在其中放置要顯示的文件。
讓我們創(chuàng)建我們的第一個組件。讓我們在 todo- app/src/components/Movie.js 中創(chuàng)建一個新文件:
import React, { Component } from 'react'; class Song extends Component { render() { return ( <div> <h1>movies</h1> </div> ); } } export default Song;
這就是我們的組件。接著將它導入到我們的應用程序文件中,以便將它顯示到瀏覽器中。
import './App.css'; import Song from './components/Song'; function App() { return ( <div className="App"> <Song /> </div> ); } export default App;
使用 axios 獲取 API 數(shù)據(jù)
是時候從后端加載數(shù)據(jù)了。可以使用任何包來獲取/存儲數(shù)據(jù)。這次我們使用 axios。
安裝 axios 并在 Movie 組件中導入。
npm install axios --save
首先在構(gòu)造函數(shù)中將狀態(tài)初始化為一個空數(shù)組:
constructor(props) { super(props) this.state = { movies: [] } }
由于我們已經(jīng)在組件中初始化了狀態(tài),現(xiàn)在讓我們實現(xiàn) componentDidMount()方法來從 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'
記住導入axios:
import axios from 'axios'
到這里你會因會被cors屏蔽而無法獲得你的數(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 中獲取想法,讓我們在 React 組件中使用它們。我們可以更改渲染函數(shù)以從狀態(tài)迭代列表想法并顯示它們中的每一個:
現(xiàn)在我們知道我們能夠從API中獲取思想,讓我們在React組件中使用它們。我們可以改變render函數(shù)來遍歷來自狀態(tài)的列表想法,并顯示它們中的每一個:
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)建一個 React 應用程序的文章就介紹到這了,更多相關(guān)Rails API 構(gòu)建React 應用程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?Native系列之Recyclerlistview使用詳解
這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要介紹了React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03關(guān)于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關(guān)于React Native報Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>錯誤,本文給大家分享解決方案,需要的朋友可以參考下2021-05-05react-router-dom入門使用教程(路由的模糊匹配與嚴格匹配)
這篇文章主要介紹了react-router-dom入門使用教程,主要介紹路由的模糊匹配與嚴格匹配,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08