vue.js 和 laravel 5.2，将数据存储到 db

Question

--编辑--

这是现在的工作代码，将其用作您的请求的工作示例，如果要进行任何修改，请发表评论。

--编辑--

我正在尝试构建一个简单的单页寻呼机，其中包含用于消息的联系表。 我对 Laravel 没问题，但对 Vue.js 不熟悉（之前一直在使用 jQuery）。

我在使用以下代码将数据保存到数据库时遇到问题。

我的表格：

{!! Form::open(['method' => 'POST', 'route' => 'contact', '@submit.prevent' => 'sendmessage']) !!}
<div class="form-group animated fadeIn">
    {!! Form::label('name','Name:',['class' => '']) !!}
    {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'Your name', 'v-model' => 'messageData.name']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('mail','E-mail:',['class' => '']) !!}
    {!! Form::text('mail', null, ['class' => 'form-control', 'placeholder' => 'Your e-mail', 'v-model' => 'messageData.mail']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('phone','Phone:',['class' => '']) !!}
    {!! Form::text('phone', null, ['class' => 'form-control', 'placeholder' => 'Your phone number', 'v-model' => 'messageData.phone']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('message','Message:',['class' => '']) !!}
    {!! Form::textarea('message', null, ['class' => 'form-control', 'placeholder' => 'Enter your message', 'v-model' => 'messageData.message']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::submit('Send message', ['class' => 'btn btn-default form-control bold-black']) !!}
</div>
{!! Form::close() !!}

路由（不太确定这个新的中间件网络是做什么的，将感谢链接）：

Route::group(['middleware' => ['web']], function () {
    Route::post('/contact', ['as' => 'contact', 'uses' => 'MessageController@store']);
});

messageController中的Store方法：

public function store(MessageRequest $request)
{
    Message::create($request->all());
    $message = "Message sent succesfully.";
    return $message;
}

消息请求：

public function rules()
{
    return [
        'name' => 'required|min:3',
        'mail' => 'required|email',
        'phone' => '',
        'message' => 'required|min:10',
    ];
}

});

最后是 Vue 组件：

contact: {
    template: '#contact-template',

    data: function() {
        return {
            messageData: {
                name: null,
                mail: null,
                phone: null,
                message: null
            }
        }
    },

    methods: {
        sendmessage: function(messageData) {
            this.$http.post('contact', {messageData:messageData})
                    .then(function() {
                        console.log('success ');
                    })
                    .catch(function() {
                        console.log('error');
                    });
        }
    }
},

这是控制台日志：

POST http://localhost:8080/contact 500 (Internal Server Error)
(anonymous function) @ vue-resource.js:1182
Promise @ vue-resource.js:854
module.exports @ vue-resource.js:1150
module.exports @ vue-resource.js:781
(anonymous function) @ vue-resource.js:1213

error

我还没有在任何地方包含 csrf 令牌，所以这可能是问题所在。我正在为此积极努力，感谢您提供任何帮助。

编辑：

我已经解决了上面的问题： 我没有在标题中导入csrf_token，请将其添加到您的 html 文件的标题中：

<meta id="token" name="token" content="{{ csrf_token() }}">

另外，/ 路由应该转到web 中间件组：

Route::group(['middleware' => ['web']], function () {
    Route::get('/', function () {
        return view('welcome');
    });
    Route::post('/contact', ['as' => 'contact', 'uses' => 'MessageController@store']);
});

但是，我似乎没有发送任何数据来发布请求，因为无论我做什么都会得到输出：

{"name":["The name field is required."],"mail":["The mail field is required."],"message":["The message field is required."]}

这是我对消息模型的验证规则。

EDIT2：（这是最终版本，希望这可以帮助某人作为完整的工作示例，需要做的是在输入字段下添加错误。）

在 Vue 中的联系组件发送方法需要是这样的

        sendmessage: function(messageData) {
            this.$http.post('contact', {name:this.messageData.name,mail:this.messageData.mail,phone:this.messageData.phone,message:this.messageData.message})
                    .then(function() {
                        console.log('success ');
                    })
                    .catch(function() {
                        console.log('error');
                    });
        }

使其与MessageRequest 中的命名一起使用。

Answer 1

正如最后一个花絮，如果你这样做了，你不需要做name:this.messageData.name的事情：

sendmessage: function(messageData) {
        this.$http.post('contact', this.messageData)
                .then(function() {
                    console.log('success ');
                })
                .catch(function() {
                    console.log('error');
                });
    }