Загрузка данных JSON в Datatable занимает слишком много времени - PullRequest
Новая
       24

Загрузка данных JSON в Datatable занимает слишком много времени

0 голосов
/ 06 ноября 2018

Я использую Laravel и Vue для проекта, над которым я работаю. В моей панели инструментов я использую таблицу данных BootstrapVue с именем B-table, которая получает данные JSON от моего API.

API в настоящее время возвращает только 1 пользователя, однако для его загрузки требуется некоторое время, даже если это всего лишь 1 строка. Я создал этот GIF-файл, чтобы показать время загрузки при обновлении веб-страницы:

enter image description here

Я использую Axios для получения данных от моего API, мне очень любопытно, почему это происходит так медленно. Вот мой код: 

<template>
    <div>
        <div id="main-wrapper" class="container">
            <div class="row">
                <div class="col-md-12">
                    <hr>
                    <b-table busy.sync="true" show-empty striped hover responsive :items="users" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage" @refreshed="verfris">
                        <template slot="actions" slot-scope="data">
                            <a class="icon" href="#"><i class="fas fa-eye"></i></a>
                            <a class="icon" href="#"><i class="fas fa-pencil-alt"></i></a>
                            <a class="icon"><i class="fas fa-trash"></i></a>
                        </template>
                    </b-table>
                    <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0 pagination-sm" />
                </div>

            </div>

        </div>
    </div>
</template>
<script>
    export default {

        data() {
            return {
                users: [],
                filter: null,
                currentPage: 1,
                perPage: 10,
                totalRows: null,
                selectedID: null,
                fields: [
                    {
                        key: 'id',
                        sortable: true
                    },
                    {
                        key: 'name',
                        sortable: true
                    },
                    {
                        key: 'email',
                        sortable: true
                    },
                    {
                        key: 'actions'
                    }

                ],
            }
        },
        mounted() {
            this.getResults();
        },
        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults(ctx, callback) {
                axios.get('/api/users')

                    .then(response => {
                        this.users = response.data;
                        this.totalRows = response.data.length;
                        return this.users;
                    });
            }
        },

    }
</script>

И данные JSON, которые возвращает мой API: 

[
    {
        "id": 1,
        "name": "test",
        "email": "user@user.nl",
        "email_verified_at": null,
        "created_at": "2018-09-28 16:04:36",
        "updated_at": "2018-09-28 16:04:36"
    }
]

Что я могу сделать, чтобы решить эту проблему времени загрузки?

ОБНОВЛЕНИЕ: я размещаю его на Ubuntu в VirtualBox, возможно, это будет важно для любого из вас, ребята.

ОБНОВЛЕНИЕ Время ответа на запрос к моему API:

enter image description here

1 Ответ

0 голосов
/ 13 ноября 2018

Из вашего комментария в посте, я думаю, вы уже поняли, что не так? что-то не так в вашей настройке VirtualBox?

Я клонировал ваше приложение, и загрузка моего Mac заняла всего 88 мс. Proof

Кстати, ваш код не работает из коробки. Пришлось исправить и обойти пару вещей, чтобы заставить его работать. Я бы также предложил вам установить laravel-debugbar , чтобы помочь с отладкой в ​​laravel.

...