laravel 如何使用 vue.js (ajax) 将数据发送到数据库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38785427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to send data to database with vue.js (ajax)
提问by fvukovic
i'm looking for a tutorial for vue.js where can i send data to database with ajax. I find few examples but there is no explanation. Can somebody write a example and explain it, please? Between, i'm using laravel, can i send data to a controller?
我正在寻找 vue.js 的教程，我可以在哪里使用 ajax 将数据发送到数据库。我找到了几个例子，但没有解释。有人可以写一个例子并解释一下吗？在此之间，我正在使用 laravel，我可以将数据发送到控制器吗？
回答by António Quadrado
Using Laravel, I start by creating a Laravel controller that will handle all the ajax requests (AjaxController.php) doing validations and interacting with the database, normal stuff. It doesn't have to be a dedicated controller though, you can use any controller, I just do it like that to keep things organized to me. In the client side, I declare a method in my vue app or component (depending on the project it can make more sense do it in a more global way or keep it just in some component) to which I pass the data that I want to send to the server. There you can use whatever you want to do the ajax request, pure javascript, jquery or even vue-resource as pointed in the previous answer. I usually use jquery because I happen to have in all of my projects and I'm more familiarized with the syntax but it's really up to you. Here's how I do it,
使用 Laravel，我首先创建一个 Laravel 控制器，该控制器将处理所有 ajax 请求 (AjaxController.php)，执行验证并与数据库交互，这是正常的事情。不过，它不必是专用控制器，您可以使用任何控制器，我只是这样做以使事情井井有条。在客户端，我在我的 vue 应用程序或组件中声明了一个方法（取决于项目，它可以更有意义地以更全局的方式执行或仅将其保留在某个组件中），我将要传递的数据传递给该方法发送到服务器。在那里你可以使用任何你想做的 ajax 请求、纯 javascript、jquery 甚至 vue-resource，如上一个答案中所指出的。我通常使用 jquery，因为我碰巧在我的所有项目中都有使用，而且我更熟悉语法，但这真的取决于你。这里'
Laravel controller:
Laravel 控制器：
<?php
namespace App\Http\Controllers;
class AjaxController extends Controller
{
public function createUser()
{
$data = request('data');
$user = User::create($data);
return 'ok';
}
}
Vue app:
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!');
}
});
}
}
});
and the html:
和 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>
I didn't test this example I just wrote it so don't be surprised if you find any error, but I hope it passed the general idea.
我没有测试这个例子我只是写了它所以如果你发现任何错误不要感到惊讶，但我希望它通过了一般的想法。
Cheers
干杯
回答by gurghet
You have to install vue-resourcethen you do:
你必须安装vue-resource然后你做：
this.$http.post('your/endpoint.php', {some: data}).then(response => {
// something to do with your response
}
