logo

概念概述

简介

Laravel Jetstream 的架构与其他 Laravel 应用程序入门套件(例如 Laravel Breeze)略有不同。在本文档中,我们将介绍一些高级概念,帮助您了解 Laravel Jetstream 的构建方式。

Laravel Fortify

在幕后,Jetstream 的身份验证部分由 Laravel Fortify 提供支持,它是一个与前端无关的“无头”身份验证后端,适用于 Laravel。

Fortify 注册了实现所有 Laravel 身份验证功能所需的路由和控制器,包括登录、注册、密码重置、电子邮件验证等等。安装 Fortify 后,您可以运行 route:list Artisan 命令查看 Fortify 已注册的路由。

由于 Fortify 不提供自己的用户界面,因此它旨在与您自己的用户界面配对,该界面向其注册的路由发出请求。Laravel Jetstream 是我们基于 Fortify 身份验证后端构建的第一个用户界面实现。

Fortify 配置

安装 Jetstream 时,会将 config/fortify.php 配置文件安装到您的应用程序中。在此配置文件中,您可以自定义 Fortify 行为的各个方面,例如应使用的身份验证守卫、身份验证后应将用户重定向到的位置等等。

fortify 配置文件中,您还可以禁用 Fortify 的整个功能,例如更新个人资料信息或密码的功能。

操作

Laravel Breeze 相比,Laravel Jetstream 不会将控制器或路由发布到您的应用程序。相反,Jetstream 的功能是通过“操作”类进行自定义的。在 Jetstream 安装过程中,操作会被发布到您的应用程序的 app/Actions 目录中。

操作类通常执行单个操作,并对应于单个 Jetstream 或 Fortify 功能,例如创建团队或删除用户。您可以自由定制这些类,如果您想调整 Jetstream 的后端行为。Jetstream 发布的每个相关操作将在相应功能的文档中讨论。

视图/页面

在安装过程中,Jetstream 将发布各种视图和类到您的应用程序。使用 Livewire 时,视图将发布到您的应用程序的 resources/views 目录。使用 Inertia 时,“页面”将发布到您的 resources/js/Pages 目录。

Jetstream 发布的视图/页面包含 Jetstream 支持的每个功能,您可以根据需要自由定制它们。将 Jetstream 视为应用程序的起点。安装 Jetstream 后,您可以自由定制任何您喜欢的内容。

布局

应用程序布局

安装后,您的 Jetstream 应用程序将包含两个“布局”。首先,Jetstream 创建一个应用程序布局,用于定义应用程序页面(需要身份验证)的布局,例如应用程序的仪表板。使用 Livewire 堆栈时,此布局在 resources/views/layouts/app.blade.php 中定义,并由 App\View\Components\AppLayout 类渲染。使用 Inertia 堆栈时,此布局在 resources/js/Layouts/AppLayout.vue 中定义。

Livewire 来宾/身份验证布局

除了应用程序布局之外,Jetstream 还创建了一个“来宾”布局,用于定义 Jetstream 身份验证相关页面的布局,例如应用程序的登录、注册和密码重置页面。使用 Livewire 堆栈时,此布局在 resources/views/layouts/guest.blade.php 中定义,并由 App\View\Components\GuestLayout 类渲染。

仪表板

应用程序的“主”视图在使用 Livewire 时发布到 resources/views/dashboard.blade.php,在使用 Inertia 时发布到 resources/js/Pages/Dashboard.vue。您可以自由使用它作为构建应用程序主要“仪表板”的起点。

Tailwind

在安装过程中,Jetstream 会为您的应用程序与 Tailwind CSS 框架的集成搭建脚手架。具体来说,将创建 postcss.config.js 文件和 tailwind.config.js 文件。这两个文件用于构建应用程序的编译后的 CSS 输出。您可以根据需要自由修改这些文件以适应您的应用程序。

此外,您的 tailwind.config.js 文件已预先配置为支持 PurgeCSS,并根据您选择的 Jetstream 堆栈正确指定了相关目录。

您的应用程序的 package.json 文件已经搭建了脚手架,其中包含您可以用来编译资产的 NPM 命令。有关编译应用程序资产的更多信息,请参阅 Vite 文档

bash
# Compile your CSS / JavaScript for development and recompile on change...
npm run dev

# Compile your CSS / JavaScript for production...
npm run build