Vueでrails apiのデータを表示させたい

Question

実現したいこと

APIでたたいたのをVueで表示させたい。

発生している問題・エラーメッセージ

[Rails+Vue.js]~Bookshelf~だけ表示される。
データが表示されない

該当のソースコード

やったこと

階層
├── backend
│   ├── app
│   ├── bin
│   ├── config
│   ├── db
│   ├── lib
│   ├── log
│   ├── public
│   ├── storage
│   ├── test
│   ├── tmp
│   └── vendor
└── frontend
    └── vite-project

docker-compose run backend bundle exec rails g model Book title:string author:string publisher:string genre:string

class Book < ApplicationRecord
  validates :title, presence: true, length: { maximum: 100 }
  validates :author, presence: true, length: { maximum: 100 }
  validates :publisher, presence: true, length: { maximum: 50 }
  validates :genre, presence: true, length: { maximum: 50 }
end

docker-compose run backend rails db:migrate

gem 'faker'
gem 'rack-cors'

docker compose run backend bundle install

docker-compose build

20.times do
  Book.create!(
    title: Faker::Book.title,
    author: Faker::Book.author,
    publisher: Faker::Book.publisher,
    genre: Faker::Book.genre
  )
end

docker-compose run backend rails g controller api::books

Rails.application.routes.draw do
  namespace :api do
    resources :books
  end
end

class Api::BooksController < ApplicationController
  def index
    books = Book.all

    render json: books

    # 質問主さんの書き方の場合、フロント側はbooks.value = res.data.bookで受け取る
    # render json: {book: books}
  end

  def show
    book = Book.find(params[:id])
    render json: book
  end
end

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins "localhost:5173"
     resource "*",
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

import axios from 'axios'

export default axios.create({
    baseURL: 'http://localhost:3000',
})

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "bootstrap": "^5.3.1",
    "vue": "^3.3.4",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

<template>
  <div class="container">
    <h1 class="#f3e5f5 purple lighten-5 center">[Rails+Vue.js]~Bookshelf~</h1>
    <div class="row #e3f2fd blue lighten-5">
      <div class="col s4 m6" v-for="book in books" :key="book.id">
        <div class="card btn">
          <span class="card-title" @click="setBookInfo(book.id)">
            {{ book.title }}
          </span>
        </div>
      </div>
    </div>
    <div class="row" v-show="bookInfoBool">
      <div class="col s12 m12">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">
              【{{ bookInfo.title }}】
            </span>
            <div class="detail">
              ・著者：{{ bookInfo.author }}
            </div>
            <div class="detail">
              ・出版社：{{ bookInfo.publisher }}
            </div>
            <div class="detail">
              ・ジャンル：{{ bookInfo.genre }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

const bookInfo = ref({});
const bookInfoBool = ref(false);
const books = ref([]);

const fetchBooks = () => {
  axios.get('/api/books').then(
    (res) => {
      books.value = res.data.books;
    },
    (error) => {
      console.log(error);
    }
  );
};

const setBookInfo = (id: number) => {
  axios.get(`/api/books/${id}.json`).then((res) => {
    bookInfo.value = res.data;
    bookInfoBool.value = true;
  });
};

onMounted(fetchBooks);
</script>

<style scoped></style>

ここに問題に対して試したことを記載してください。

いろいろパッケージをyarn addを使って入れてみた。よくわからず....
よろしくお願いします。
ここの部分の情報はありますか？
とかありましたら記載します。

環境は
https://qiita.com/gabakugik/items/cded7e8aaa014025d8ba
で作りました。

Comments

[amaranthine]

「Web上には表示されない」というのは、画面は一応出るが、データが表示されないということなのか、真っ白か、ブラウザによる404画面なのか、ブラウザ上、どういう画面か情報があれば、よりわかりやすいかもです。

[gabakugik]

画面は一応出るが、データが表示されないです。

Answer 1

提示されている手順とソースを利用し、ローカルで動作させてみました。下記レポジトリです。

amaranthinekt/test_for_teratail

やっていて動かない原因などについて、思いつく点を下記に列挙いたします。学習や理解、原因判明の一助となれば幸いです。

• 提示されているcors.rb は、 config/initializer/cors.rbで間違いないでしょうか？　こちらはinitializerのため、設置後railsサーバーを再起動させないと適用されません。（docker-composer restartなどでコンテナごと再起動すれば良いと思います。）
  • 上記は、JSからのアクセスのクロスオリジン設定のため、有効になっていないとブラウザ上のJavaScriptから、Rails上のAPIアクセスが拒絶されます。ブラウザ上でF12を押下し、ネットワークタブを開いて、再読込すると、ブラウザから何をネットワーク上に読みに行ったか分かりますが、その中でbooks（http://localhost:3000/api/booksへのアクセス）が、赤くなっていないか、押下して見ていたら、cross-originで拒絶されてないか確認できます。
• データが入っているかどうかは、ブラウザからhttp://localhost:3000/api/booksを開くのが一番早い解決方法かと思います。seedsで追加したようですが、seedsを実行するコマンドが提示されていなかったため、どのように追加したのか、正常に追加されているのかは不明ですが、上記ブラウザURLで確認出来るかと思います。もし、入っていない場合、seedsを実行してDBにデータを追加する方法が分からない場合は、Rails consoleから追加するのがわかりやすいかもしれません。docker-compose bash backend rails cで、Rails consoleを開き、config/seeds.rbに記載のコードを貼り付けてEnterで実行できます。
• 提示されているfrontend/viteファイルは何かよく分かりませんでした（私が普段vite使わないせいかもしれませんが）。axiosのbaseURL設定が有効になっていないと、Railsにアクセスできませんので、ここがうまく動いてないことも原因かもしれません。私のレポジトリでは、面倒だったので、普通にfetchメソッドにhttp://からのフルパスを指定しています。
• App.vueのconst fetchBooksについては、返り値を受け取る部分、books.value = res.data.booksは誤りで、books.value = res.dataかなと思います。

Comments

[gabakugik]

App.vueの部分を見て修正しました。
表示されました。
ありがとうございました。