README

此仓库为使用Bootstrap (v5) 的Laravel仪表板提供简单的起点。它不会提供完整的后台管理，而是提供可重用的模板，您可以在构建后台时使用这些模板。

我经常遇到这样的情况，每次我开始一个新项目时，我都会反复编写相同的东西，比如查找侧边栏模板，在专用文件中定义管理路由并使用spatie中间件进行限制，以及类似的事情。因此，为什么不每次都重新发明轮子，而只是创建一个可以在我项目中重用的Bootstrap脚手架呢。

安装

在安装包本身之前，我们需要首先设置我们的项目，以便使用它。让我们先做这个。

在一个新的Laravel安装中，

1. 安装并设置认证。（Laravel Jetstream与Livewire）
2. 安装spatie权限并配置中间件
3. 创建角色admin
4. 安装包

您可以通过composer安装包

composer require iamrahul1973/bootstrap-dashboard-skeleton

安装后，发布资产。

php artsan vendor:publish --tag=bootstrap-dashboard-skeleton-assets

此外，您可能还想发布侧边栏视图，这样您就可以向仪表板侧边栏添加更多项目

php artsan vendor:publish --tag=bootstrap-dashboard-skeleton-menu-items-views

现在，您可以将resources/views/vendor/bootstrap-dashboard-skeleton/menu-items.blade.php中的链接添加更多。

路由

在routes文件夹内创建一个名为admin.php的文件，并在其中添加您的仪表板路由。这些路由由auth和spatie的角色中间件role:admin保护。（所以不要忘记先创建管理员角色）。这些路由具有名称admin，并且也以前缀admin开始。

添加一些路由并运行php artisan routes:list来检查它们。

登录响应

默认情况下，当用户登录时，Jetstream将用户重定向到/dashboard。但如果我们能将admin用户重定向到/admin会更好。要完成此操作，请向您的JetstreamServiceProvider的boot方法中添加以下内容

// Register our login Response
$this->app->singleton(
	\Laravel\Fortify\Contracts\LoginResponse::class,
	\IamRahul1973\Skeleton\Http\Responses\LoginResponse::class
);

我们的Response类所做的很简单，它会检查用户角色并决定重定向到哪个URL

$redirectTo = Auth::user()->hasRole('admin') ? '/admin' : config('fortify.home')

Flash消息

通常，在完成操作后，比如更新、创建或其他任何操作，我们会从控制器中将状态指示器闪存到会话中，检查它在blade文件中的存在，并打印消息。为了使这更简单，我们的主布局会检查不同类型的闪存状态并打印适当的消息。

所以您要做的只是将状态闪存到会话中

session()->flash('status', 'success');

这将显示DOM中的Changes Saved successfully。有关警报的更多信息，请参阅<x-bdskeleton-alert />组件。

Bootstrap组件

这仍在开发中。我们可能需要在这里进行重大改进。

警报

<x-bdskeleton-alert class="success" /> // Output : Changes Saved Successfully !
<x-bdskeleton-alert class="danger" /> // Output : Something Went Wrong !

它还会显示相应的bootstrap类。（alert-success、alert-danger。默认为alert-info）

按钮

<x-bdskeleton-button variant="success">Submit</x-bdskeleton-button>

支持的参数和默认值

• $variant = 'primary'
• $type = 'submit'
• $size = 'sm'
• $col = '12'

卡片

<x-bdskeleton-card title="Add New Item">
	<form ...>
		...
	</form>
</x-bdskeleton-card>

• $title
• $status = null // 可以是 success, danger, warning, info

表单输入

对于类型，文本、电话、日期、数字和文本区域

<x-bdskeleton-form-input label="First Name" id="firstName" name="first_name" col="6"
	defaultValue="{{ isset($user) ? $user->first_name : '' }}" />

• $label
• $id
• $name
• $type = 'text' // 可以是以下之一，textarea, tel, date, number
• $col = 4
• $defaultValue = ''
• $error = null
• $textareaRows = 4

您不必检查 old() 并显式保留值。这些组件将自动完成此操作。

表单单选框

<x-bdskeleton-form-radio label="Gender" id="gender" name="gender"
	:options="['m' => 'Male', 'f' => 'Female']"
	defaultChecked="{{ isset($user) ? $user->in_stock : '' }}" />

它具有与 FormInput 相同的参数。使用 defaultChecked 代替 defaultValue

表单下拉选择

与 Form Radio 相同。使用 defaultSelected 代替 defaultChecked

全宽行

(感觉有点过度了 :-))

<x-bdskeleton-full-width-row>
	// Content goes here
</x-bdskeleton-full-width-row>

它的作用是,

<div class="row">
	<div class="col-12">{{ $slot }}</div>
</div>

模态表单

带有表单的 Bootstrap 模态框。

• $modalId
• $modalTitle
• $formAction
• $method

侧边栏项目

此组件将侧边栏项目添加到仪表板的 resources/views/vendor/bootstrap-dashboard-skeleton/menu-items.blade.php

变更日志

请参阅CHANGELOG 了解最近更改的更多信息。

贡献

请参阅CONTRIBUTING 了解详细信息。

致谢

• Bootstrap 示例

许可

MIT 许可证 (MIT)。请参阅许可文件 了解更多信息。