Laravel 8 前端生存指南(Jetstream / Fortify / Bootstrap / Tailwind / Inertia / Livewire / Vue / React)

Laravel

关于 laravel 前端的这两个脚手架有很多争议和困惑,我不会偏向他们中的任何一个,争论谁对谁错没有意义。

重要的是如何让大家更好的理解他们。无论是新手还是老手对于这些脚手架的“生态系统”都有很多相同的困惑。

因此, 本文将尝试提供一个 laravel 前端脚手架的搭建指南

  • 提示: 如果你仅仅只是想  知道怎么快速使用,并不想知道不同方案的详细解释, 请直接跳转到文章的最后

解决方案概述

Laravel Jetstream

Laravel Jetstream 是 Laravel 的新应用程序扩展。

Jetstream 为你的新项目提供了一个更好的开始。它包含了 登录,注册,邮箱验证,双重验证, Session 管理, 通过Laravel Sanctum提供Api支持  还有可选择的 团队管理

Jetstream 使用了 Tailwind CSS ,这个 CSS 的框架将成为 Laravel 社区的标准。

两种风格

Jetstream 允许你在以下两种前端技术栈里选择:

虽然这些工具相对较新, 但它们正越来越受欢迎。

你可能会想 “我在写我的应用的时候是选择 Livewire 还是 Inertia 呢”?

这是个好问题,而且答案更好:不, 在接下来的应用中你不需要用它们。 你仅仅需要安装 Jetstream ,保留它们, 用不同的框架去写你的应用。

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

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

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

如果您对Vue.js感兴趣并喜欢使用它,那么Inertia版本是一个不错的选择。前端是用几乎纯的Vue编写的。Inertia仅充当Laravel后端和Vue组件之间的层。

与编写API路由不同,Inertia可以让您从控制器返回的响应感觉就像是在 return view(...),但您可以在前端使用 Vue 。

特征

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

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

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

它还支持两要素验证。这意味着用户可以选择启用2FA-向他们显示一个QR码,他们将使用像Google Authenticator等应用程序进行扫描,并提供恢复密钥。他们可以将密码存储在1Password之类的密码管理器中,或者如果它们是老式密码,则将其记下并放入物理保险库🔒中。

它第一次集成了 Laravel Sanctum (一个 API 认证的包). 用户可以生成 API 密钥 并为它们指派权限。

此外它还提供了一个非常高级的(可选) 团队功能。来自这些文档:

Jetstream's 团队功能允许每个注册用户创建并属于多个团队, 每一个注册用户都属于 “个人” 的团队。

每一个用户在 Jetstream 应用中都有一个 “当前团队”。用户可以主动查看这个团队的信息。 例如, 你创建了一个日历的应用, 你的应用中需要展示用户当前团队日历中标注的将要发生的事件。 你可以用这个方法访问用户当前团队 $user->currentTeam 的模型关联关系。

最后,我强调一点 这些功能都是可选的。 如果你不想使用它们,可以禁用掉它们。

用法

请注意!Jetstream属于您的应用程序起点,只能在最开始的阶段安装,其他任何开发阶段都不能在继续安装了。

安装Jetstream的运行代码:

laravel new my-app --jet

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

安装程序过程中将会让你选择(Livewire 或者 Inertia)两个版本。然后,它将安装Jetstream,之后您将在.env中配置数据库信息并运行数据库迁移代码

php artisan migration

最终。您可以在浏览器中访问您的项目并开始使用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 的高级特性,它仅提供 login, register, 和 forgot/confirm/reset password 视图。它是一个遗留项目,因此并不会添加其它的新特性。

因为这个原因,并不推荐把它当做 Jetstream 。然而,如果你 真的 想要使用 Bootstrap ,这是 官方的途径

旁注: 这里有一些 使用 Bootstrap 的社区版 Jetstream。例如:github.com/nascent-africa/jetstrap。我不会推荐这些方案,因为我没有使用它们,如果你 真的 想使用 Bootstrap 和 Jetstream 特性,那可能是些好的方案。

个人观点,我会推荐 学习 Tailwind CSS。Tailwind 比 Bootstrap 更完美地适配 Jetstream 。虽然 TALL stack ( Tailwind, Alpine, Livewire, Laravel ) 的学习曲线比 Bootstrap 要长, 不过努力会有回报并且使用这些新技术会 更加享受开发

