سلام دوستان این فایل create.vue من هست برای بازیابی یه سری داده از پایگاه داده اما چیزی رو نشون نمیده
<template>
<div>
<h1>Items</h1>
<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2">
<router-link :to="{ name: 'CreateItem' }" class="btn btn-primary">Create Item</router-link>
</div>
</div><br />
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Item Name</td>
<td>Item Price</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><router-link :to="{name: 'EditItem', params: { id: item.id }}" class="btn btn-primary">Edit</router-link></td>
<td><button class="btn btn-danger" v-on:click="deleteItem(item.id)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
کد جاوااسکریپت
<script>
export default {
data(){
return{
items: []
}
},
created: function()
{
this.fetchItems();
},
methods: {
fetchItems()
{
let uri = 'http://localhost:8000/items';
this.axios.get(uri).then((response) => {
this.items = response.data;
});
},
deleteItem(id)
{
let uri = `http://localhost:8000/items/${id}`;
this.items.splice(id, 1);
this.axios.delete(uri);
}
}
}
</script>
توی vscodeخط زیر رو قرمز رنگ نشون میده
نمیدونم مشکلش چیه
<tr v-for="item in items">
اینم پیغامی هست که توی console مرورگر دریافت کردم
ailed to load http://localhost:8000/items: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.
@sj10ss
قضیه crossorigin هست از پکیج laravel-cors استفاده کنید
https://packalyst.com/packages/package/barryvdh/laravel-cors
@sj10ss
کد کنترلر و روتینگ رو هم میتونید بزارید تا ببینیم مشکل چیه؟
یه نکته دیگه شما وقتی میزنید روی یکی از اون عملیات و کار نمیکنه کنسول رو چک کنید ببنید اروری میده یا نه؟ چه اروری میده؟
این خطا رو میده توی کنسول
@haghft
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
app.js:798 Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:798)
at settle (app.js:13955)
at XMLHttpRequest.handleLoad (app.js:672)
@haghft
این کد کنترلر
class ItemController extends Controller
{
public function index()
{
$items = Item::all();
return response()->json($items);
}
public function store(Request $request)
{
$item=Item::create([
'name' => $request->name,
'price' => $request->price
]);
$item->save();
return response()->json('Successfully added');
}
public function edit($id)
{
$item = Item::find($id);
return response()->json($item);
}
public function update(Request $request, $id)
{
$item = Item::find($id);
$item->name = $request->get('name');
$item->price = $request->get('price');
$item->save();
return response()->json('Successfully Updated');
}
public function destroy($id)
{
$item = Item::find($id);
$item->delete();
return response()->json('Successfully Deleted');
}
}
این کد روت
Route::resource('items', 'ItemController');
@sj10ss
دوست عزیز شما مشکلتون سمت سروره
اولین نکته شما باید سمت کلاینت csrf token رو بزارید
https://laravel.com/docs/master/csrf
دومین نکته اینکه شما یکی کاری کنید در کروم، کنسول رو باز کنید برید به تب network بعد مثلا روی دکمه اضافه کردن کلیک کنید بعد نگاه کنید توی تب network اون روت مربوط قرمز داداه نشون میشه روش کلیک کنید و روی تب preview کلیک کنید اونجا دقیق توضیح میده مشکل کجاست
این csrf token رو توی فایل welcome.blade.php اضافه کردم به صورت زیر
باید طور دیگه اضافه کنم؟؟
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
این خطا رو توی قسمت preview نشون میده
Whoops, looks like something went wrong.
(1/1) TokenMismatchException
in VerifyCsrfToken.php (line 68)
at VerifyCsrfToken->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in ShareErrorsFromSession.php (line 49)
at ShareErrorsFromSession->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in StartSession.php (line 64)
at StartSession->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in AddQueuedCookiesToResponse.php (line 37)
at AddQueuedCookiesToResponse->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in EncryptCookies.php (line 59)
at EncryptCookies->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in Pipeline.php (line 102)
at Pipeline->then(object(Closure))
in Router.php (line 576)
at Router->runRouteWithinStack(object(Route), object(Request))
in Router.php (line 535)
at Router->dispatchToRoute(object(Request))
in Router.php (line 513)
at Router->dispatch(object(Request))
in Kernel.php (line 176)
at Kernel->Illuminate\Foundation\Http\{closure}(object(Request))
in Pipeline.php (line 30)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in HandleCors.php (line 58)
at HandleCors->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in TransformsRequest.php (line 30)
at TransformsRequest->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in TransformsRequest.php (line 30)
at TransformsRequest->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in ValidatePostSize.php (line 27)
at ValidatePostSize->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in CheckForMaintenanceMode.php (line 46)
at CheckForMaintenanceMode->handle(object(Request), object(Closure))
in Pipeline.php (line 148)
at Pipeline->Illuminate\Pipeline\{closure}(object(Request))
in Pipeline.php (line 53)
at Pipeline->Illuminate\Routing\{closure}(object(Request))
in Pipeline.php (line 102)
at Pipeline->then(object(Closure))
in Kernel.php (line 151)
at Kernel->sendRequestThroughRouter(object(Request))
in Kernel.php (line 116)
at Kernel->handle(object(Request))
in index.php (line 53)
at require_once('C:\\laragon\\www\\LaravelVueJSCRUD\\public\\index.php')
in server.php (line 21)
@sj10ss
خب پس همون حدس اولم درست بود شما مشکل csrf token دارید
شما سرچ کنید با vue چطور باید csrf رو پاس بدین به سرور
@haghft
سرچ کردم
چنین چیزی گفتن که توی فایل اصلی master به صورت زیر
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
توی فایل bootstarp.jsبه صورت زیر
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
اما باز اعمال نمیشه
توی laracast هم بهش اشاره شده به صورت زیر
اما باز جواب نمیده
https://laracasts.com/discuss/channels/vue/handle-tokenmismatchexception-in-vue
زمانی که من npm run dev روتوی ترکینال میزنم
خطای زیر رو بهم میده
95% emitting
ERROR Failed to compile with 4 errors 5:03:09 PM
These relative modules were not found:
* ./App.vue in ./resources/assets/js/app.js
* ./components/CreateItem.vue in ./resources/assets/js/app.js
* ./components/DisplayItem.vue in ./resources/assets/js/app.js
* ./components/EditItem.vue in ./resources/assets/js/app.js
دقیقا مشکل از کجاست. متوجه نمیشم
@sj10ss
این کد رو توی head فایل blade اصلیتون بزارید
<meta name="csrf-token" content="{{ csrf_token() }}">
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