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中存储方法：

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

MessageRequest：

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联系人组件中，send方法需要如下所示

        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');
                });
    }

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

1 个答案: