类似与vue与react的 PHP 的全栈开发框架Livewire来了
前端开发越来越复杂,从最初的写html文档到现在的基于webpack的vue与react开发方式,构建工具也是层出不穷,给前后端一起开发的全栈开发工程师出了难题,那么有没有一种新的方式实现vue与react类似的全栈开发方式呢,有,他就是Livewire,Livewire 是一个适用于 Laravel 的全栈框架,我们可以通过它来构建动态的前端功能,就像写原生 PHP 代码一样:
正如 Livewire 的 Slogan 一样,它就像 Vue 和 Blade 的孩子,有了它之后,可以抛开 Vue/React 之类的 JavaScript 框架,只需要在 PHP 服务端和 Blade 视图模板文件中,通过 PHP 代码即可完成前端视图组件的开发,和我们之前通过 Vue 实现的视图组件功能一样。
Livewire快速上手
下面我们来体验下如何通过 Livewire 开发前端视图组件。
首先通过 Composer 在项目根目下安装这个扩展包:
composer require calebporzio/livewire -vvv
然后在使用 Livewire 的页面中通过 @livewireAssets 指令引入对应的 JavaScript 代码,通常我们会在公共的布局文件中引入,比如 layouts.app:
... @livewireAssets </body> </html>
接下来我们通过如下 Artisan 命令来创建一个新的视图组件:
php artisan make:livewire counter
初次执行 make:livewire 命令会在 Laravel 项目的 app/Http 目录下创建一个 Livewire 子目录,用于存放组件逻辑服务端实现代码类,然后在该目录下创建 counter 对应组件类 Counter:
<?php namespace App\Http\Livewire; use Livewire\Component; class Counter extends Component { public function render() { return view('livewire.counter'); } }
<div> {{-- The Master doesn't talk, he acts. --}} </div>
<div> <h1>Hello Livewire!<h1> </div>
引入组件
然后创建一个测试视图 resources/views/counter.blade.php 将上面这个 counter 组件引入:
@extends("layouts.app") @section('content') @livewire('counter') @endsection
Route::get('/counter', function () { return view('counter'); });
是不是非常简单!整个过程我们没有编写任何 JavaScript 及 Vue 组件代码,一切都是通过 PHP 代码和 Blade 模板代码实现的。
与服务端的交互
上述 Livewire 组件只是一段静态的 HTML 代码,而我们的组件实际上要实现的是计数器功能,这意味要要实现动态的效果,之前编写 Vue 组件的时候,相应的功能需要在 JavaScript 脚本中完成,在 Livewrie 框架中,我们把对应的业务逻辑搬到了 app/Http/Livewire 下的服务端组件类中,在 Counter 组件中,我们新增两个方法用于对计数器进行加减操作:
<?php namespace App\Http\Livewire; use Livewire\Component; class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } }
<div style="text-align: center"> <button wire:click="increment">+</button> <h1>{{ $count }}</h1> <button wire:click="decrement">-</button> </div>
Livewire 组件的实现原理和 Vue/React 并无本质区别,如果换作是 Vue 组件实现上述计数器组件的话,对应组件模板代码如下:
<template> <div style="text-align: center"> <button @click="increment">+</button> <h1>{{ count }}</h1> <button @click="decrement">-</button> </div> </template> <script> export default { data: { count: 0 }, methods: { increment() { this.count++ }, decrement() { this.count-- }, }, } </script>
然后调用脚本代码 methods 列表中定义的 increment 方法来更新 count 值;
最后重新渲染模板代码并更新 DOM。
Livewire 的实现逻辑也是一样的:
通过 wire:click="increment" 监听点击事件;
将调用 JavaScript 脚本代码改为发送 Ajax 请求到 PHP 服务器,通过 PHP 代码调用服务端 Livewire 组件类的 increment 方法更新 count 的值;
PHP 服务器重新渲染 Blade 模板并将其返回给客户端,Livewire 客户端收到响应后更新 DOM。
这一点,可以通过在开发者工具控制台中监听网络请求看到:
所以与 Vue/React 相比,Livewire 的区别就是将原本本地 JavaScript 实现的逻辑通过 HTTP 请求发送到服务端处理,然后将结果返回给客户端,再由客户端更新 DOM。也正是因为这个原因,Livewire 在实现一些本不必服务端处理的组件时性能不如 Vue/React,因为多了一层网络请求,但如果原本 JavaScript 脚本也要通过 Ajax 与服务端进行交互,这个时候使用 Livewire 和 Vue/React 在性能上就不相上下了。不过对于性能没有过高要求以及前端小白来说,Livewire 倒是个不错的选择。
官网:https://laravel-livewire.com/
网友评论