译

Laravel前端脚手架的完整指南

admin PHP 暂无评论 2,402 浏览

关于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 Fortify是Laravel的前端不可知身份验证后端

这意味着它不是前端脚手架工具，而是前端的后端。例如，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

我想要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前端脚手架的完整指南
赏
标签: