如何使用 Vuejs 提交表单以使用 Laravel Controller答案

【问题标题】：How to submit a form with Vuejs to use Laravel Controller如何使用 Vuejs 提交表单以使用 Laravel Controller
【发布时间】：2023-03-18 06:33:01
【问题描述】：

我有一个 vuejs 组件作为我的登录表单，我正在尝试通过 Laravel 控制器传递表单，类似于在 Blade.php <from method="POST" action="login"> 和 web.php Route::post('/login', 'LoginController@login') 中执行此操作的方式。

LoginController 应该简单地重定向到新视图（测试）：

class LoginController extends Controller {

    public function login() {
        
        return view( 'home' )
    }
}

问题在于，虽然表单确实被提交并在控制器中传递，但整个 home.blade.php html 被作为响应数据加载回来，而不是作为新的“home.blade.php”视图。

这里是vuejs登录组件：

<template>
        <div id="form-input">
            <form method="POST" @submit.prevent="login" :class="{ 'disable-interaction' : submitted }">
                <input class="single-line-input" placeholder="Email" type="text" name="email" v-model="form.email">
                <input class="single-line-input space" placeholder="Password" type="password" name="password" v-model="form.password">
                <div class="large bottom">
                    <p v-if="error" class="error large">{{ error }}</p>
                    <button class="large btn-important" type="submit">sign in</button>
                    <a class="large btn-important-inverted" href="register">register</a>
                    <a class="simple-link center" v-bind:href="back">back</a>
                </div>
            </form>
        </div>
</template>

<script>
    export default {
        props: {
            error: String,
            back: String
        },

        data: function() {
            return {
                submitted: false,
                form: {
                    email: '',
                    password: ''
                }
            }
        },

        methods: {
            login: function() {
                this.submitted = true;
                axios.post('login', this.form)
                    .then(res => console.log(this.form))
                    .catch(err => console.log(err));
                this.submitted = false;
            }
        }
    }
</script>

我只是在 login.blade.php 中调用：

@extends('layouts.auth')

@section('form')
    <login-form 
        error="{{ isset($error) }}"
        back="{{ url('home') }}" 
    ></login-form>
@endsection

在我的web.php:

Route::get('/login', function () { return view('auth.login'); });
Route::post('/login', 'LoginController@login');

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

您必须注意您在应用程序中的哪些位置。

您永远不应该在 POST 调用的控制器方法中渲染视图。 POST 意味着您只会对数据做一些事情，它通常会将用户重定向到其他一些 GET 路由（即仪表板）

在您的情况下，您应该在 login() 函数中执行的操作只是使用您通过 axios 请求发送的数据对用户进行身份验证。 login() 函数将自动接受 Request $request 参数，因为它是一个 POST 请求。

你可以通过 $credentials = $request->only(['email', 'password']); 从请求中获取电子邮件和密码，然后使用 Laravel 的 Auth 门面通过 Auth::attempt($credentials); 对用户进行身份验证。阅读更多关于 Laravel Auth here.

根据Auth::attempt() 的返回值，如果身份验证成功与否，您应该将 JSON 响应返回给您的 vue 应用程序。阅读如何做到这一点here。

从那里，当您在then() 方法中捕获响应时，您会读取响应并查看身份验证是否成功。根据结果相应地重定向您的应用程序。 Here 是如何在 vue 应用中进行重定向。

如果你计划你的整个应用程序都在 Vue 中，你可以考虑构建 Vue SPA（单页应用程序）并使用 Vue-Router 代替 Laravel 的路由和刀片组件。

【讨论】：

【解决方案2】：

问题在于，虽然表单确实被提交并被传入控制器，整个 home.blade.php html 被加载回来响应数据，而不是作为新的 'home.blade.php' 视图。

是的，因为你没有执行任何逻辑，你只是返回一个视图。

public function login()
{
    // thanks for submitting the form, have a view
    return view('home');
}

验证你的User然后redirect如果验证成功，否则返回验证失败消息。

public function login()
{
    // authenticate user
    if ($auth->fails()) {
        return response()->json(['success' => false, 'errors' => []], 401);
    }

    return redirect(route('home'));
}

您的home 路由将执行您的GET login 路由当前执行的操作，而只是return view('home');

【讨论】：