Ruby on Rails

Rails + Nuxt ~編集(update)、削除(delete)~

前回の記事まででコンテンツ一覧、詳細表示、コンテンツ新規作成まで実装できたので、今回の記事はコンテンツの編集、削除の機能を実装していきます。 前回の記事はこちら: Rails + Nuxt モダンなアプリケーションの作成~投稿の新規作成から詳細表示まで~ 1.編集画面作成(Nuxt) まず、詳細画面の「Topへ」のボタンの横に「編集」ボタンを設置し、それをクリックすると新規作成時と同じような投稿フ […]

Rails + Nuxt ~新規作成(create)、詳細表示(show)~

今回の記事ではデータの追加から詳細の表示までを実装します。 前回の記事はこちら: Rails + Nuxt モダンなアプリケーションの作成 モデルの作成から表示まで 1. 新規作成ボタンの作成(Nuxt) まずは一覧画面に新規作成ボタンを作成します。 これで画面の右下にボタンが表示されそれをクリックすると下記のようなモーダル が表示されるようになりました。 保存ボタンを押すとsave()メソッドが […]

Rails + Nuxt ~モデルの作成から表示(index)まで~

前回の記事でAPIの通信はできたのでここからは実際にモデルを作成していきます。 前回の記事はこちら: https://tns-blog.com/1 今回作成するアプリのER図はこのようになっています。 Twitterみたいな簡易SNSです。 ユーザーは複数の投稿ができさらに投稿に対していいねができる。 大まかな流れとしては下記のようになります。 PostモデルのCRUD Postモデルの作成(us […]

Rails + Nuxt 環境構築~プロジェクト作成からaxios通信まで~

フロントエンド をVue.jsのフレームワークのNuxt.jsを使用し、バックエンドをRuby on RailsのAPIモードで簡単なCRUDのアプリケーションを作成します。 今回の記事ではNuxtとRailsの環境構築とaxios通信をして「Hello Rails」を出力するところまでを実装します。 ディレクトリの作成 環境構築(Rails) database.ymlを編集します。 PG_USE […]