Laravel8.xを使っています。room周りの挙動は問題ないので、reservation関連、そしてLaravel、サーバーサイド関連のエラーなのはエラーメッセージ
Failed to load resource: the server responded with a status of 500 (Internal Server Error) isAxiosError.js:10 Uncaught (in promise) Error: Request failed with status code 500 at e.exports (isAxiosError.js:10) at e.exports (isAxiosError.js:10) at XMLHttpRequest.l.onreadystatechange (isAxiosError.js:10)
で分かるのですが、axiosとの連携がうまくいきません。https://blog.capilano-fw.com/?p=9269ここのサイトを見てやっています。
・やったこと
➀http://127.0.0.1:8000/reservation/reservation_list ここにアクセスして
{"reservations":[]}
これが返されていて、axiosが?Laravelでjson形式が返せていないことが確認出来た。
➁web.phpのControllers関連のコードを8.0からフルパスが必要?と見たのでApp\Http\Controllers\ReservationController::classこのようにReservationControllerより上の階層も記述した。
➂RouteServiceProvider.phpの```ここに言語を入力
protected $namespace = 'App\Http\Controllers';これをコメントアウトして使えるようにした。
➃indexアクションが機能していて他が機能していないので、マイグレーションなどのエラーではないことの確認をした。
どうかよろしくお願い致します。
Reservation.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Reservation extends Model { use HasFactory; }
web.php
1<?php 2 3 4use Illuminate\Support\Facades\Route; 5use App\Http\Controllers\ReservationController; 6 7/* 8|-------------------------------------------------------------------------- 9| Web Routes 10|-------------------------------------------------------------------------- 11| 12| Here is where you can register web routes for your application. These 13| routes are loaded by the RouteServiceProvider within a group which 14| contains the "web" middleware group. Now create something great! 15| 16*/ 17 18Route::get('/', function () { 19 return view('welcome'); 20}); 21 22Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () { 23 return view('dashboard'); 24})->name('dashboard'); 25 26Route::prefix('reservation')->middleware('auth:sanctum')->group(function(){ 27Route::get('/', [App\Http\Controllers\ReservationController::class, 'index'])->name('reservation.index'); 28Route::get('/reservation_list', [App\Http\Controllers\ReservationController::class, 'reservation_list'])->name('reservation.reservation_list'); 29 30 Route::post('/', [App\Http\Controllers\ReservationController::class, 'store'])->name('reservation.store'); 31});
ReservationController.php <?php namespace App\Http\Controllers; use App\Models\Reservation; use App\Models\Room; use Illuminate\Http\Request; class ReservationController extends Controller { public function index(){ $rooms = Room::select('id', 'name', 'time_steps')->get(); return view('reservation.index')->with([ 'rooms'=> $rooms ]); } public function store(Request $request){ $reservation = new Reservation(); $reservation->user_id = auth()->id(); $reservation->room_id = $request->room_id; $reservation->starts_at = $request->start_at; $result = $reservation->save(); return ['result' => $result]; } public function reservation_list(Request $request){ $reservations = Reservation::select('id', 'room_id', 'starts_at')->whereDate('starts_at', $request->date)->get(); return [ 'reservations' => $reservations ]; } }
index.blade.php
<html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div id="app"> <div class="p-3"> <div class="btn-group mb-4"> <button type="button" class="btn btn-outline-secondary" @click="moveDate(-1)"><</button> <button type="button" class="btn btn-outline-secondary" v-text="date"></button> <button type="button" class="btn btn-outline-secondary" @click="moveDate(1)">></button> </div> <div class="mb-5" v-for="room in rooms"> <h4> <span class="badge rounded-pill bg-info text-dark" v-text="room.name">Info</span> </h4> <div v-for="hours in allHours"> <div class="row"> <div class="col-auto pr-5 py-2" > <span v-text="getPaddedNumber(hours)">時</span> </div> <div class="col-auto p-2" v-for="minutes in room.time_step_values"> <button class="btn btn-outline-dark" data-toggle="tooltip" :title="getTimeRange(hours, minutes, room.time_steps)" v-text="getPaddedNumber(minutes)" :disabled="!isReservationAvailable(room.id, hours, minutes)" @click="reserve(room.id, hours, minutes)"> </button> </div> </div> </div> </div> </div> </div> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.prod.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.27.0/luxon.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> Vue.createApp({ data(){ return{ reservations: [], allHours: [], dt: null, rooms: @json($rooms) } }, methods: { getReservations(){ const date = this.dt.toFormat('yyyy-MM-dd'); const url = '{{ route('reservation.reservation_list')}}?date='+date; axios.get(url) .then(response =>{ this.reservations = response.data.reservations; }); }, getPaddedNumber(number){ return number.toString().padStart(2, '0'); }, getTimeRange(hours, minutes, timeSteps){ const startDt = this.dt.set({ hours: hours, minutes: minutes }) const endDt = startDt.plus({ minutes: timeSteps}); return startDt.toFormat('H:mm') + ' ~ ' + endDt.toFormat('H:mm') + ' のご予約'; }, isReservationAvailable(roomId, hours, minutes){ //現在から日にち時点の00秒に移動 const today = luxon.DateTime.now().startOf('day'); if(this.dt < today){ return false; } const dt = this.dt.set({ hours: hours, minutes: minutes }) const startsAt = dt.toFormat('yyyy-MM-dd HH:mm:00'); const hasReservation = this.reservations.some(reservation => { return( parseInt(reservation.room_id) === parseInt(roomId) && reservation.starts_at ===startsAt ) }); return !hasReservation; }, moveDate(days){ this.dt = this.dt.plus({ days: days }); }, reserve(roomId, hours, minutes){ if(confirm('予約します。よろしいでしょうか?')){ const dt = this.dt.set({ hours: hours, minutes: minutes }); const url = '{{ route('reservation.store')}}'; const params = { room_id: roomId, start_at: dt.toFormat('yyy-MM-dd HH:mm') }; axios.post(url, params) .then(response =>{ if(response.data.result === true){ this.getReservations(); } }); } } }, computed: { date(){ if(this.dt){ return this.dt.toFormat('yyyy/MM/dd'); } return ''; } }, watch: { dt(){ this.getReservations(); } }, mounted(){ for(let i = 0 ; i < 24 ; i++){ this.allHours.push(i); } this.dt = luxon.DateTime.now().startOf('day'); Vue.nextTick(() =>{ $('[data-toggle="tooltip') . tooltip({ placement: 'right' }); }); } }) .mount('#app'); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー