プロジェクト #4 : RoR API バックエンドを備えたバニラ JS フロントエンド
2221 ワード
はじめに
Flatiron School での 4 番目のプロジェクトは、Javascript をフロントエンドとして使用し、Rails API をバックエンドとして使用して、シングル ページ アプリケーション (SPA) を構築することでした.
プロジェクトの説明
いつものように、今回も 3 歳の息子が、私のプロジェクトについて別のアイデアをくれました.少し幼稚かもしれませんが、プロジェクトに「Dinosaur Flash Card」という名前を付けました.これは、恐竜をカードとして表示し、CSS を使用してそれらのカードをめくって、選択した恐竜の簡単な詳細をユーザーに表示するものです.
バックエンドのセットアップ
相対的に has_many と belongs_to の関係にある "中生代"と "恐竜"以降の 2 つのモデルを追加しました.
データの移行とシードの後、両方のモデルで rails scaffold を使用することで、問題なくバックエンドを簡単にセットアップできました.
フロントエンドの課題
このプロジェクトに取り組んだとき、多くの困難と課題がありました.私のコードを DRY にするために、Index.js ファイルから各モデル フォルダーのファイルにコードを変更することは基本的な課題でしたが、最も重要な部分は、この街でまったく新しいので、JS コードがどのように見えるかを理解することでした.
このプロジェクトでは、'fetching' と 'addEventListner' メソッドの使用が、何度か使用しなければならなかった最も便利な方法でした.
取得中
私は5つの取得方法を使用しました.すべてのディオンをレンダリングし、すべての時代をレンダリングし、時代ごとにディノをレンダリングし、POST(ディノの作成)、ディノを削除します.
この投稿では、すべての恐竜を取得して Web ページに表示する方法を紹介したいと思います.
class API {
static ALL_DINOSAURS_URL = "http://localhost:3000/dinosaurs"
static addDinosaurs() {
fetch(this.ALL_DINOSAURS_URL)
.then(response => response.json())
.then(dinosaurs => {
dinosaurs.forEach(dinosaur => {
const newDinosaur = new Dinosaur(dinosaur)
newDinosaur.renderDinosaur(dinosaur)
Dinosaur.all.push(newDinosaur)
})
})
}
}
上記のコードは、すべての恐竜をクラスとしてフェッチする方法です.
services フォルダーで、API.js ファイルを作成し、API クラスを追加して、コードを可能な限り DRY にしました.これは単なるフェッチ プロセスであるため、Web ページにすべての恐竜を実際に表示するには、以下のコードを追加する必要がありました.
document.addEventListener("DOMContentLoaded", function() {
API.addDinosaurs() };
「addDinosaurs」関数を呼び出し、それを「DOMContentLaded」イベント リスナーを使用して Index.js ファイルに呼び出し、最終的にバックエンドからフロントまですべての恐竜をレンダリングして表示しました.
概要
この基本的なフェッチ プロセス全体を通して、Javascript を快適に使用できるようになりました. JS の初心者として、RUBY を最初のコンピューター言語として学んだときのように、すべてのメソッドと関数が見慣れているわけではありません.この単純な取得方法を実践し、それを繰り返して他のバックエンド データを取得することで、最終的にこのプロジェクトの開始時よりも自信を持つことができました.
Reference
この問題について(プロジェクト #4 : RoR API バックエンドを備えたバニラ JS フロントエンド), 我々は、より多くの情報をここで見つけました https://dev.to/cwonjin11/project-4-vanilla-js-frontend-with-ror-api-backend-55kkテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol