使用 Laravel 轻松构建 Vue 单页面应用程序：第 6 部分

见解分享

2023-11-16 03:44:33

创建新用户：使用 Laravel 和 Vue.js 的单页面应用程序 (SPA)

重温基础知识

踏上使用 Laravel 和 Vue.js 构建单页面应用程序 (SPA) 的激动人心的旅程后，我们已取得了长足的进步。现在，让我们将我们的技能提升到一个新的水平，创建新用户！

在深入探讨之前，让我们快速回顾一下我们迄今为止已经掌握的基本知识。我们已经学习了如何：

设置 Laravel 项目和 Vue.js 应用程序
使用 Vuex 管理状态
创建、读取、更新和删除用户

现在，我们将利用这些基础知识，深入了解创建用户。

创建用户表单

首先，我们需要创建一个表单，用户可以在其中输入其信息。在 resources/views/users/create.blade.php 中创建以下表单：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">创建新用户</div>

                <div class="card-body">
                    <form action="{{ route('users.store') }}" method="POST">
                        @csrf

                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" id="email" name="email">
                        </div>

                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">创建</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

处理表单提交

在 routes/web.php 中，添加一个路由来处理表单提交：

Route::post('/users', 'UserController@store')->name('users.store');

接下来，在 app/Http/Controllers/UserController.php 中，创建 store 方法：

public function store(Request $request)
{
    $user = User::create($request->all());

    return redirect()->route('users.index')->with('success', '用户创建成功！');
}

测试新用户创建

现在，您可以在浏览器中导航至 http://localhost:8000/users/create，填写表单并提交。如果一切顺利，您应该会看到一条成功消息，并且新用户将添加到数据库中。

结论

太棒了！您现在知道如何使用 Laravel 和 Vue.js 创建新用户。这为您构建复杂的 SPA 铺平了道路，您可以在其中无缝地创建、读取、更新和删除数据。随着您继续深入研究这个主题，请务必与我们分享您的进度和见解。

常见问题解答