构建你的应用

未匹配的标注

构建你的应用

介绍

安装完 Jetstream 后,你可能会想知道如何真正开始构建你的应用程序。值得庆幸的是,由于 Jetstream 处理了所有初始身份验证和应用程序脚手架的配置,因此你可以立即开始!

安装完 Jetstream 后,代码就是你的了。这些模板属于你的应用程序,可以根据你的需要进行修改。Jetstream 只是一个起点。你不需要担心保持你的用户界面与未来的 Jetstream 版本 “兼容”,因为每个 Jetstream 版本只是一个全新的迭代的起始组件包。换句话说,Jetstream 不是一个你将来要 “更新” 的包或管理仪表板。它是一个 Laravel 的脚手架起始组件, 在它被安装后, 模板完全由你来维护。

提示:Livewire & Inertia
在深入了解 Jetstream 之前,你应该熟悉如何使用 Laravel Laravel LivewireInertia。Jetstream 依赖这些技术来提供一流的用户和开发者体验。

应用程序仪表板

在使用你的应用程序进行身份验证后,你将被重定向到 /dashboard 路由。这个路由是你应用程序的主页/仪表板界面。当你使用 Livewire 技术栈时,这个页面是由 resources/views/dashboard.blade.php Blade模板渲染的。当使用 Inertia 技术栈时,该界面是使用 resources/js/Pages/Dashboard.vue 组件渲染的。

如果你打开应用程序的仪表板模板/组件,你将看到它扩展了应用程序的主要”布局”组件。这个布局定义了你应用程序内部的整体外观和视觉。当使用 Livewire 时,这个布局由 resources/views/layouts/app.blade.php 模板定义,并通过 App/View/Components/AppLayout 组件类渲染。当使用 Inertia 时,你的应用程序布局由 resources/js/Layouts/AppLayout.vue 组件定义的。

一旦你熟悉了仪表板和应用程序布局模板,就可以随意地开始编辑它们。例如,你可能想删除在你的应用程序仪表板上渲染的 “welcome” 组件。要做到这一点,你可以从你的仪表板模板中删除它。接下来,你可以自由地编写构建你的应用程序所需的HTML。记住,Jetstream 使用强大的 Tailwind CSS 框架,所以一定要通过查阅 Tailwind文档 来了解更多关于 Tailwind 的内容。

添加其他页面

默认情况下,Jetstream 的顶部导航菜单包括一个指向应用程序仪表板的链接。当然,你可以随意地编辑这个导航菜单,添加指向应用程序中其他页面的链接,这些链接在你的应用程序中必须是可用可访问的。当使用 Livewire 时,导航菜单由resources/views/navigation-menu.blade.phpBlade模板定义。当使用 Inertia 时,导航菜单在 resources/js/Layouts/AppLayout.vue 组件中定义。

用户资料

当构建一个 Jetstream 应用程序时,你可能需要在用户资料管理界面上添加自己的表单和面板。默认情况下,用户的个人资料界面包含了更新用户的联系信息、密码、管理双因素身份验证设置等面板。但是,你可以自由地在这个页面上添加你自己的其他面板。要做到这一点,你只需编辑定义该页面的模板即可。

当使用 Livewire 时,用户资料管理界面是由 resources/views/profile/show.blade.php Blade模板定义的。当使用 Inertia 时,该界面是由 resources/js/Pages/Profile/Show.vue 组件渲染的。要向用户资料添加其他的面板或表单,你只需根据你的应用程序需要编辑这些模板即可。

团队管理

你可能还需要在 Jetstream 渲染的团队管理界面上添加其他表单和面板。这包括管理现有团队的 “团队设置” 界面,以及当用户创建一个新团队时渲染的 “创建团队” 界面。

创建团队界面

当启用团队支持时,Jetstream 包含一个允许用户创建新团队的界面。你可以随便地向该界面中包含的表单添加其他表单字段。你添加的任何其他表单字段都将通过 $input 参数传递给 Jetstream 的 App/Actions/Jetstream/CreateTeam action 中。

当使用 Livewire 时,团队创建界面由 resources/views/teams/create.blade.php Blade模板定义。当使用 Inertia 时,此界面由 resources/js/Pages/Teams/Create.vue 组件渲染。

团队设置界面

当启用团队支持时,Jetstream 包含一个允许用户管理其现有团队设置的界面,例如更改团队名称或邀请其他团队成员。你可以随便地向这些页面添加你自己的其他面板。要做到这一点,你只需编辑定义该页面的模板即可。

当使用 Livewire 时,团队设置界面是由resources/views/teams/show.blade.php Blade模板定义的。当使用 Inertia 时,该界面由 resources/js/Pages/Teams/Show.vue 组件渲染。

banner提示

Jetstream 包括一个可以在应用程序的 UI 顶部显示的通知 banner。

如果你使用的是 Livewire 技术栈,你的应用程序将包含在 resources/views/components/banner.blade.php 的 banner 组件。如果你使用 Inertia 技术栈,你的 banner 组件将包含在 resources/js/Components/Banner.vue Vue组件中。

要通知 Jetstream 显示 banner,你必须向会话闪存一个 flash.banner 消息。除了 banner 消息外,你还可以通知 Jetstream 使用 success 样式或 danger 样式来显示 banner:

$request->session()->flash('flash.banner', 'Yay it works!');
$request->session()->flash('flash.bannerStyle', 'success');

return redirect('/');

你也可以通过在重定向响应实例上调用 bannerdangerBanner 方法来通知 Jetstream 显示 banner:

return redirect()->route('subscriptions')->banner('Subscription created successfully.');

return redirect()->route('subscriptions')->dangerBanner('Subscription cancellation failed.');

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~