这些是建立在你已经了解 Web 开发并且已经具备了 Laravel 的基础知识的前提下。 如果没有具备这些基础,请先集中精力学习这些内容。 如果你仅仅只需要一个可运行的应用,并不想思考设计或者 CSS 的内部原理,Bootstrap 会更容易上手。因此,如果您仅仅学习 Laravel ,所有的 CSS 部分基本上被隐藏在 Bootstrap 中, 因此您无需过多考虑和担心。

第三方扩展

还有一些其他的第三方扩展。 它们的用法和 laravel/ui 使用逻辑相同,但是它们会为你提供更多的选项而不仅仅是 Vue 和 React 。

有些比较热门的:

也有其它选择。你可以根据你的需求进行搜索。例如,尝试搜索 「 laravel react preset 」或「 laravel react spa template 」。它们最近更新过,都适宜使用。

你的解决方案

最终,你也可以建立自己的解决方案。就如 Fortify 中提到的那么容易,它提供在视图中需要的所有后台逻辑。

但你 不是必须 使用 Fortify 。查看 authentication docs 。里面非常直接地说明如何写一个认证后台。如果你需要像 「 forgot password 」 这样的功能,使用 Fortify 是个好的选择。

这里有一个额外的建议:只在 Jetstream 的视图里面使用 Fortify,但不要在 Jetstream 其它地方使用。

你可能会想 「但我并不想使用 Livewire 或者 Inertia

还好,你并不是必须使用它们。阅读一下 Jetstream docs 的节选:

Laravel Jetstream 会为你的项目自动搭建好登录,双重验证,注册,密码重置和邮箱验证的视图。简而言之,不管你选择哪个技术,这些模板是写在 Blade 里面,并且不会使用 JavaScript 框架

这表示这些用于「客户」页面的视图不一定要使用Livewire 或者 Inertia。它只是一个使用 Fortify 后台的 Blade (就像控制器的功能那样)。

这是一件非常酷的事情 - 从 Jetstream 复制这些与前端框架无关的视图然后在 Fortify 应用中使用它们。这会让你觉得 这是使用 Tailwind CSS 而不是 Bootstrap 的 laravel/ui

  • 安装 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 thread 中看到我的解释。它非常像旧的 Laravel make:auth 风格,但它使用更现代的 Tailwind UI 视图。

如果有足够多人想这样做,我将会建立和维护它,或者尝试把它当作第三个选择整合到 Jetstream 中。

你应该使用什么

如你所见,在 Laravel 中有许多前端脚手架可以使用。很难作出选择。

如何选择主要还是看你想要什么技术和特性。

我不会在意 Jetstream 使用的技术是否成熟,因为 - 如上所述 - 你可以很方便地让 Jetstream 使用其它技术,然后把应用余下的部分完成。

我是一个初学者,我不知道我是否可以使用 Tailwind , 我从没有用过它

  • 如果你熟悉 Bootstrap ,你可以先从带有 Bootstrap 的 laravel / ui 入手。
  • 如果你还 没有 了解过 Bootstrap, 学习 Tailwind CSS 是一个不错的选择。相比 Bootstrap 而言,它将会带给你更多的 CSS 知识,并且线上有很多现成的组件可以快速构建UI。
  • Tailwind 最主要的缺点就是没有 如此多 像 Bootstrap 那样可以复制粘贴的组件。

想用 Bootstrap

  • laravel/ui — 具有Bootstrap的官方项目
  • jetstrap — 如果想用 Jetstream 功能。 如上所述,Jetstrap不是第一方,因此这里不能提出任何建议。

想用 Jetstream 特性

想用 Tailwind CSS

想用 TALLstack

想用 Inertia

想用 Vue

  • Jetstream 可以选择 Inertia
  • laravel/ui 可以少量地在 Blade 中使用 Vue
  • Inertia.js — 预置
  • 非预置 — 使用一个定制前端(例如, Nuxt )并只使用 Laravel 的 API。

想用 React

  • laravel/ui 可以少量地在 Blade 中使用 React
  • Inertia.js 使用 React (好像可用的预置还没有更新)
  • 非预置

想在 Tailwind UI 设计中使用 Fortify

我想要一个完全自定义的用户UI界面

  • Fortify
  • laravel/ui

    注意 laravel/ui 并不符合 Fortify 的现代化标准。 所以不会进行太多的维护

我不需要 Jetstream 的所有功能 仅需要 Fortify

  • FortifyUI 

    附带 2FA 和 用户个人中心/密码

我想要自定义所有内容 包括 Auth 后端

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://samuelstancl.me/blog/the-complet...

译文地址:https://learnku.com/laravel/t/52827

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1
Bin

:+1:

3个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!