Question

我正在使用Laravel和Vue进行我正在从事的项目。在我的仪表板中，我正在使用BootstrapVue的数据表B-table，该数据表从我的API接收JSON数据。

该API当前仅返回1个用户，但是即使只有1行，也需要花费一些时间来加载它。我创建了此GIF，以显示刷新网页时的加载时间：

我正在使用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>

我的API返回的JSON数据：

[
    {
        "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"
    }
]

如何解决此加载时间问题？

更新：我将其托管在VirtualBox中的Ubuntu上，也许对你们中的每个人都很重要。

更新对我的API的请求的响应时间：

Answer 1

从您在帖子中的评论中，我想您已经弄清楚了什么错？也就是说，您的VirtualBox设置有些时髦吗？

我克隆了您的应用程序，只花了88毫秒将其加载到我的Mac上。

顺便说一句，您的代码并没有立即可用。必须修复并绕过几件事才能使其运行。我还建议您安装laravel-debugbar来帮助在laravel中进行调试。

在Datatable中加载JSON数据需要太长时间

1 个答案: