Laravel-Livewire笔记系列(七)-Livewire 事件机制新数据与分页-3

作者: 温新

分类: 【Laravel】

阅读: 1593

时间: 2021-11-16 13:10:04

作者:温新

时间:2021-08-14

hi,我是温新,一名PHPer

1)本系列笔记使用Laravel8.x作为演示;

2)使用Livewire2.x版本

在 发布留言 的过程中存在一个问题,那就是留言发布后,列表数据并没有显示出来。这个问题该如何解决?可以使用Livewire中的触发事件来解决。

数据更新

第一步:留言发布后发出事件

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">App\Http\Livewire\LeaveMsgCreate</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(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">createLeaveMsg</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><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)">emit</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'refreshMsg'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

第二步:监听事件

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">App\Http\Livewire\LeaveMsgIndex</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)">use</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">App\Models\LeaveMsg</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)">protected</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$listeners</span> <span style="box-sizing: border-box">=</span> [<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'refreshMsg'</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">refreshMsg</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>

ajax数据分页

传统的分页会使得页面重新加载。Livewire提供了一个更加友好的ajax无感刷新分页。

第一步:使用分页

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// app/Http/Livewire/LeaveMsgIndex.php</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\WithPagination</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">LeaveMsgIndex</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 style="box-sizing: border-box;color: rgb(199, 146, 234)">use</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">WithPagination</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)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">render</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(128, 203, 196)">$leaveMsgs</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">LeaveMsg</span>::<span style="box-sizing: border-box;color: rgb(130, 177, 255)">paginate</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">5</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)">return</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">view</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'livewire.leave-msg-index'</span>, <span style="box-sizing: border-box;color: rgb(222, 203, 107)">compact</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'leaveMsgs'</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span>

第二步:视图分页

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// resources/views/livewire/leave-msg-index.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)">livewire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">leave</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">msg</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">create</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><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)">ul</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;color: rgb(130, 177, 255)">@foreach</span>(<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$leaveMsgs</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">as</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</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)">li</span><span style="box-sizing: border-box">></span>{{<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">user</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">name</span>}}<span style="box-sizing: border-box">--</span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">li</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;color: rgb(130, 177, 255)">@endforeach</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)">ul</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$leaveMsgs</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">links</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>

到这里,留言发布即使显示就完成啦。

我是温新

每天进步一点点,就一点

请登录后再评论