JavaScriptのスプリンクル

シングルページ・アプリケーション
Ruby on Railsのパワーのおかげで、我々はすぐに非常に堅牢なバックエンドを作ることができますモデル、ビュー、およびコントローラを完了します.しかし、我々はまた、ビューをスキップし、代わりにRailsをAPIとして使用し、JavaScriptとAjaxを使用して動的フロントエンドを作成するオプションがあります.私たちのバックエンドはあまり異なりません、しかし、我々は見解をつくることを忘れることができます、そして、我々は現在JSONに我々のデータを提出します.

始める
私たちの最初のコマンドは、私たちがビューなしでリソースを生成するのを可能にするAPIオプションと結合された新しいレールバックエンドを作成します.

rails new app-name --api

我々はまた、Corsを設定する必要があります.以下はウィキペディアからの簡単な定義です

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

指定したAPIオプションは' cors 'というファイルを作成しました.RB 'のすべての適切な情報をコメントアウト.すべての私たちは、私たちのサーバーにアクセスして大丈夫なドメインの起源を指定しないでください.我々はちょうど任意のドメインアクセスを許可するワイルドカード*を置くことができます.また、どのリソース、ヘッダー、メソッドを指定することもできます.

裏側
私はデータベースを設定することから始めたい.我々はいくつかの移行、いくつかのモデル、およびコントローラを生成する必要があります.これらのコマンドはAPIを作らなかった場合とは全く異なりません.

rails g resource card

マイグレーション、モデル、コントローラを生成するのと同様に、このコマンドは通常のRESTfulルートをルートに追加します.rb 'です.'種子のいずれかのデータを追加することを忘れないでください.Rb 'またはRailsコンソールで.

レンダリング
JSON(JavaScriptのオブジェクト表記法)は、インターネットと他の場所の周りの情報を送信するための素晴らしい、広く使用される形式です!いくつかの人気のドキュメントベースのデータベースもそれを使用する!より快適に我々はそれを得るより良い!私たちは、我々のRailsコントローラにJSONで我々のデータをレンダリングするように明示的に伝えることができます!結局のところ、我々は自分のいずれかをレンダリングされません.erb.HTMLファイル.

def index
  card = Card.find(params[:card_id])
  render json: card
end

これは、JSON形式で私たちのカードの情報をレンダリングします.

前線
バックエンドを設定したので、フロントエンドを作れます.HTMLファイル、少なくとも1つのJSファイル、およびCSSファイルが必要です.JavaScriptがDOM操作のために作成されたので、あなたはあなたのHTMLファイルの中でそれほど技術的にそれを必要としません.
Brendan Eich
アヤックス
Ajaxは、コンテンツが要求され、受信され、クライアント側ですべてをレンダリングできるようにするクールなセットです.「非同期JavaScriptとXML」の頭字語です非同期プロセスは、他の同期処理も実行している間、コードのチャンクを実行し始めることができます.だから、私たちのバックエンドを要求するカードを送信するのを待つことなく、我々はページの残りの部分をレンダリングすることができます.涼しい右?

フェッチ

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

.簡単に言えば、フェッチはDEVSがAJAXを利用する簡単な方法です.構文は簡単です、そして、あなたが多分野生で見るだろう何かはここにあります:

fetch('http://localhost:3000/cards')
        .then(r => r.json())
        .then(info => {
            this.addCards(info);
        })

このコードのチャンクは、CardsHenコントローラのインデックスメソッドから情報を要求します.そして、フェッチのおかげで、我々のカードの情報をいくつかの追加のHTTPデータとともにレスポンスを受け取ります.を使う.それから、キーワード(内容が実行を終了しないようにするために、私たちのブラウザに指示する方法)は、そのレスポンス(R)をR . JSON ()を使ってJSONに変換します.これは変換されたJSONレスポンスがどのように見えるかの例です.

{
  "id":"1",
  "type":"card",
  "attributes":{
    "front":"Hello (informal to one person)",
    "back":"Szia"
  } 
}

それから、私たちのJSON情報を受け取り、私たちのAddCardクラスメソッドに送ってください.そうすれば、私たちはそれぞれのページにそれぞれをレンダリングすることができます.きちんと!今私たちのユーザーはどのようにハンガリー語で1つの人に挨拶を言うことを学ぶことができます!インターネットは楽しい場所です!Sziaは、さようならを意味することもできます.SZIAリーダー!あなたが記事を楽しんで希望!