Laravel前端脚手架的完整指南

关于Laravel前端脚手架的状态,存在很多争论,戏剧性和最终的困惑。我不会关注任何戏剧-谁对谁错是不重要的。

什么重要的是确保人们理解的-相对复杂-前端脚手架的状态。初学者和经验丰富的开发人员似乎都对该前端“生态系统”的某些部分感到困惑。

因此,本文将尝试作为Laravel前端脚手架完整指南

注意:如果您只是想快速了解要使用的内容,而又不对不同解决方案的用途进行解释,请跳到文章结尾。

可用解决方案概述

Laravel Jetstream

Laravel Jetstream是最新的解决方案。

这是您的应用程序的起点,包括登录,注册,电子邮件验证,两因素身份验证,会话管理,通过Laravel Sanctum提供的API支持以及可选的团队管理。

它是使用Tailwind CSS设计的。这个CSS框架正在成为Laravel社区的标准。

两种口味

Jetstream使您可以在两个前端堆栈之间进行选择:

这些工具是相对较新的工具,但是它们的受欢迎程度正在大大提高。

您可能会想“那时候我是否必须使用Livewire或Inertia编写应用程序”?

这是一个很好的问题,答案甚至更好:不,无需在应用程序的其余部分中使用它们。您可以只安装Jetstream,保留其功能,然后使用其他框架编写应用程序。

如果您打算这样做,建议您使用Livewire版本

如果您不知道Livewire是什么,那么它基本上就是一个工具,可让您创建共同通信的Blade视图和后端组件类。这使您仅使用后端代码即可构建动态UI

因此,如果您不知道要使用哪个技术栈,请使用Livewire,因为每个Laravel开发人员都了解Blade。当您了解blade时,Livewire非常容易理解。真的感觉像魔术。

Inertia的版本是,如果你与Vue.js和喜欢使用它经历了一个伟大的选择。前端是用几乎纯的Vue编写的。Inertia仅充当Laravel后端和Vue组件之间的层。

无需编写API路由,Inertia可使您像使用return view(...)感觉完全一样的 从控制器中返回响应,但是您可以在前端使用Vue。

功能

Jetstream具有其他脚手架工具所没有的一些很酷的功能。

它有一个专用页面,用户可以在其中编辑其姓名,电子邮件地址和(可选)个人资料照片。

他们还可以通过单击按钮删除帐户(当然,通过密码模式进行确认)。对于每个使自己的应用符合GDPR要求的人来说,这都是一个巨大的胜利。

它还支持两因素身份验证。这意味着用户可以选择启用2FA-向他们显示一个二维码,他们将使用Google Authenticator等应用程序进行扫描,并提供恢复密钥。他们可以将密码存储在1Password这样的密码管理器中,或者如果他们是保守派,写下来并放入物理保管库中。

它与Laravel Sanctum(用于API身份验证的程序包)进行了第一方集成。用户可以生成API密钥并为其分配权限。

它还具有非常高级(和可选)的团队功能。在文档写到:

Jetstream的团队功​​能允许每个注册用户创建并属于多个团队。默认情况下,每个注册用户将属于一个“个人”团队。

Jetstream应用程序中的每个用户都有一个“当前团队”。这是用户正在积极查看资源的团队。例如,如果您正在构建日历应用程序,则您的应用程序将显示该用户当前团队的即将发生的日历事件。您可以使用$user->currentTeamEloquent关系访问用户的当前团队

最后,让我强调一下,所有这些功能都是可选的。如果您不想要它们,请禁用它们。

用法

请注意,Jetstream作为您的应用程序的起点,并不意味着要在开始时就在任何开发阶段进行安装。

安装Jetstream的最直接方法是运行:

laravel new my-app --jet

(确保您的Laravel安装程序是最新的。)

安装程序将询问您首选哪个技术栈(Livewire或Inertia)。然后,它将安装Jetstream,您所需要做的就是配置数据库凭据.env并运行数据库迁移— php artisan migrate

就这样。您可以在浏览器中访问您的项目并开始使用Jetstream。

Laravel Fortify

该文档说:

Laravel FortifyLaravel的前端不可知身份验证后端

这意味着它不是前端脚手架工具,而是前端的后端。例如,Fortify支持Jetstream中的身份验证逻辑。

它为您提供了所有用于身份验证的后端逻辑(如果您使用过Laravel 7,则是Auth控制器)。

您只需使用如下代码将视图“插入”到后端逻辑中:

use Laravel\Fortify\Fortify;

Fortify::loginView(function () {
    return view('auth.login');
});

Fortify还允许您自定义后端逻辑。例如,您可以设置使用如下调用对用户进行身份验证(登录)的方式:

Fortify::authenticateUsing(function (Request $request) {
    $user = User::where('email', $request->email)->first();

    if ($user && Hash::check($request->password, $user->password)) {
        return $user;
      }
})

laravel/ui

laravel/ui是建立在Bootstrap CSS框架上的非常简单的身份验证脚手架。它还可以让您在Vue / React预设之间进行选择。

它没有Jetstream的高级功能,实际上只是为您提供登录,注册以及忘记/确认/重置密码视图。这是一个旧项目,因此不再添加新功能。

因此,不建议使用Jetstream。但是,如果您确实想使用Bootstrap,则这是官方方法

旁注:有一些使用Bootstrap的Jetstream社区版本。例如:https : //github.com/nascent-africa/jetstrap 我不推荐这些解决方案,因为我还没有使用它们,但是如果您真的想使用Bootstrap并且真的想要Jetstream功能,它们可能是一个不错的选择。

