トップ Vue.jsに関する質問 Vueでrails apiのデータを表示させたい

編集履歴

質問編集履歴

追記

2023/09/06 16:29

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -7,7 +7,7 @@
 ```
 [Rails+Vue.js]~Bookshelf~だけ表示される。
+データが表示されない
 ```
 ### 該当のソースコード

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/06 16:27

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -7,36 +7,6 @@
 ```
 [Rails+Vue.js]~Bookshelf~だけ表示される。
-localhost:5173では
-Failed to load resource: the server responded with a status of 404 (Not Found)
-AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
-code
-:
-"ERR_BAD_REQUEST"
-config
-:
-{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
-message
-:
-"Request failed with status code 404"
-name
-:
-"AxiosError"
-request
-:
-XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
-response
-:
-{data: '', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
-stack
-:
-"AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1187:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1415:7)"
-[[Prototype]]
-:
-Error
 ```
@@ -114,16 +84,18 @@
 ```app/controllers/api/books_controller.rb
 class Api::BooksController < ApplicationController
   def index
-    @book = Book.all
+    books = Book.all
+    render json: books
-    render 'all', formats: 'json', handlers: 'jbuilder'
+    # 質問主さんの書き方の場合、フロント側はbooks.value = res.data.bookで受け取る
+    # render json: {book: books}
   end
   def show
-    @book = Book.find(params[:id])
+    book = Book.find(params[:id])
-  #  render status: 200, json: {book: @book}
+    render json: book
-     render 'show', formats: 'json', handlers: 'jbuilder'
   end
 end
@@ -132,8 +104,7 @@
 ```cors.rb
  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
-     origins "http://localhost:5173"
+     origins "localhost:5173"
      resource "*",
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head]
@@ -145,6 +116,7 @@
 ```frontend/vite-project/src/lib/axios.ts
 import axios from 'axios'
 export default axios.create({
     baseURL: 'http://localhost:3000',
 })
@@ -268,38 +240,10 @@
 ここの部分の情報はありますか？
 とかありましたら記載します。
-アドバイスをもらい、一件rails cで入力してデータベースまでは反映されましたが
-web上には表示されないです。
-```frontend/vite-project/src/lib/axios.ts
-import axios from 'axios'
-export default axios.create({
-    baseURL: 'http://localhost:3000',
-})
-```
-に修正しました。
-```
-docker compose run --rm backend bundle exec rails c
-pry> 20.times do
-  Book.create(
-    title: Faker::Book.title,
-    author: Faker::Book.author,
-    publisher: Faker::Book.publisher,
-    genre: Faker::Book.genre
-  )
-end
-データの確認
-pry> Book.all
-```
-を行いました
-やったコマンド
-```
-docker-compose run backend rails db:seed
-docker-compose run backend rails db:migrate
 ```
 環境は
 https://qiita.com/gabakugik/items/cded7e8aaa014025d8ba

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/04 13:03

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -294,6 +294,7 @@
 データの確認
 pry> Book.all
 ```
+を行いました
 やったコマンド
 ```

Vue.js docker-compose Docker Ruby on Rails 7

修正

2023/09/04 13:02

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,6 @@
 ### 実現したいこと
 APIでたたいたのをVueで表示させたい。
-JSONのデータをブラウザ上で表示させたい。
 ### 発生している問題・エラーメッセージ
@@ -8,16 +8,36 @@
 ```
 [Rails+Vue.js]~Bookshelf~だけ表示される。
-http://localhost:3000/api/books
-を行うと
-No route matches [GET] "/api/books"
-になります
-ルーティングエラーになる。
-jsonのデータが取れてない。
 localhost:5173では
 Failed to load resource: the server responded with a status of 404 (Not Found)
