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 资料夹
另外还有些测试
<<: [Day 4] 怎麽挑选作品集的主题 - Open API介绍
>>: 2021-Day14. Serverless(二):当 Ktor 遇到 Docker~
前言 错误处理往往是最容易被忽略的一块,因为 程序运行顺利,那当然不用考虑 error case 程...
人的科技文明发展始终来自於人性 藉由现在的科技技术之发展,我们可以非常成熟的运用机器学习、深度学习及...
若是您选择以软件包或 Docker 这种 On Premises 的安装方式安装在本机电脑的话,那首...
[讲古时间]: 回忆过去~ 痛苦的相思忘不了~ 哈哈,记得刚出社会时,虽然说是张白纸,不过可能太白...
设定style属性 上一篇有提到我们可以在React.createElement的第二个参数设定Re...