构建你的应用
构建你的应用
介绍
安装完 Jetstream 后,你可能会想知道如何真正开始构建你的应用程序。值得庆幸的是,由于 Jetstream 处理了所有初始身份验证和应用程序脚手架的配置,因此你可以立即开始!
安装完 Jetstream 后,代码就是你的了。这些模板属于你的应用程序,可以根据你的需要进行修改。Jetstream 只是一个起点。你不需要担心保持你的用户界面与未来的 Jetstream 版本 “兼容”,因为每个 Jetstream 版本只是一个全新的迭代的起始组件包。换句话说,Jetstream 不是一个你将来要 “更新” 的包或管理仪表板。它是一个 Laravel 的脚手架起始组件, 在它被安装后, 模板完全由你来维护。
提示:Livewire & Inertia
在深入了解 Jetstream 之前,你应该熟悉如何使用 Laravel Laravel Livewire 或 Inertia。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.php
Blade模板定义。当使用 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('/');
你也可以通过在重定向响应实例上调用 banner
或 dangerBanner
方法来通知 Jetstream 显示 banner:
return redirect()->route('subscriptions')->banner('Subscription created successfully.');
return redirect()->route('subscriptions')->dangerBanner('Subscription cancellation failed.');
推荐文章: