Question

我正在寻找vue.js的教程，我可以在哪里用ajax将数据发送到数据库。我找到的例子很少，但没有解释。有人可以写一个例子并解释一下吗？在我之间，我使用laravel，我可以将数据发送到控制器吗？

Answer 1

使用Laravel，我首先创建一个Laravel控制器，它将处理所有执行验证并与数据库交互的ajax请求（AjaxController.php），这是正常的事情。它不一定是一个专用的控制器，你可以使用任何控制器，我只是这样做，以保持组织有序。在客户端，我在我的vue应用程序或组件中声明了一个方法（取决于项目，它可以更有意义地以更全局的方式进行，或者只保留在某个组件中），我将所需的数据传递给它发送到服务器。在那里你可以使用任何你想做的ajax请求，纯javascript，jquery甚至vue-resource，如前面的答案所指出的那样。我经常使用jquery，因为我碰巧在我的所有项目中都有，并且我对语法更熟悉，但它真的取决于你。这是我如何做到的，

Laravel控制器：

<?php

namespace App\Http\Controllers;

class AjaxController extends Controller
{

    public function createUser()
    {
        $data = request('data');

        $user = User::create($data);

        return 'ok';
    }    
}

Vue app：

var app = new Vue({
            el: '#app',
            data: {
                name: '',
                age: '',
                country: ''
            },
            methods: {
                sendViaAjax: function(){
                    var data = {
                        '_token': yourCrsfToken,
                        'name': this.name,
                        'age': this.age,
                        'country': this.country 
                    };
                    $.ajax({
                        url: '/your-url',
                        method: 'POST',
                        data: data,
                        success: function(){

                            console.log('We did succeed!');
                        },
                        error: function(){
                            console.log('We did not succeed!');
                        }
                    });
                }
            }
});

和html：

<div id='app'>
    <label for="user-name">Name</label>
    <input type="text" id="user-name" v-model="name" value="@{{ name }}">
    <label for="user-age">Age</label>
    <input type="text" id="user-age" v-model="age" value="@{{ age }}">
    <label for="user-country">Country</label>
    <input type="text" id="user-country" v-model="country" value="@{{ country }}">
</div>

我没有测试这个例子我只是写了它，所以如果你发现任何错误不要感到惊讶，但我希望它能超越一般的想法。

干杯

Answer 2

您必须安装vue-resource，然后执行以下操作：

this.$http.post('your/endpoint.php', {some: data}).then(response => {
  // something to do with your response
}

如何使用vue.js（ajax）将数据发送到数据库

2 个答案: