Question

我想使用vue-resource this.$http.post请求发布ajax请求。如果我通过了所有验证规则，它工作得很好，但如果失败我想得到一些验证。到目前为止，如果我没有填写一些输入字段，我会一直得到500错误。我很难调试错误，因为它没有出现在网络选项卡上。

这是我到目前为止所做的事情

//my modal component
<script>
export default {
    props: ['show'],

    data() {
        return {
            input: {
                id: '',
                name: '',
                address: '',
                email: ''
            },
            errorInputs: {}
        }
    },

    methods: {
        createStudent() {
            this.$http.post('/students', this.$data.input)
                .then((response) => {
               alert('added new row!)
            }, (response) => {
                console.log(response.data);
            });
        }
      }
   }
</script>

// my controller

public function store(Request $request) {
    $validator = $this->validate($request,[
        'id' => 'required',
        'name' => 'required|unique:students',
        'email' => 'required|unique:students|email',
        'address' => 'required',
    ]);

    if($validator->passes()){
        Student::create($request->all());

        return response()->json([], 201);
    }

    $errors = json_decode($validator->errors());

    return response()->json([
        'success' => false,
        'message' => $errors
    ],422);
}

任何帮助和参考将不胜感激。我正在使用laravel 5.3和vue js 2

Answer 1

$this->validate()会在验证错误的同时返回422错误响应，因此您应该在then()秒回调中获取这些错误（就像您现在一样）。您的vue组件主体应如下所示：

{
    data() {
        // ...
    },
    createStudent() {
        this.$http
            .post('/students', this.input)
            .then(this.handleSuccess, this.handleError)
    },
    handleSuccess(res) {
        alert('student created')
    },
    handleError(res) {
        if (res.status === 422) {
            this.errorInputs = res.body
        } else {
            alert('Unkown error!')
        }
    }
}

请务必在输入中添加v-model="input.fieldName"属性。

Answer 2

请记住将会话令牌与帖子一起包括在内，除非您正在禁用该路由的csrf令牌。

从Laravel 5.1开始，您可以在verifytoken中间件中禁用它

 <?php namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as ...

class VerifyCsrfToken extends ...    {
  protected $except = [
    'payment/*',
  ];
}

使用vue js进行Laravel验证

2 个答案: