【Portfolio】Itsuki Hasegawa/📽️ Products/🪴[Rails] SPA
🪴

[Rails] SPA

DRFで作ったAPIを使用したSPAをRailsで作成する

開発環境
  • OS:
  • Python:
  • Django:
  • ruby:
  • Rails:

:horse: Djangoのプロジェクトを作成

別のプロジェクトとしてdjangoでAPIを実装

API実装
Django REST Frameworkを使って爆速でAPIを実装する
CORS設定
DRFを使って、APIエンドポイントをフロントエンドから叩く場合にはCORSの設定が必要
【drf】django-cors-headersを使ってCORS設定を行う
動作確認
http://localhost:8000/admin/ 管理画面に入り,EntrysとUsersをいくつか作っておく
<img width="739" alt="スクリーンショット 2021-08-28 9 51 46" src="https://user-images.githubusercontent.com/84751550/131200964-69ea9e5a-1697-48ed-92dd-153927740112.png">
<img width="734" alt="スクリーンショット 2021-08-28 9 52 00" src="https://user-images.githubusercontent.com/84751550/131200967-238bbd44-c0ca-4de0-a146-40f294a856e0.png">
http://localhost:8000/api/entries/ でEntryの情報を受け取れるか確認
<img width="1230" alt="スクリーンショット 2021-08-28 9 51 25" src="https://user-images.githubusercontent.com/84751550/131200984-2510d1e9-6dad-4f6b-b99b-b90cde084605.png">

:gem: railsのプロジェクトを作成

別のプロジェクトとしてrailsでSPAを実装

動作確認
https://localhost:3000 サーバが立ち上がることを確認する
<img width="1139" alt="スクリーンショット 2021-08-28 11 15 20" src="https://user-images.githubusercontent.com/84751550/131203153-3c1a7a0b-a61c-40ec-94dd-9a844fe223e2.png">
コントローラーとビューを作成
でtopコントローラ-とビューを作成し，ルーティングとアクション追加までしてくれます
コントローラーの確認
top_controller.rb
でshowアクションは自動で定義されるが一応のため確認．
showアクションが実行されると， app/views/top/show.html.erbを探して表示してくれる
ルーティングを定義
routes.rb
https://localhost:3000/ でtopコントローラのshowアクションが呼び出し,show.html.erbを表示できるようにした
ビューをを編集
show.html.erb
HelloWorldを表示させるようにする
動作確認
https://localhost:3000 show.html.erbが表示されることを確認
<img width="606" alt="スクリーンショット 2021-08-28 11 17 49" src="https://user-images.githubusercontent.com/84751550/131203162-f0e1ad85-ca0b-4fca-b1af-427323dfe54a.png">
HelloWorldが表示されたらOK

vue.js環境構築

vueをインストール
vue.jsを利用するにあたり必要なファイルを用意してくれます。
ビューを編集
show.html.erb
動作確認
https://localhost:3000 「Hello Vue!!」と表示されていれば、環境構築は完了です。

APIを使用したSPAを作成する

axiosをインストール
ビューを編集
app/views/top/show.html.erb
Bootstrapを使用しています．
でapp/javascript/packs/api.jsを読み込んでいます．
より， セレクトボックスは双方向にバインディングしています．
より， sections配列に格納されている値一つ一つをvalueとして選択できるようなセレクトボックスのoptionを作っています．
より，クリックされた時にsearch関数が呼び出されます.
同様に, ボタンはより，クリックされた時にactive関数が呼び出されます.
axiosを使用
app/javascript/packs/api.jsを作成
「情報を取得する」 ボタンが押された時に実行されるactive関数では,セレクトボックスにセットされている取得したいEntryのidを,HTTPメソッドを格納する変数に埋め込み,そのHTTPメソッドでAPIと通信を行い， データを取得しています．
で, HTTPメソッドを実行し， APIと通信を行う．
必要とする情報はAPIからのレスポンスの中にある.
で, this.djangoにAPIからのレスポンスであるJSONデータを取得.
show.html.erbで やなどとすることでapp.jsで宣言や取得した値を表示させることができる．
とりあえず1~6番目に作成したEntryを取得できるようにとしました
任意で減らしたり増やしたり，取得したいEntryのidに変えてください
デザインを適用
app/assets/stylesheets/top.scss
デザインは好みでお願いします
動作確認
https://localhost:3000
<img width="737" alt="スクリーンショット 2021-08-28 11 14 45" src="https://user-images.githubusercontent.com/84751550/131203171-4015328f-63a6-411a-a864-f1836fbbb287.png">
selectボタンで取得したいEntryの番号を選択し， データを取得を押すとAPIからデータを取得することができる
SPA完成！！
GETしかできないが，他も実装予定
何も表示されない場合はdjangoのサーバが起動しているか確認したり, 検証でエラーを確認

:octocat: ソース

djangoのプロジェクト
railsのプロジェクト
上記を実行してください

:book: 参考URL