質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

Ajaxで500 (Internal Server Error)が発生

nanashi-_.eng05
nanashi-_.eng05

総合スコア35

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

2回答

0評価

0クリップ

563閲覧

投稿2022/01/24 11:40

Laravel 初心者です。こういったところに質問するのは初めてです。
至らぬ点あるかと思いますが、よろしくお願いいたします。

https://blog.capilano-fw.com/?p=7341」 を参照し、LaravelとAjaxでレビュー機能の実装を行っていました。
https://blog.capilano-fw.com/?p=7341#i-6」 のビューを作るまではよかったのですが、
レビューを送信するとコンソールログに「500 (Internal Server Error)」が発生してしまいます。onSubmit(productId){}にて送信失敗の際に「入力内容が正しくありません。」というアラートの表示処理をしていますが、それが表示されてしまう状態です。(下記コードで★マークがついている部分です)
さらに詳しく見ると、spread.js(blade上に記述していない。自動的に付与されている?)とvue.min.jsにエラーが出ているようなのですが、対処方法がわかりませんでした。
記事のにあるデータをダウンロードしてテストしたり、こちらで同じエラーが出ている人の質問を確認したのですが、送信ができませんでした。

お力添えいただければと思います。

イメージ説明

作業していた環境: Windows10 XAMPP Laravel 8

web.php ↓

Route::get('product',[ProductController::class, 'index']); Route::get('product/list',[ProductController::class, 'list']); Route::post('product/review',[ProductController::class, 'review']);

\resources\views\product\index.blade.php↓

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body class="antialiased"> <div id="app" class="p-3"> <h1 class="mb-3">レビュー(星&コメント)機能・サンプル</h1> <table class="table table-bordered mt-4"> <thead class="bg-info text-white"> <tr> <th>ID</th> <th>商品名</th> <th>レビュー</th> </tr> </thead> <tbody> <!-- 商品データをリスト表示・・・ ① --> <tr v-for="p in products"> <td v-text="p.id"></td> <td v-text="p.name"></td> <td> <a href="#" type="button" v-if="!hasMyReview(p.reviews)" @click.prevent="openReviewForm(p.id)"> レビューを投稿 </a> <!-- レビューをリスト表示 ・・・ ② --> <div v-for="r in p.reviews"> <div class="p-3 bg-light mt-2"> <span class="font-weight-bold" v-text="r.user.name"></span> <v-star :value="r.stars"></v-star> <div class="text-break mt-1" style="white-space:pre;" v-text="r.comment"></div> </div> </div> </td> </tr> </tbody> </table> <!-- レビュー投稿のモーダル ・・・ ③ --> <div class="modal fade" id="review-modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="review-modalLabel">&#x1F4AC; レビューの投稿</h5> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <h4>スター</h4> <div v-for="star in [5,4,3,2,1]"> <input v-model="reviewParams.stars" type="radio" :value="star"> <v-star :value="star"></v-star> </div> </div> <div class="form-group"> <h4>コメント</h4> <textarea class="form-control" v-model="reviewParams.comment"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-link mr-2" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-warning" @click="onSubmit">登録する</button> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script> // 星を表示するコンポーネント ・・・ ④ Vue.component('v-star', { props: ['value'], template: '<span><span v-for="number in parseInt(value)">&#x2B50;</span></span>' }); new Vue({ el: '#app', data: { userId: parseInt('{{ auth()->user()->id ?? -1 }}'), // ログイン・ユーザーID ・・・ ⑤ products: [], reviewParams: { product_id: '', stars: '', comment: '' } }, methods: { getProducts() { axios.get('/product/list') .then(response => { this.products = response.data; }); }, openReviewForm(productId) { this.reviewParams = { product_id: productId, stars: '', comment: '' }; $('#review-modal').modal('show'); }, hasMyReview(reviews) { // すでに投稿済みかどうかのチェック ・・・ ⑥ for(let review of reviews) { if(this.userId === parseInt(review.user_id)) { return true; } } return false; }, onSubmit(productId) { axios.post('/product/review', this.reviewParams) // 成功 .then(response => { if(response.data.result === true) { this.getProducts(); $('#review-modal').modal('hide'); } }) // 失敗 .catch(error => { // エラー処理 alert('入力内容が正しくありません。'); ★これが出力されてしまう console.log(error); }); } }, mounted() { this.getProducts(); } }); </script> </body> </html>

\app\Http\Controllers\ProductController.php ↓

namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Product; class ProductController extends Controller { /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('auth'); } /** * Show the application dashboard. * * @return \Illuminate\Contracts\Support\Renderable */ public function index(){ return view('product.index'); } public function list(){ return \App\Models\Product::with('reviews.user')->get(); } public function review(Request $request) { $result = false; // バリデーション $request->validate([ 'product_id' => [ 'required', 'exists:products,id', function($attribute, $value, $fail) use($request) { // ログインしてるかチェック if(!auth()->check()) { $fail('レビューするにはログインしてください。'); return; } // すでにレビュー投稿してるかチェック $exists = \App\Models\ProductReview::where('user_id', $request->user()->id) ->where('product_id', $request->product_id) ->exists(); if($exists) { $fail('すでにレビューは投稿済みです。'); return; } } ], 'stars' => 'required|integer|min:1|max:5', 'comment' => 'required' ]); $review = new \App\Models\ProductReview(); $review->product_id = $request->product_id; $review->user_id = $request->user()->id; $review->stars = $request->stars; $review->comment = $request->comment; $result = $review->save(); return ['result' => $result]; } }

\app\Models\Product.php ↓

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Product extends Model { // リレーションシップ return $this->hasMany(\App\Models\ProductReview::class, 'product_id', 'id'); } }

\app\Models\ProductReview.php ↓

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class ProductReview extends Model { // リレーションシップ public function user() { return $this->belongsTo(\App\Models\User::class, 'user_id', 'id') ->select('id', 'name'); } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。