注册组件不会插入数据。引发新的MethodNotAllowedHttpException（$ others）;

Question

我正在尝试使用Register.vue组件中的axios.post将用户注册数据发布到我的数据库中。但这给我一个错误。我不知道该错误是在表单上还是在输入上。

这是我的Register.vue

    <template>
  <div class="login-wrapper border border-light">
      <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
          <h2 class="form-signin-heading">Please sign in</h2>
          <div class="form-group">
            <label for="usuario" class="sr-only">Username</label>
            <input v-model="usuario" type="usuario" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
            <label for="inputEmail" class="sr-only">Email </label>
            <input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-primary" @click="registrarUsuario()">Register</button>
          </div>
     </form> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      usuario: '',  
      email: '',
      password: '',
      errorPersona : 0,
      errorMostrarMsjPersona : [],
    }
  },
  methods: {

        registrarUsuario(){
          console.log(this.email);
                if (this.validarUsuario()){
                    return;
                }

                let me = this;
                axios.post('/user/registrar',{
                    'email' : this.email,
                    'usuario': this.usuario,
                    'password': this.password
                }).then(function (response) {
                    console.log("3");
                }).catch(function (error) {
                  console.log("4");
                    console.log(error);
                });
            },

            validarUsuario(){
              console.log("2");
                this.errorPersona=0;
                this.errorMostrarMsjPersona =[];
                    if (!this.email) this.errorMostrarMsjPersona.push("El correo de usuario no puede estar vacío.");
                    if (!this.usuario) this.errorMostrarMsjPersona.push("El nombre de usuario no puede estar vacío.");
                    if (!this.password) this.errorMostrarMsjPersona.push("El password no puede estar vacío.");
                    if (this.errorMostrarMsjPersona.length) this.errorPersona = 1;
                        return this.errorPersona;
            },
  }
}
</script>

这是我的UserController.php

    public function store(Request $request)
{
    if (!$request->ajax()) return redirect('/');


        DB::beginTransaction();
        $usuario = new User();
        $usuario-> usuario = $request->usuario;
        $usuario-> password = bcrypt($request->password);
        $usuario-> condicion = 1;
        $usuario->save();
        console.log('end');

        DB::commit();
}

这是我的web.php

    Route::get('/main', function () {
    return view('contenido/contenido');
})->name('main');

//Route::resource('proyecto', 'ProyectoController', ['except' => 'show']);

Route::get('/user', 'UserController@index');
Route::post('/user/registrar', 'UserController@store');
Route::put('/user/actualizar', 'UserController@update');
Route::put('/user/desactivar', 'UserController@desactivar');
Route::put('/user/activar', 'UserController@activar');

Route::get('/register','Auth\RegisterController@showRegisterForm');

Answer 1

您必须需要csrf令牌或将其禁用。

首先禁用

Http/Middleware/VerifyCsrfToken.php

protected $except = [
        '/user/registrar'
    ];

第二次通过csrf发送您的ftemplate

 <template>
  <div class="login-wrapper border border-light">
      <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
          {{ csrf_field() }}

          <h2 class="form-signin-heading">Please sign in</h2>
          <div class="form-group">
            <label for="usuario" class="sr-only">Username</label>
            <input v-model="usuario" type="usuario" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
            <label for="inputEmail" class="sr-only">Email </label>
            <input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-primary" @click="registrarUsuario()">Register</button>
          </div>
     </form> 
  </div>
</template>

更新

您可以从app.blade.php获取csrf令牌

var  csrfToken = $('meta[name="csrf-token"]').attr('content');

然后更新您的axios.post请求

            axios.post('/user/registrar',{
                'email' : this.email,
                'usuario': this.usuario,
                'password': this.password
            },headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'X-CSRFToken': csrfToken,
            }).then(function (response) {
                console.log("3");
            }).catch(function (error) {
              console.log("4");
                console.log(error);
            });