بازیابی داده با vuejs و laravel
سلام دوستان این فایل 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">گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
1
اینم پیغامی هست که توی 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.
گزارش تخلف
کپی کردن
2
@sj10ss
قضیه crossorigin هست از پکیج laravel-cors استفاده کنید
https://packalyst.com/packages/package/barryvdh/laravel-cors
گزارش تخلف
کپی کردن
1
گزارش تخلف
کپی کردن
1
گزارش تخلف
کپی کردن
1
@sj10ss
کد کنترلر و روتینگ رو هم میتونید بزارید تا ببینیم مشکل چیه؟
یه نکته دیگه شما وقتی میزنید روی یکی از اون عملیات و کار نمیکنه کنسول رو چک کنید ببنید اروری میده یا نه؟ چه اروری میده؟
گزارش تخلف
کپی کردن
1
این خطا رو میده توی کنسول
@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)
گزارش تخلف
کپی کردن
1
@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');
گزارش تخلف
کپی کردن
2
@sj10ss
دوست عزیز شما مشکلتون سمت سروره
اولین نکته شما باید سمت کلاینت csrf token رو بزارید
https://laravel.com/docs/master/csrf
دومین نکته اینکه شما یکی کاری کنید در کروم، کنسول رو باز کنید برید به تب network بعد مثلا روی دکمه اضافه کردن کلیک کنید بعد نگاه کنید توی تب network اون روت مربوط قرمز داداه نشون میشه روش کلیک کنید و روی تب preview کلیک کنید اونجا دقیق توضیح میده مشکل کجاست
گزارش تخلف
کپی کردن
1
این csrf token رو توی فایل welcome.blade.php اضافه کردم به صورت زیر
باید طور دیگه اضافه کنم؟؟
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
گزارش تخلف
کپی کردن
1
گزارش تخلف
کپی کردن
1
گزارش تخلف
کپی کردن
1
این خطا رو توی قسمت 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)
گزارش تخلف
کپی کردن
1
@sj10ss
خب پس همون حدس اولم درست بود شما مشکل csrf token دارید
شما سرچ کنید با vue چطور باید csrf رو پاس بدین به سرور
گزارش تخلف
کپی کردن
1
@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');
}
اما باز اعمال نمیشه
گزارش تخلف
کپی کردن
1
توی laracast هم بهش اشاره شده به صورت زیر
اما باز جواب نمیده
https://laracasts.com/discuss/channels/vue/handle-tokenmismatchexception-in-vue
گزارش تخلف
کپی کردن
1
زمانی که من 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دقیقا مشکل از کجاست. متوجه نمیشم
گزارش تخلف
کپی کردن
1
@sj10ss
این کد رو توی head فایل blade اصلیتون بزارید
<meta name="csrf-token" content="{{ csrf_token() }}">
گزارش تخلف
کپی کردن
1