使用 Breeze 建立基础专案框架

Breeze 是官方推荐的起手套装,内建有登入、注册、忘记密码等常用的用户功能,令外可以选择使用 Vue 或者 React 来建立画面。

首先,Breeze 是用於专案初始化的工具,如果专案已经开发到一半的话怕会有冲突所以不适用,最好建立一个初始化的专案。

再来因为要连结资料库,必须设定好连线资料库所需的环境变数,可以参考之前连线资料库的篇章。

建立基础专案

用指令载入 Breeze

sail composer require laravel/breeze --dev

接着准备让套件安装资料库模型跟画面,Laravel 预设是用 Blade 渲染画面的,不过 Breeze 应用了 Inertia.js 工具
产生可以用 React 或 Vue 撰写的类前端 App 画面,可以选择要产生 Vue 或 React 框架。

个人比较喜欢 React 所以指令会是

sail artisan breeze:install react

备注用 Vue 的指令

sail artisan breeze:install vue

Breeze 安装好之後接着安装 Javascript 套件

sail npm install
sail npm run dev

然後跑资料库迁移(如果还没跑的话)


sail artisan migrate

成功之後马上开启服务器然後看看注册画面吧,网址 http://localhost/register

可以实际注册,进入Dashboard。
接着可以登出後到 /login 测试登入功能。

架构

来简单看一下 Breeze 如何产生这些页面跟功能的

首先看到 routes/auth.php,这里定义了使用者登入之前的画面路由与 API ,包含注册,登入登出,忘记密码等。

以 Get/login 为例,由 AuthenticatedSessionController 的 create 方法处理请求後回传登入画面。 在这之前加上了 guest 这个 middleware,如果请求带有已登入的资讯,则不回传画面值接导向首页。

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

看看 AuthenticatedSessionController 的 create 做了什麽

// AuthenticatedSessionController.php
public function create()
    {
        return Inertia::render(
            'Auth/Login',  //resources\js\Pages\Auth\Login.js 画面元件
            [// 画面元件的 props
                'canResetPassword' => Route::has('password.request'),
                'status' => session('status'),
            ]
        );
    }

回传 Inertia.js 渲染的画面。

这边简单说下 Inertia.js 的运作方式,最初连上网站的时候,会回传一个带有 Inertia 功能的全页应用,而这个应用里所有的 link 都会经过 Inertia 的处理,当点击 link 时并不会直接跳转网址而是变成发送一个 XHR 到 Laravel ,并经由 API 回传 Inertia 渲染的画面元件,进行画面的更新。

而说是 API 渲染元件其实有点不太准确,收到请求後 Inertia Render 会将 Vue/React 元件转换成 JSON 并回传(不是 Html),再经由前端的 Inertia 解析後重新渲染部分的画面,达到类前端 App 的效果,所以实际的渲染还是发生在前端,API 只是提供资料。

另外这个方法前端是没有路由器的,Laravel 服务器提供画面的路由器替代了这部分。

画面说完看看登入功能的部分

// AuthenticatedSessionController.php
/**
 * Handle an incoming authentication request.
 *
 * @param  \App\Http\Requests\Auth\LoginRequest  $request
 * @return \Illuminate\Http\RedirectResponse
 */
public function store(LoginRequest $request)
{
    $request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended(RouteServiceProvider::HOME);
}

相当精简,因为自定义了 LoginRequest 对登入功能进行了封装

// LoginRequest 
/**
 * Attempt to authenticate the request's credentials.
 *
 * @return void
 *
 * @throws \Illuminate\Validation\ValidationException
 */
public function authenticate()
{
    $this->ensureIsNotRateLimited();

    if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) {
        RateLimiter::hit($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => __('auth.failed'),
        ]);
    }

    RateLimiter::clear($this->throttleKey());
}

不过 LoginRequest 中验证信箱跟密码的部分也就 Auth::attempt 一行,其他主要是防止过度频繁的请求跟误讯息处理。

Auth::attempt 是 Laravel 原生提供的方法,之後再详细介绍。

其他身分验证相关的控制器也是差不多的感觉,主要功能都是应用 Laravel 的原生方法。

除了路由跟控制器外主要就是 app/resources 的内容,也就是 React 画面跟元件等等,相当多。

稍微展开 Pages 资料夹

另外还有些测试

References

Laravel Sarter Kits

<<:  [Day 4] 怎麽挑选作品集的主题 - Open API介绍

>>:  2021-Day14. Serverless(二):当 Ktor 遇到 Docker~

Day 17 - Error Handling 错误处理

前言 错误处理往往是最容易被忽略的一块,因为 程序运行顺利,那当然不用考虑 error case 程...

AI 未来狂想

人的科技文明发展始终来自於人性 藉由现在的科技技术之发展,我们可以非常成熟的运用机器学习、深度学习及...

第六天:首次启动设定

若是您选择以软件包或 Docker 这种 On Premises 的安装方式安装在本机电脑的话,那首...

[前端暴龙机,Vue2.x 进化 Vue3 ] Day1.在认识vue之前(一)

[讲古时间]: 回忆过去~ 痛苦的相思忘不了~ 哈哈,记得刚出社会时,虽然说是张白纸,不过可能太白...

[Day26] React - 设定属性(style属性 & 事件属性)

设定style属性 上一篇有提到我们可以在React.createElement的第二个参数设定Re...