Q&A
>Ajaxを使っていたので表示されなかったのですね。
PHP側のエラー表示をONにすればそのエラーメッセージが「出力」になるので画面側で断片でも返ってくると思います。(Laravel側で抑制してるかもしれませんが)
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">💬 レビューの投稿</h5> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</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)">⭐</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'); } }
回答2件
0
ベストアンサー
サーバー側のエラーログを確認してみてください。
500エラーの原因は多岐に渡るのですが、多くがアプリケーション側で問題が起きています。
何が起きているかはエラーログを見て確認する必要があります。
（特にAjaxなど非同期通信などは画面に出ないのでサーバー側でのログ確認、デバッグの仕組みは必須です）
投稿2022/01/24 11:53
総合スコア80888
0
返信遅くなり、すみません。
無事解決しました！
php.iniでエラーログの出力設定をして確認しましたが、php_error_logは空の状態。
Apacheのアクセスログ、エラーログにもそれらしいのがなかったため、
laravelの「storage\logs\laravel.log」を確認して、以下のエラーを発見しました。
[2022-01-25 14:23:37] local.ERROR: SQLSTATE[HY000]: General error: 1364 Field 'id' doesn't have a default value (SQL: insert into `product_reviews` (`product_id`, `user_id`, `stars`, `comment`, `updated_at`, `created_at`) values (2, 2, 3, rr, 2022-01-25 14:23:37, 2022-01-25 14:23:37)) {"userId":2,"exception":"[object] (Illuminate\\Database\\QueryException(code: HY000): SQLSTATE[HY000]: General error: 1364 Field 'id' doesn't have a default value (SQL: insert into `product_reviews` (`product_id`, `user_id`, `stars`, `comment`, `updated_at`, `created_at`) values (2, 2, 3, rr, 2022-01-25 14:23:37, 2022-01-25 14:23:37)) at C:\\xampp\\htdocs\\laravelapp\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:692)
対象のテーブルのidに「AUTO_INCREMENT」を追加したら無事送信ができました！
コントローラーやblade上のやり取りだと、ページ上にこのエラーが表示されることがありましたが、
Ajaxを使っていたので表示されなかったのですね。
大変勉強になりました。
テーブル作成をやるといつもここを忘れてしまうので、気を付けたいと思います。
ご回答ありがとうございました！
投稿2022/01/25 14:55
総合スコア35
>PHP側のエラー表示をONにすればそのエラーメッセージが「出力」になる
php.iniのほかにhttpd.conf、.htaccess、error_reporting、ini_set()があるんですね。
これらのことを指していると思ってよいですか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/25 14:56
2022/01/25 20:27
2022/01/26 14:39