-になる
+AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
+code
+:
+"ERR_BAD_REQUEST"
+config
+:
+{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
+message
+:
+"Request failed with status code 404"
+name
+:
+"AxiosError"
+request
+:
+XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
+response
+:
+{data: '', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
+stack
+:
+"AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1187:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1415:7)"
+[[Prototype]]
+:
+Error
 ```
 ### 該当のソースコード
@@ -86,18 +106,27 @@
 ```config/routes.rb
 Rails.application.routes.draw do
   namespace :api do
-    resources :books, only: [:show]
+    resources :books
   end
 end
 ```
 ```app/controllers/api/books_controller.rb
 class Api::BooksController < ApplicationController
+  def index
+    @book = Book.all
+    render 'all', formats: 'json', handlers: 'jbuilder'
+  end
   def show
     @book = Book.find(params[:id])
+  #  render status: 200, json: {book: @book}
-    render 'show', formats: 'json', handlers: 'jbuilder'
+     render 'show', formats: 'json', handlers: 'jbuilder'
   end
 end
 ```
 ```cors.rb
@@ -120,6 +149,18 @@
     baseURL: 'http://localhost:3000',
 })
 ```
+```main.ts
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+createApp(App).use(router).mount('#app')
+```
 ```package.json
 {
@@ -205,7 +246,7 @@
 };
 const setBookInfo = (id: number) => {
-  axios.get(`api/books/${id}.json`).then((res) => {
+  axios.get(`/api/books/${id}.json`).then((res) => {
     bookInfo.value = res.data;
     bookInfoBool.value = true;
   });
@@ -239,6 +280,21 @@
 ```
 に修正しました。
+```
+docker compose run --rm backend bundle exec rails c
+pry> 20.times do
+  Book.create(
+    title: Faker::Book.title,
+    author: Faker::Book.author,
+    publisher: Faker::Book.publisher,
+    genre: Faker::Book.genre
+  )
+end
+データの確認
+pry> Book.all
+```
 やったコマンド
 ```
 docker-compose run backend rails db:seed

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 08:59

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -15,6 +15,9 @@
 ルーティングエラーになる。
 jsonのデータが取れてない。
+localhost:5173では
+Failed to load resource: the server responded with a status of 404 (Not Found)
+になる
 ```
 ### 該当のソースコード

Vue.js docker-compose Docker Ruby on Rails 7

更新

2023/09/03 08:29

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -7,15 +7,6 @@
 ```
 [Rails+Vue.js]~Bookshelf~だけ表示される。
-irb(main):005:0> Book.find(1)
-  Book Load (0.5ms)  SELECT `books`.* FROM `books` WHERE `books`.`id` = 1 LIMIT 1
-/usr/local/bundle/gems/activerecord-7.0.7/lib/active_record/core.rb:284:in `find': Couldn't find Book with 'id'=1 (ActiveRecord::RecordNotFound)
-irb(main):007:0> Book.all
-  Book Load (0.4ms)  SELECT `books`.* FROM `books`
-=> []
-なんでデータがないんでしょうか？
 http://localhost:3000/api/books
 を行うと

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 08:09

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,6 @@
 ### 実現したいこと
 APIでたたいたのをVueで表示させたい。
-Ruby on Rails+VueでCRUDをやりたいのですが、表示されない。
+JSONのデータをブラウザ上で表示させたい。
 ### 発生している問題・エラーメッセージ

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 08:08

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,7 +22,7 @@
 No route matches [GET] "/api/books"
 になります
 ルーティングエラーになる。
-jsonのデータが取れない。
+jsonのデータが取れてない。
 ```

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 08:08

投稿

gabakugik

スコア13

test CHANGED Viewed

	@@ -1 +1 @@
1	- Vueでrails apiのデータを表示させたい。
1	+ Vueでrails apiのデータを表示させたい

test CHANGED Viewed

@@ -17,41 +17,12 @@
 => []
 なんでデータがないんでしょうか？
-frontend上で開発者モード
-App.vue:45
-GET http://localhost:5173/api/books 404 (Not Found)
-App.vue:50
-AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
-code
-:
-"ERR_BAD_REQUEST"
-config
-:
-{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
-message
-:
-"Request failed with status code 404"
-name
-:
-"AxiosError"
-request
-:
-XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
-response
-:
-{data: '', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
-stack
-:
-"AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1187:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1415:7)"
-[[Prototype]]
-:
-Error
 http://localhost:3000/api/books
 を行うと
 No route matches [GET] "/api/books"
 になります
+ルーティングエラーになる。
+jsonのデータが取れない。
 ```

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 08:00

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -47,6 +47,12 @@
 [[Prototype]]
 :
 Error
+http://localhost:3000/api/books
+を行うと
+No route matches [GET] "/api/books"
+になります
 ```
 ### 該当のソースコード

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 05:23

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,7 +18,10 @@
 なんでデータがないんでしょうか？
 frontend上で開発者モード
+App.vue:45
-Failed to load resource: the server responded with a status of 404 (Not Found)
+GET http://localhost:5173/api/books 404 (Not Found)
+App.vue:50
 AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
 code
 :
@@ -44,7 +47,6 @@
 [[Prototype]]
 :
 Error
-が出てました
 ```
 ### 該当のソースコード

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/03 05:18

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -140,14 +140,14 @@
 ```
-```frontend/src/lib/axios.ts
+```frontend/vite-project/src/lib/axios.ts
 import axios from 'axios'
 export default axios.create({
-    baseURL: 'http://localhost:3000/',
+    baseURL: 'http://localhost:3000',
 })
-```
+```
 ```package.json
 {
   "name": "vite-project",
@@ -257,6 +257,15 @@
 アドバイスをもらい、一件rails cで入力してデータベースまでは反映されましたが
 web上には表示されないです。
+```frontend/vite-project/src/lib/axios.ts
+import axios from 'axios'
+export default axios.create({
+    baseURL: 'http://localhost:3000',
+})
+```
+に修正しました。
 やったコマンド
 ```
 docker-compose run backend rails db:seed

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/02 16:42

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -19,7 +19,31 @@
 frontend上で開発者モード
 Failed to load resource: the server responded with a status of 404 (Not Found)
+AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
+code
+:
+"ERR_BAD_REQUEST"
+config
+:
+{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
+message
+:
+"Request failed with status code 404"
+name
+:
+"AxiosError"
+request
+:
+XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
+response
+:
+{data: '', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
+stack
+:
+"AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1187:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=f429fad1:1415:7)"
+[[Prototype]]
+:
+Error
 が出てました
 ```

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/02 16:19

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,6 +16,11 @@
   Book Load (0.4ms)  SELECT `books`.* FROM `books`
 => []
 なんでデータがないんでしょうか？
+frontend上で開発者モード
+Failed to load resource: the server responded with a status of 404 (Not Found)
+が出てました
 ```
 ### 該当のソースコード

Vue.js docker-compose Docker Ruby on Rails 7

追記

2023/09/02 15:11

投稿

gabakugik

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -225,6 +225,9 @@
 ここの部分の情報はありますか？
 とかありましたら記載します。
+アドバイスをもらい、一件rails cで入力してデータベースまでは反映されましたが
+web上には表示されないです。
 やったコマンド
 ```
 docker-compose run backend rails db:seed