Laravel Livewire：它是什么以及如何在您的 Web 应用程序中使用它
Livewire 是 Laravel 生态系统中最重要的项目之一，专门针对前端开发。 Livewire v3 最近发布了，让我们来探讨一下 Livewire 是什么，以及什么样的项目适合它的架构。
Livewire 的独特之处在于它允许开发“现代”Web 应用程序，而无需使用专用的 JavaScript 框架。
使用 Livewire，可以开发提供与 Vue 或 React 相同水平的反应性的 Blade 组件，而无需通过解耦的前端和后端来管理项目的复杂性。 您可以在 Laravel 和 Blade 模板的范围内继续开发您的应用程序。
Livewire 的工作原理
Livewire 是一个 Composer 包，您可以将其添加到 Laravel 项目中。然后必须使用适当的 Blade 指令在每个 HTML 页面（或该页面，如果您想要创建单页面应用程序）上激活它。 Livewire 组件由 PHP 类和 Blade 文件组成，其中包含特定前端组件如何工作以及必须呈现的逻辑。
当浏览器要求访问使用 Livewire 的页面时，会发生以下情况：
- 页面以组件的初始状态呈现，就像使用 Blade 创建的任何页面一样；
- 当组件 UI 触发交互时，将对适当的路由进行 AJAX 调用，指示 Livewire 组件和发生的交互，以及组件的状态；
- 数据在组件的 PHP 部分进行处理，该部分执行交互结果的新渲染并将其发送回浏览器；
- 页面的 DOM 根据从服务器收到的更改而更改。
它与 Vue 和 React 的做法非常相似，但在这种情况下，响应交互的反应性逻辑由后端管理，而不是在 javascript 端管理。
为了帮助您更好地理解逻辑，我将在下面向您展示此比较的示例。
如果您想了解更多有关建立开发人员驱动的公司所面临的挑战，您可以在 Linkedin 或 X 上关注我。
如何安装 Laravel Livewire
Livewire 安装绝对是最少的。在 Laravel 项目中安装 Composer 包，并将必要的 Blade 指令添加到所有页面（或项目中所有 Blade 模板所衍生的通用布局）。
composer require livewire/livewire
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
如何创建 Laravel Livewire 组件
安装 Composer 包后，可以使用新的 Artisan make 子命令来创建新的 Livewire 组件。每个组件都将由一个 PHP 类和一个 Blade 视图组成。
它类似于 Blade 基于类的组件。
php artisan make:livewire SpyInput COMPONENT CREATED ? CLASS: app/Http/Livewire/SpyInput.php VIEW: resources/views/livewire/spy-input.blade.php
此示例中的组件将“监视”HTML 输入字段中写入的内容，而无需编写 JavaScript 代码。
然后我们将公共属性插入到组件类中：
// app/Http/Livewire/SpyInput.php
namespace App\Livewire;
use Livewire\Component;
class SpyInput extends Component
{
public string $message;
public function render()
{
return view('livewire.spy-input');
}
}
实现组件视图如下：
// resources/views/livewire/spy-input.blade.php
<div>
<label>Type here:</label>
<input type="text" wire:model="message"/>
<span>You typed: <span>{{ $message }}</span></span>
</div>
最后将 Livewire 组件放入刀片视图中：
<html>
<head>
@livewireStyles
</head>
<body>
<livewire:spy-input />
@livewireScripts
</body>
</html>
在普通的 Blade 组件中，组件类的所有公共属性在 Blade 模板中都是可见的。所以在 {{ $message }} 中$message 属性的值将自动显示。然而，在普通的基于类的组件中，这只发生在第一个组件渲染时。如果您在输入字段中输入内容，span 标记中不会发生任何变化。
但是，在Livewire 组件中，我们在字段中使用了wire:model="message" 属性。该属性确保输入字段的值链接到 PHP 类中的 $message 属性。当您在输入字段中写入新值时，它将发送到服务器，服务器更新 $message 的值并执行新的渲染，将其发送回前端，然后更新 {{ 中的文本$message }}.
通过打开浏览器开发工具的“网络”选项卡，我们会注意到键盘上的每个按键都会按以下路线调用服务器：
/livewire/message/<COMPONENT-NAME>
对每个调用的响应都包含组件的新渲染 HTML，Livewire 会将其插入到页面中代替旧的 HTML。可以使用各种自定义导线属性。例如，您可以在单击按钮时执行组件类的公共方法。以下是此出价的示例：
<button wire:click="doSomething">Click Here</button>
class SpyInput extends Component
{
public function doSomething()
{
// Your code here…
}
}
其中 doSomething 是 Livewire 组件的 PHP 类的公共方法。
Integration with other Laravel features
The PHP class connected to the component behaves like any other PHP class in a Laravel project. The only difference is that it uses the mount method instead of the classic __construct class constructor to initialize the public properties of the class.
{{-- Initial assignment of the the $book property in the ShowBook class --}}
<livewire:show-book :book="$book">
class ShowBook extends Component
{
public $title;
public $excerpt;
// "mount" instead of "__constuct"
public function mount(Book $book = null)
{
$this->title = $book->title;
$this->excerpt = $book->excerpt;
}
}
You can also use the protected property $rules to configure the validation restrictions on the data sent from the frontend to the backend. You have to call the validate() method to validate the data:
<form wire:submit.prevent="saveBook">
<input type="text" wire:model="title"/>
@error('title') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="excerpt"/>
@error('excerpt') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="isbn"/>
@error('isbn') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save Book</button>
</form>
class BookForm extends Component
{
public $title;
public $excerpt;
public $isbn;
protected $rules = [
'title' => ['required', 'max:200'],
'isbn' => ['required', 'unique:books', 'size:17'],
'excerpt' => 'max:500'
];
public function saveBook()
{
$validated = $this->validate($this->rules);
Book::create($validated);
return redirect()->to('/books);
}
}
Or you can use PHP Attributes to declare the desired validation rules for a class property:
class BookForm extends Component
{
#[Validate('required|max:200')]
public $title;
#[Validate('required|unique:books|size:17')]
public $isbn;
#[Validate('max:500')]
public $excerpt;
public function saveBook()
{
$this->validate();
Book::create([
'title' => $this->title,
'isbn' => $this->isbn,
'excerpt' => $this->excerpt,
]);
return redirect()->to('/books);
}
}
In general, each Livewire component behaves in the ways that a Laravel developer expects from a PHP class inside a Laravel project. Thus allowing the creation of reactive web interfaces without the need to separate the development projects between Laravel and Vue/React.
Monitor your Laravel application for free
Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel package and you are ready to go.
If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.
Or learn more on the website: https://inspector.dev
以上是Laravel Livewire：它是什么以及如何在您的 Web 应用程序中使用它的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
在PHP API中说明JSON Web令牌（JWT）及其用例。
Apr 05, 2025 am 12:04 AM
JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、
会话如何劫持工作，如何在PHP中减轻它？
Apr 06, 2025 am 12:02 AM
会话劫持可以通过以下步骤实现：1.获取会话ID，2.使用会话ID，3.保持会话活跃。在PHP中防范会话劫持的方法包括：1.使用session_regenerate_id()函数重新生成会话ID，2.通过数据库存储会话数据，3.确保所有会话数据通过HTTPS传输。
PHP 8.1中的枚举（枚举）是什么？
Apr 03, 2025 am 12:05 AM
PHP8.1中的枚举功能通过定义命名常量增强了代码的清晰度和类型安全性。1)枚举可以是整数、字符串或对象，提高了代码可读性和类型安全性。2)枚举基于类，支持面向对象特性，如遍历和反射。3)枚举可用于比较和赋值，确保类型安全。4)枚举支持添加方法，实现复杂逻辑。5)严格类型检查和错误处理可避免常见错误。6)枚举减少魔法值，提升可维护性，但需注意性能优化。
描述扎实的原则及其如何应用于PHP的开发。
Apr 03, 2025 am 12:04 AM
SOLID原则在PHP开发中的应用包括：1.单一职责原则（SRP）：每个类只负责一个功能。2.开闭原则（OCP）：通过扩展而非修改实现变化。3.里氏替换原则（LSP）：子类可替换基类而不影响程序正确性。4.接口隔离原则（ISP）：使用细粒度接口避免依赖不使用的方法。5.依赖倒置原则（DIP）：高低层次模块都依赖于抽象，通过依赖注入实现。
解释PHP中的晚期静态绑定（静态：:)。
Apr 03, 2025 am 12:04 AM
静态绑定（static::）在PHP中实现晚期静态绑定（LSB），允许在静态上下文中引用调用类而非定义类。1）解析过程在运行时进行，2）在继承关系中向上查找调用类，3）可能带来性能开销。
什么是REST API设计原理？
Apr 04, 2025 am 12:01 AM
RESTAPI设计原则包括资源定义、URI设计、HTTP方法使用、状态码使用、版本控制和HATEOAS。1.资源应使用名词表示并保持层次结构。2.HTTP方法应符合其语义，如GET用于获取资源。3.状态码应正确使用，如404表示资源不存在。4.版本控制可通过URI或头部实现。5.HATEOAS通过响应中的链接引导客户端操作。
您如何在PHP中有效处理异常（尝试，捕捉，最后，投掷）？
Apr 05, 2025 am 12:03 AM
在PHP中，异常处理通过try,catch,finally,和throw关键字实现。1)try块包围可能抛出异常的代码；2)catch块处理异常；3)finally块确保代码始终执行；4)throw用于手动抛出异常。这些机制帮助提升代码的健壮性和可维护性。
PHP中的匿名类是什么？您何时可以使用它们？
Apr 04, 2025 am 12:02 AM
匿名类在PHP中的主要作用是创建一次性使用的对象。1.匿名类允许在代码中直接定义没有名字的类，适用于临时需求。2.它们可以继承类或实现接口，增加灵活性。3.使用时需注意性能和代码可读性，避免重复定义相同的匿名类。
