在Laravel 8框架中向安装Jetstream和Inertia的用户配置文件添加新字段流程步骤

Laravel  /  管理员 发布于 3年前   1573

Laravel 的默认安装在用户配置文件的配置文件信息部分中只有两个字段。 

这两个字段是姓名和电子邮件字段，如下面的屏幕截图所示：

要在本节中添加新字段，我们需要执行以下步骤。 

在此示例中，我们将向配置文件添加电话字段。

第1步：向UI添加字段

\resources\js\Pages\Profile\UpdateProfileInformationForm.vue 

并找到电子邮件字段的 HTML 代码段。 

为新字段复制此代码并用电话替换电子邮件关键字。

<!-- Email -->
<div class="col-span-6 sm:col-span-4">
    <jet-label for="email" value="Email" />
    <jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" />
    <jet-input-error :message="form.errors.email" class="mt-2" />
</div>
<!-- Phone -->
<div class="col-span-6 sm:col-span-4">
    <jet-label for="phone" value="Phone" />
    <jet-input id="phone" type="text" class="mt-1 block w-full" v-model="form.phone" />
    <jet-input-error :message="form.errors.phone" class="mt-2" />
</div>

在同一个文件的更深处，将新字段添加到表单数据中。 

在下面的代码片段中，您可以看到

我在电子邮件字段行电子邮件：this.user.email 下方添加了线路电话：this.user.phone。

data() {
    return {
        form: this.$inertia.form({
            _method: 'PUT',
            name: this.user.name,
            email: this.user.email,
            phone: this.user.phone,
            photo: null,
        }),
        photoPreview: null,
    }
},

现在，运行 npm run dev 命令，以便编译 javascript 文件中的更改。

这样，您的任务的 UI 部分就完成了。 

您现在可以看到添加到您的个人资料部分的新字段。

步骤 2：更新数据库架构

现在我们已将新字段添加到 UI 中，我们还需要将其添加到数据库中。 

我们将运行 php artisan 命令来制作数据库迁移文件。

php artisan make:migration add_phone_to_users --table="users"

运行此命令将使用 up() 和 down() 方法生成迁移文件，如下所示。

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddPhoneToUsers extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}

然后我们在 up() 方法中添加我们的电话字段，如下所示：

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('phone')->after('email_verified_at')->nullable();
    });
}

使用 php artisan migrate 命令调用 up() 方法并将该字段添加到数据库表中，如下面的屏幕截图所示：

我们还需要在 down() 方法中添加该字段，用于回滚选项。

public function down()
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('phone');
    });
}

down() 方法使用 php artisan migrate:rollback 命令调用，该字段从数据库表中删除。

第三步：添加实现逻辑

实现逻辑分为两个文件：

\app\Actions\Fortify\UpdateUserProfileInformation.php  

\app\Models\User.php 

在 UpdateUserProfileInformation.php 文件中，我们需要更新两个函数，

update() 和 updateVerifiedUser()。

在 update() 函数中，在两个位置添加新字段，一个在验证数组中，另一个在保存函数调用的数组中，如下所示。

同一个文件中的另一个地方是函数 updateVerifiedUser ，如下所示：

接下来，我们需要将 phone 字段添加到 app\Models\User.php 文件中的 User Model 的可填充数组中。

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name',
    'email',
    'password',
    'phone',
];

完