就个人而言,我建议改为学习Tailwind CSS。Tailwind完全符合Jetstream的人体工程学,比Bootstrap更为适合。而且,即使TALL技术栈(Tailwind,Alpine,Livewire,Laravel)的学习曲线比仅仅使用Bootstrap都要大,但付出的努力确实有回报,并且使用这些新技术,您将享受更多的开发乐趣。

假设您了解Web开发和Laravel的基础知识。如果没有,请先集中精力学习这些内容。如果您只想拥有一个运行中的应用程序而无需考虑设计或CSS内部原理,那么Bootstrap可能会很方便。因此,如果您仅学习Laravel,Bootstrap基本上会将所有CSS内容隐藏起来,因此您无需担心什么。

第三方预设

也有第三方预设。它们使用与laravel/ui相同的逻辑,但是它们为您提供的不仅仅是Vue和React。

一些受欢迎的包括:

还有很多其他的。您可以根据需要在Google上查找它们。例如,尝试搜索诸如“laravel react preset”或“laravel react spa template”之类的内容。只要最近对它们进行了合理的更新,就可以使用它们。

您自己的解决方案

最后,您当然可以构建自己的解决方案。使用Fortify,这非常容易-如前所述,它提供了所有后端逻辑,因此您要做的就是插入视图。

但是您不必一定要使用Fortify。查看身份验证文档。自己编写自定义身份验证后端相对简单。虽然如果您需要“忘记密码”之类的功能,那么选择Fortify是一个不错的决定。

这里有一个额外的建议:直接在Jetstream的视图中使用Fortify,但不要从Jetstream中获取其他任何东西。

您可能在想“但是我不想要Livewire或Inertia ”。

幸运的是,您不需要任何这些。阅读Jetstream docs的节选:

Laravel Jetstream会自动为您的项目提供登录,两步登录,注册,密码重置和电子邮件验证视图。为简单起见,无论选择哪种技术栈,这些模板都是用Blade编写的,并且不使用JavaScript框架

这意味着用于“访客”页面的视图根本不使用Livewire或Inertia。只是带有Fortify后端的Blade(其工作方式类似于控制器)。

这使您可以做一件很酷的事情-只需从Jetstream复制这些与前端无关的视图,然后在Fortify应用程序中使用它们即可。基本上,这为您提供了laravel / ui,但是使用了Tailwind CSS而不是Bootstrap

  • 安装Fortify
  • 发布Jetstream视图,将其复制,然后将其移动到 views/components/jet
    • 您只需要其中的一部分,但是如果您想快速入门,请全部发布它们,以确保它可以工作。
    • 提示:如果为Jetstream安装选择Inertia,您的Blade视图可能会少很多。
  • x-jet-引用重命名为x-jet.在所有文件中的引用
  • 复制package.json
  • 复制app.css
  • 复制webpack.mix.js
  • 复制tailwind.config.js
  • npm install
  • npm run watch
  • 在浏览器中访问

注意:此过程有点繁琐,但可能很多人都希望这样做,正如您在解释该选项的Twitter线程中所见。它确实像Laravel的老式,简单make:auth的身份验证样式,但是它使用了现代的Tailwind UI视图。

如果有足够的人想要这个,我将构建它并对其进行维护,或者尝试将它作为第三种选择合并到Jetstream中。

你应该用什么

如您所见,Laravel中有许多东西可以用于前端脚手架。那会使挑选一个变得困难。

主要指导思想应该是您想要的技术和功能。

我不必担心Jetstream使用的技术是否成熟,因为-如上所述-让Jetstream使用它并按照自己的方式编写应用程序的其余部分很容易。

我是一个初学者,我不知道我是否想要Tailwind,我从没使用过

  • 如果您已经知道Bootstrap那么最好先从laravel/ui和Bootstrap开始。
  • 如果你知道Bootstrap,学习Tailwind CSS是一个不错的选择。与Bootstrap相比,它将带给您更多关于CSS的知识,并且在线提供了许多组件来快速构建UI。
  • Tailwind的主要缺点是组件不如Bootstrap那样多

我想要Bootstrap

  • laravel / ui — Bootstrap的官方项目
  • jetstrap —如果需要Jetstream功能。如上所述,Jetstrap不是第一方,因此无法在此处提出任何建议

我想要Jetstream功能

我想要Tailwind CSS

我想要TALLstack

我要Inertia

我想要Vue

  • Jetstream带Inertia,如果您需要Inertia
  • laravel / ui与Vue,如果您想将Vue洒入Blade
  • Inertia.js预设
  • 无预设-使用自定义(例如Nuxt)前端,仅对Laravel用于API。

我想要React

  • laravel / ui与React如果您想将React撒入Blade
  • 具有React的Inertia.js(似乎没有可用的最新预设)
  • 没有预设

我想使用Tailwind UI设计进行强化

我想要一个完全自定义的UI

  • Fortify与自定义视图
  • laravel / ui具有自定义视图。请注意,laravel / ui不像Fortify那样现代,因此可能不会得到太多维护。

我不需要所有Jetstream,但我想要的不只是Fortify

  • FortifyUI随附2FA和用户配置文件/密码更新

我想要完全自定义所有内容,包括auth后端

  • 自定义auth后端,  根据每个具有自定义前端的身份验证文档

via https://samuelstancl.me/blog/the-complete-guide-to-laravel-frontend-scaffolding/

原创翻译,转载请注明:来自lenix的博客,地址https://blog.p2hp.com/archives/7518

Laravel前端脚手架的完整指南
标签: