Laravel Htmx:一个允许你直接从 HTML 访问现代浏览器功能的库
Laravel  /  管理员 发布于 3星期前   108
Laravel htmx 是一个由 Maurizio Bonani 制作的软件包,它为你提供了使用 htmx 的好方法。
htmx 是一个允许你直接从 HTML 访问现代浏览器功能的库,而不是使用 JavaScript:
htmx 可让您直接在 HTML 中使用属性访问 AJAX、CSS 过渡、WebSockets 和服务器发送事件,
因此您可以利用超文本的简洁性和强大功能构建现代用户界面。
htmx 体积小(~14k min.gz'd)、无依赖性、可扩展、兼容 IE11,
与 react 相比,代码量减少了 67%
让我们看看 Laravel htmx 软件包在自述中概述的功能:
Htmx 请求
你可以从容器中解析一个 HtmxRequest 实例,它提供了读取 htmx 特定请求头的快捷方式。
use Mauricius\LaravelHtmx\Http\HtmxRequest;
Route::get('/', function (HtmxRequest $request)
{
// always true if the request is performed by Htmx
$request->isHtmxRequest();
// indicates that the request is via an element using hx-boost
$request->isBoosted();
// the current URL of the browser
$request->getCurrentUrl();
// true if the request is for history restoration after a miss in the local history cache
$request->isHistoryRestoreRequest()
// the user response to an hx-prompt
$request->getPromptResponse();
// the id of the target element if it exists
$request->getTarget();
// the name of the triggered element if it exists
$request->getTriggerName();
// the id of the triggered element if it exists
$request->getTriggerId();
});
Htmx 响应
HtmxResponse 客户端重定向
当收到带有 HX-Redirect 头信息的响应时,htmx 可以触发客户端重定向。
HtmxResponseClientRedirect 可轻松触发此类重定向。
use Mauricius\LaravelHtmx\Http\HtmxResponseClientRedirect;
Route::get('/', function (HtmxRequest $request)
{
return new HtmxResponseClientRedirect('/somewhere-else');
});
HtmxResponseClientRefresh
htmx 收到带有 HX-Refresh 标头的响应时,会触发页面重载。
HtmxResponseClientRefresh 是一个自定义响应类,可用于发送此类响应。
它不需要参数,因为 htmx 会忽略任何内容。
use Mauricius\LaravelHtmx\Http\HtmxResponseClientRefresh;
Route::get('/', function (HtmxRequest $request)
{
return new HtmxResponseClientRefresh();
});
HtmxResponseStopPolling
使用轮询触发器时,htmx 会在遇到特殊 HTTP 状态代码 286 的响应时停止轮询。
HtmxResponseStopPolling 是带有该状态代码的自定义响应类。
use Mauricius\LaravelHtmx\Http\HtmxResponseStopPolling;
Route::get('/', function (HtmxRequest $request)
{
return new HtmxResponseStopPolling();
});
对于所有其余可用的标题,您都可以使用 HtmxResponse 类。
use Mauricius\LaravelHtmx\Http\HtmxResponse;
Route::get('/', function (HtmxRequest $request)
{
return with(new HtmxResponse())
->location($location) // Allows you to do a client-side redirect that does not do a full page reload
->pushUrl($url) // pushes a new url into the history stack
->replaceUrl($url) // replaces the current URL in the location bar
->reswap($option) // Allows you to specify how the response will be swapped
->retarget($selector); // A CSS selector that updates the target of the content update to a different element on the page
});
此外,您还可以使用 addTrigger 方法触发客户端事件。
use Mauricius\LaravelHtmx\Http\HtmxResponse;
Route::get('/', function (HtmxRequest $request)
{
return with(new HtmxResponse())
->addTrigger($event)
->addTriggerAfterSettle($event)
->addTriggerAfterSwap($event);
});
您可以多次调用这些方法来触发多个事件。
使用 Htmx 渲染刀片片段
该库还提供了用于渲染模板片段的基本 Blade 扩展。
该库提供了两个新的 Blade 指令:
@fragment 和 @endfragment。
您可以使用这些指令在模板中指定一个内容块,然后只渲染该内容。
例如
{{-- /contacts/detail.blade.php --}}
<html>
<body>
<div hx-target="this">
@fragment("archive-ui")
@if($contact->archived)
<button hx-patch="/contacts/{{ $contact->id }}/unarchive">Unarchive</button>
@else
<button hx-delete="/contacts/{{ $contact->id }}">Archive</button>
@endif
@endfragment
</div>
<h3>Contact</h3>
<p>{{ $contact->email }}</p>
</body>
</html>
在模板中定义了这个片段后,我们就可以渲染整个模板了:
Route::get('/', function ($id) {
$contact = Contact::find($id);
return View::make('contacts.detail', compact('contact'));
});
或者,我们可以使用在 \Illuminate\View\View 类中定义的 renderFragment 宏,
只渲染模板的存档-ui 片段:
Route::patch('/contacts/{id}/unarchive', function ($id) {
$contact = Contact::find($id);
// The following approaches are equivalent
// Using the View Facade
return \Illuminate\Support\Facades\View::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the view() helper
return view()->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the HtmxResponse Facade
return \Mauricius\LaravelHtmx\Facades\HtmxResponse::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the HtmxResponse class
return with(new \Mauricius\LaravelHtmx\Http\HtmxResponse())
->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
});
OOB 交换支持
htmx 支持通过 hx-swap-oop 返回多个部分响应来更新多个目标。
使用该库,您可以将 HtmxResponse 用作返回类型,从而返回多个片段。
例如,我们想使用对 /todos/{id} 的 PATCH 请求将一个待办事项标记为已完成。
通过同一请求,我们还想在页脚更新还剩多少个待办事项:
{{-- /todos.blade.php --}}
<html>
<body>
<main hx-target="this">
<section>
<ul class="todo-list">
@fragment("todo")
<li id="todo-{{ $todo->id }}" @class(['completed' => $todo->done])>
<input
type="checkbox"
class="toggle"
hx-patch="/todos/{{ $todo->id }}"
@checked($todo->done)
hx-target="#todo-{{ $todo->id }}"
hx-swap="outerHTML"
/>
{{ $todo->name }}
</li>
@endfragment
</ul>
</section>
<footer>
@fragment("todo-count")
<span id="todo-count" hx-swap-oob="true">
<strong>{{ $left }} items left</strong>
</span>
@endfragment
</footer>
</main>
</body>
</html>
我们可以使用 HtmxResponse 返回多个片段:
Route::patch('/todos/{id}', function ($id) {
$todo = Todo::find($id);
$todo->done = !$todo->done;
$todo->save();
$left = Todo::where('done', 0)->count();
return HtmxResponse::addFragment('todomvc', 'todo', compact('todo'))
->addFragment('todomvc', 'todo-count', compact('left'));
});
在 GitHub 上了解有关 Laravel htmx 软件包的更多信息。
https://github.com/mauricius/laravel-htmx
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号