Laravel 5.5 + Vue.js 2.x 正确的 API 请求

Question

我正在本地开发一个 Laravel 5.5 项目，该项目使用 Vue.js 2.5.9 和 XAMP 服务器。

我必须将一些信息加载到 DOM 并在单击“刷新”按钮时刷新它。

有时信息加载并显示良好，但有时却没有（一些回复是）：

Error 429: { "message": "Too Many Attempts." }

Error 500: { "message": "Server Error." }

我设法通过增加 Kernel.php 中的中间件限制来“解决”第一个问题（错误 429） 'throttle:60,1', 到 100,1)

但是第二个错误我不确定为什么我有时能得到它有时不能。

我的API控制器中有这个（例如）：

public function users()
{
    $users = User::all();

    return response()->json($users);
}

然后在app.js中我调用创建的钩子中的方法是这样的：

const app = new Vue({
    el: '#app',
    data: {
        ...
        totalUsers: 0,
        ...
    },
    created: function() {
        ...
        this.loadUsers();
        ...
    },
    methods: {
        ...
        loadUsers: function() {
        axios.get('/api/admin/users')
            .then(function (response) {
                app.totalUsers = response.data.length;
            });
        },
        refreshData: function() {
            this.loadUsers():
        },
        ...
    }
});

也许我应该将 $users = User::all() 替换为 $users = User::count() 以避免在 API 请求中加载“太多数据”？

Answer 1

我认为你应该在你的 vue 中使用 mounted() 而不是 created()。

const app = new Vue({
    el: '#app',
    data: {
        ...
        totalUsers: 0,
        ...
    },
    mounted: function() {
        ...
        this.loadUsers();
        ...
    },
    methods: {
        ...
        loadUsers: function() {
        axios.get('/api/admin/users')
            .then(function (response) {
                app.totalUsers = response.data.length;
            });
        },
        refreshData: function() {
            this.loadUsers():
        },
        ...
    }
});

这相当于 jQuery 中的 $(document).on(ready)。这就是 window 完全加载时触发的方法。

附带说明，Laravel 知道它何时返回 json 作为 ajax 响应，因此您可能只需将控制器方法修改为此

public function users()
{
    return User::all();
}

Laravel 5.5 + Vue.js 2.x 正确的 API 请求

Laravel 5.5 + Vue.js 2.x Proper API requests

javascript

php

laravel

vue.js

axios