Laravel-Livewire笔记系列(三)-Livewire好用得过分的前后端交互

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

1）本系列笔记使用Laravel8.x作为演示；

2）使用Livewire2.x版本

试想一下前后端交互是一个怎样的情景？前端编写发送请求数据的逻辑，后端编写数据查询逻辑，然后返回给前端。对于这个过程你会觉得是复杂呢还是简单呢？

这个过程复不复杂对于Livewire来说可能是复杂了。Livewire使用了更为简单暴力的方法，爱上了她有可能就不会JS了。下面来体验一个它的过分吧。

本案例以上篇文件作为基础，因此想要体验此案例，自己写或者完成上篇文章的案例吧。

第一步：修改组件模板页面

// resources/views/livewire/study-list.blade.php
<div>
    <p>我是livewire组件</p>
    <p>{{ $webUrl }}</p>
    <!-- 绑定一个点击事件 -->
    <p wire:click="getWebName">{{ $webName }}</p>
</div>

静态页面中，模拟点击发送请求获取数据。但是却没有看到相关的js代码。

第二步：组件控制器编写代码

// Livewire/StudyList.php
<?php

namespace App\Http\Livewire;

use Faker\Generator;
use Livewire\Component;

class StudyList extends Component
{
    // 省略上篇文章的代码

    // 获取网站名称的方法
    public function getWebName(Generator $faker)
    {
        // 对webName进行重新赋值
        // 这样就修改了数据
        $this->webName = $faker->name;
    }
}

这样就完成了对数据的修改，只需要点击它，它就会发生数据的变化。F12打开控制台就可以看到这其中的变化了。点击一次就会发送一次请求，然后修改了数据。

第三步：路由访问

你的live路由。

需要注意的是，这里并没有对live.blade.php视图模板进行修改，它仍旧是上篇文章中的内容。