35 درصد تخفیف ویژه تابستان دوره‌های نقدی و عضویت ویژه راکت

اطلاعات بیشتر
bardia
4 سال پیش توسط bardia مطرح شد
18 پاسخ

بازیابی داده با 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">

لاراول
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
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.

مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش آپدیت شد
2

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش آپدیت شد
1

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
1

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


مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش مطرح شد
1

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
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)

bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
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');

مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش مطرح شد
2

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش آپدیت شد
1

@haghft

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

        <script>
            window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>

bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
1

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


مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش مطرح شد
1

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
1

@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)

مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش مطرح شد
1

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
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');
}

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
1

@haghft

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


bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش آپدیت شد
1

@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

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


مهدی طهرانی
تخصص : cloud architect
@mtehrani 4 سال پیش مطرح شد
1

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

<meta name="csrf-token" content="{{ csrf_token() }}">

bardia
تخصص : Golang/Laravel
@mrbardia72 4 سال پیش مطرح شد
1

@haghft

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

TokenMismatchException

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام