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

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的应用：

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 
}