使用laravel 做一个展示大屏项目,后台的数据变化时,如何让前端的页面自动刷新.我想到的办法是使用laravel livewire组件. 具体代码如下:
http/livewire/show.php(控制器代码)
use App\Zdrw;
use App\Djgz;
use App\Shgg;
use App\Sjjb;
class Show extends Component
{
public $zdrws;
public $djgzs;
public $shggs;
public $sjjbs;
public function mount()
{
$this->zdrws = Zdrw::all();
$this->djgzs = Djgz::all();
$this->shggs = Shgg::all();
$this->sjjbs = Sjjb::all();
}
public function render()
{
return view('livewire.show');
}
}
前端页面
views/home.blade.php
//这里按照文档添加了wie:poll
<div wire:poll>
<livewire:show />
</div>
views/livewire/show.blade.php
<table id="table" data-toggle="table" data-pagination="false" data-page-size="8" data-search="false">
<thead>
<tr>
<th data-sortable="true">ID</th>
<th data-sortable="true">任务名称</th>
<th data-sortable="true">牵头科室</th>
<th data-sortable="true">责任人</th>
<th data-sortable="true">完成时限</th>
<th data-sortable="true">工作进度</th>
</tr>
</thead>
<tbody wire:model="zdrws">
@foreach($zdrws as $zdrw)
<tr>
<td>{{$zdrw->id}}</td>
<td>{{$zdrw->name}}</td>
<td>{{$zdrw->department}}</td>
<td>{{$zdrw->person}}</td>
<td>{{$zdrw->finish}}</td>
<td>{{$zdrw->status}}</td>
</tr>
@endforeach
</tbody>
</table>
后台数据变动时,删除\修改\添加, 前端数据都不自动变化,我哪里出问题了,应该怎么解决?请各位高手赐教,非常感谢
你的问题是数据没有实时更新,你已经用了 wire:poll 指令,但是你没有指定轮询的时间间隔,你可以先写一个事件类:
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;
class DataUpdated implements ShouldBroadcast
{
use SerializesModels;
public function __construct()
{
//
}
public function broadcastOn()
{
return new Channel('data-updated');
}
}
然后,在数据更新的地方触发这个事件:
event(new App\Events\DataUpdated());
接下来,修改 Livewire 组件,监听广播的事件并重新获取数据:
use App\Events\DataUpdated;
// ...
class Show extends Component
{
// ...
protected $listeners = [
'echo:data-updated,DataUpdated' => 'updateData',
];
public function updateData()
{
$this->zdrws = Zdrw::all();
$this->djgzs = Djgz::all();
$this->shggs = Shgg::all();
$this->sjjbs = Sjjb::all();
}
// ...
}
加一个事件监听方法
https://laravel-livewire.com/docs/2.x/events
这可能是因为前端没有及时获取最新的后台数据导致的。解决方法可以有以下几种:
综上所述,使用实时刷新或响应式框架可能是比较优秀的解决方案,但是需要具体情况具体分析。
一般大屏数据都会是异步加载数据,可以配置自动刷新间隔,比如5秒?
你这种就是在页面加载(mount)时,去绘制(render)一次页面。
livewire
没用过,大概查了一下,好像只是可以自动生成CRUD对应的界面?
你应该需要改造一下这个页面。
做数据实时刷新一般两种思路:
假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率。对于所有这些类型的页面,您需要定期刷新网页。 Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新。 刷新网页的最简单的方式是使用响应对象的方法 setIntHeader()。以下是这种方法的定义: public void setIntHeader(String header, int headerValue
代码如下: 期望触发了事件页面上就更新数据
uniapp项目如何监听页面刷新
目前是开发环境,history模式,有个index.vue的主页加了路由组件<RouterView/>,在路由导航守卫中向这个页面动态加了子路由,点击菜单的时候,跳转到了对应页面,但刷新后会打到404页面,后面发现是加了这个导致的“path: "/:catchAll(.*)",redirect: '/404',” 如果不加则正常,但是控制台会出现警告[Vue Router warn]: No ma
问题内容: 我是新手。我正在使用获取对象列表并将其显示在第一页上的服务。然后根据单击的对象,在下一页上设置选项卡标题。但是,当我刷新页面时,列表的范围丢失了,并且选项卡头引发了异常,导致页面无法显示信息。即使刷新第二页,是否可以保留上一个屏幕上单击了哪个对象的信息? 问题答案: 您可以使用角度本地存储 角度本地存储 示例如何使用它: 使用本地存储的示例