Laravel 9 家电服务项目3-更改登录和注册页面布局及注册页面添加用户选项和电话

一、更改登录和注册页面布局

App\View\Components创建 BaseLayout.php 文件

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class BaseLayout extends Component
{
    /**
     * Get the view / contents that represents the component.
     *
     * @return \Illuminate\View\View
     */
    public function render()
    {
        return view('layouts.guest');
    }
}

修改登录页面

resources\views\auth\login.blade.php

<x-base-layout>
    <div class="section-title-01 honmob">
        <div class="bg_parallax image_02_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>登录</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li>/</li>
                        <li>登录</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="content-central">
        <div class="content_info">
            <div class="paddings-mini">
                <div class="container">
                    <div class="row portfolioContainer">
                        <div class="col-xs-12 col-sm-3 col-md-3 profile1">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 profile1" style="min-height: 300px;">
                            <div class="thinborder-ontop">
                                <h3>登录信息</h3>
                                <x-validation-errors class="mb-4" />

                                <form id="userloginform" method="POST" action="{{ route('login') }}">
                                    @csrf

                                    <div class="form-group row">
                                        <label for="email"
                                               class="col-sm-4 col-form-label text-md-right">电子邮箱</label>
                                        <div class="col-md-6">
                                            <input id="email" type="email" class="form-control" name="email" value=""
                                                   required="" autofocus="">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="password"
                                               class="col-md-4 col-form-label text-md-right">密码</label>
                                        <div class="col-md-6">
                                            <input id="password" type="password" class="form-control" name="password"
                                                   required="">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="remember_me" name="remember"> 记住账号 </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="submit" class="btn btn-primary pull-right">登录</button>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-0">
                                        <div class="col-md-10">
                                            <a class="" href="{{ route('password.request') }}">忘记密码了吗?</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3 col-md-3 profile1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-twitter">
            <i class="fa fa-twitter icon-big"></i>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="text-center">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-base-layout>

<x-validation-errors class="mb-4" />这个是验证

修改注册页面

resources\views\register.blade.php

<x-base-layout>
    <div class="section-title-01 honmob">
        <div class="bg_parallax image_02_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>注册</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="{{ route('home') }}">首页</a></li>
                        <li>/</li>
                        <li>注册</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="content-central">
        <div class="semiboxshadow text-center">
        </div>
        <div class="content_info">
            <div class="paddings-mini">
                <div class="container">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-offset-3 profile1" style="padding-bottom:40px;">
                        <div class="thinborder-ontop">
                            <h3>用户信息</h3>
                            <x-validation-errors class="mb-4" />

                            <form id="userregisterationform" method="POST" action="{{ route('register') }}">
                                @csrf

                                <div class="form-group row">
                                    <label for="name" class="col-md-4 col-form-label text-md-right">用户名</label>
                                    <div class="col-md-6">
                                        <input id="name" type="text" class="form-control" name="name" value="" required="" autofocus="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="email" class="col-md-4 col-form-label text-md-right">电子邮箱</label>
                                    <div class="col-md-6">
                                        <input id="email" type="email" class="form-control" name="email" value="" required="">
                                    </div>
                                </div>

                                {{--                            <div class="form-group row">--}}
                                {{--                                <label for="phone" class="col-md-4 col-form-label text-md-right">手机号</label>--}}
                                {{--                                <div class="col-md-6">--}}
                                {{--                                    <input id="phone" type="text" class="form-control" name="phone" value="" required="" autofocus="">--}}
                                {{--                                </div>--}}
                                {{--                            </div>--}}

                                <div class="form-group row">
                                    <label for="password"
                                           class="col-md-4 col-form-label text-md-right">密码</label>
                                    <div class="col-md-6">
                                        <input id="password" type="password" class="form-control" name="password" required="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="password-confirm"
                                           class="col-md-4 col-form-label text-md-right">确认密码</label>
                                    <div class="col-md-6">
                                        <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required="">
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <div class="col-md-10">
                                            <span style="font-size: 14px;">如果您已经注册请 <a
                                                    href="{{ route('login') }}" title="Login">点击此处</a> 登录</span>
                                        <button type="submit" class="btn btn-primary pull-right">注册</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-twitter">
            <i class="fa fa-twitter icon-big"></i>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="text-center">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-base-layout>

<x-validation-errors class="mb-4" />这个是验证

public 文件下导入 对应模版CSS 和 JS

二、在注册页面添加用户选项和电话

迁移命令

php artisan make:migration add_phone_to_users_table --table=users

打开 Database\Migrations\2024_09_22_140506_add_phone_to_users_table.php 编写迁移文件：

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

执行迁移文件

php artisan migrate

注册前端模版添加字段

resources\views\register.blade.php

<div class="form-group row">
    <label for="phone" class="col-md-4 col-form-label text-md-right">手机号</label>
    <div class="col-md-6">
        <input id="phone" type="text" class="form-control" name="phone" value="" required="" autofocus="">
    </div>
</div>

<div class="form-group row">
    <label for="phone" class="col-md-4 col-form-label text-md-right">注册为</label>
    <div class="col-md-6">
        <select class="form-control" name="registeras" id="registeras">
            <option value="CST">顾客</option>
            <option value="SVP">服务提供商</option>
        </select>
    </div>
</div>

进入App\Models\User添加刚加入的字段白名单

protected $fillable = [
    'phone',
    'utype'
];

App\Actions\Fortify\CreatesNewUsers 中编写数据库插入逻辑：

public function create(array $input)
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => $this->passwordRules(),
        'phone' => ['required'],  // 手机号必填
        'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
    ])->validate();
    
     $registeras = $input['registeras'] === 'SVP' ? 'SVP' : 'CST'; // 注册的是顾客还是服务提供商

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'password' => Hash::make($input['password']),
        'phone' => $input['phone'],
        'utype' => $registeras
    ]);
}