如何使用 vue.js（ajax）将数据发送到数据库 [关闭]答案

【问题标题】：how to send data to database with vue.js (ajax) [closed]如何使用 vue.js（ajax）将数据发送到数据库 [关闭]
【发布时间】：2016-08-05 09:06:58
【问题描述】：

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

【问题讨论】：

标签： php laravel vue.js

【解决方案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 应用：

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>

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

干杯

【讨论】：

谢谢你，但你能解释一下如何将这些数据路由到控制器吗？
你可以像在 laravel 中一样创建一个路由。对于我给您的示例，您可以在您的 routes.php 中简单地使用它：Route::post('your-url', [ 'as' => 'any-alias', 'uses' => 'AjaxController@createUser' ]);

【解决方案2】：

你必须安装vue-resource 然后你做：

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

【讨论】：

你的/endpoint.php 是什么？
这是您的端点。