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

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

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

2）使用Livewire2.x版本

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

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

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

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// resources/views/livewire/study-list.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">我是livewire组件</span><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$webUrl</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">绑定一个点击事件</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">click</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"getWebName"</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$webName</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>

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

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// Livewire/StudyList.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><?</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">namespace</span> <span style="box-sizing: border-box">App\Http\Livewire</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">use</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Faker\Generator</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">use</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Livewire\Component</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span> <span style="box-sizing: border-box">StudyList</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">extends</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Component</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 省略上篇文章的代码</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 获取网站名称的方法</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">getWebName</span>(<span style="box-sizing: border-box;color: rgb(130, 177, 255)">Generator</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$faker</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 对webName进行重新赋值</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 这样就修改了数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">webName</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$faker</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">name</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

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

第三步：路由访问

你的live路由。

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

我是温新

每天进步一点点，就一点点