如何使用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 
}