آفلاین
user-avatar

بازیابی داده با vuejs و laravel

2 سال پیش
توسط bardia آپدیت شد
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/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">
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

اینم پیغامی هست که توی 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.
آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
قضیه crossorigin هست از پکیج laravel-cors استفاده کنید
https://packalyst.com/packages/package/barryvdh/laravel-cors

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft
سپاس فراوان
فقط عملیات اضافه کردن و حذف و ویرایش رو انجام نمیده

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft
داده ها رو واکشی میکنه اما
نمیزاره من داده ای حذف کنم یا ویرایش یا اضافه کنم

آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
کد کنترلر و روتینگ رو هم میتونید بزارید تا ببینیم مشکل چیه؟
یه نکته دیگه شما وقتی میزنید روی یکی از اون عملیات و کار نمیکنه کنسول رو چک کنید ببنید اروری میده یا نه؟ چه اروری میده؟

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

این خطا رو میده توی کنسول
@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)
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@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');
آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
دوست عزیز شما مشکلتون سمت سروره
اولین نکته شما باید سمت کلاینت csrf token رو بزارید
https://laravel.com/docs/master/csrf
دومین نکته اینکه شما یکی کاری کنید در کروم، کنسول رو باز کنید برید به تب network بعد مثلا روی دکمه اضافه کردن کلیک کنید بعد نگاه کنید توی تب network اون روت مربوط قرمز داداه نشون میشه روش کلیک کنید و روی تب preview کلیک کنید اونجا دقیق توضیح میده مشکل کجاست

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft

این csrf token رو توی فایل welcome.blade.php اضافه کردم به صورت زیر
باید طور دیگه اضافه کنم؟؟

        <script>
            window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft
توی تب network چیزی بهم نشون داده نمیشه

آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
تب نت ورک رو قبل اینکه کلیلک کنید روی دکمه اضافه کردن باید باز باشه

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft

این خطا رو توی قسمت 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)
آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
خب پس همون حدس اولم درست بود شما مشکل csrf token دارید
شما سرچ کنید با vue چطور باید csrf رو پاس بدین به سرور

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@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');
}

اما باز اعمال نمیشه

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft

توی laracast هم بهش اشاره شده به صورت زیر
اما باز جواب نمیده
https://laracasts.com/discuss/channels/vue/handle-tokenmismatchexception-in-vue

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft

زمانی که من 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

دقیقا مشکل از کجاست. متوجه نمیشم

آفلاین
user-avatar
مهدی طهرانی ( 18476 تجربه )
2 سال پیش
تخصص : cloud architect

@sj10ss
این کد رو توی head فایل blade اصلیتون بزارید

<meta name="csrf-token" content="{{ csrf_token() }}">
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@haghft

بارم همون خطا رو داد

TokenMismatchException
برای ارسال پاسخ باید وارد سایت شوید