Laravel-Livewire笔记系列(六)-Livewire 发布留言-2

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

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

2）使用Livewire2.x版本

本篇案例是发布留言。发布留言之前，请确保数据表中有用户数据，且有用户登录系统。

第一步：创建留言发布组件

php artisan livewire:make LeaveMsgCreate

第二步：模板组件中使用发布留言组件

<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 style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><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-create.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)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">submit</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">prevent提交地址</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)">form</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)">submit</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">prevent</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"createLeaveMsg"</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;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"form-group"</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)">label</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">for</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span><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 style="box-sizing: border-box;color: rgb(130, 177, 255)">label</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)">textarea</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)">model</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">lazy</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">id</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">rows</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"3"</span><span style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">textarea</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><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)">点击发布后提交到createLeaveMsg方法</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)">button</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">type</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"submit"</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"btn btn-sm btn-primary"</span><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 style="box-sizing: border-box;color: rgb(130, 177, 255)">button</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)">form</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>

第四步：添加组件控制器方法

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// app/Htpp/Livewire/LeaveMsgCreate.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)">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">LeaveMsgCreate</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(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$content</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(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-create'</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"></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 style="box-sizing: border-box;color: rgb(199, 146, 234)">if</span> (<span style="box-sizing: border-box;color: rgb(130, 177, 255)">auth</span>()<span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">check</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)">auth</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)">leageMsg</span>()<span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">create</span>([</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">               <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'content'</span> <span style="box-sizing: border-box">=></span> <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)">content</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;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)">content</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">''</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>

第五步：访问路由并发布留言

必须要登录哦

我是温新

每天进步一点点，就一点