当前位置: 首页 > 知识库问答 >
问题:

laravel 后端数据变化时前端页面自动刷新的问题?

田宇
2023-04-27

使用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>

后台数据变动时,删除\修改\添加, 前端数据都不自动变化,我哪里出问题了,应该怎么解决?请各位高手赐教,非常感谢

共有4个答案

蒋畅
2023-04-27

你的问题是数据没有实时更新,你已经用了 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();
    }

    // ...
}
东郭阳德
2023-04-27

加一个事件监听方法

https://laravel-livewire.com/docs/2.x/events

章海
2023-04-27

这可能是因为前端没有及时获取最新的后台数据导致的。解决方法可以有以下几种:

  1. 实时刷新:在后台数据变动时,可以使用 WebSocket 或者长轮询等技术实时通知前端进行数据更新。
  2. 定时轮询:定时轮询后台接口,获取最新的数据。但是需要注意轮询的时间间隔,过于频繁会增加服务器负担,过于缓慢会导致数据不及时更新。
  3. 利用缓存:在前端应用中使用缓存技术,例如 localStorage 或者 Vuex 等,存储后台数据的副本,并定时刷新。这种方式可以减少对服务器的请求,提高性能。
  4. 使用响应式框架:例如 Vue.js 和 React 等响应式框架,能够实现数据的自动更新,即当数据变动时,会自动更新视图,无需手动操作。

综上所述,使用实时刷新或响应式框架可能是比较优秀的解决方案,但是需要具体情况具体分析。

曾元忠
2023-04-27

一般大屏数据都会是异步加载数据,可以配置自动刷新间隔,比如5秒?

你这种就是在页面加载(mount)时,去绘制(render)一次页面。

livewire没用过,大概查了一下,好像只是可以自动生成CRUD对应的界面?

你应该需要改造一下这个页面。

做数据实时刷新一般两种思路:

  • 前端定时拉取:①短连接 ②长轮询
  • 后端主动推送:①WebSocket ②HTTP2
 类似资料:
  • 假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率。对于所有这些类型的页面,您需要定期刷新网页。 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

  • 问题内容: 我是新手。我正在使用获取对象列表并将其显示在第一页上的服务。然后根据单击的对象,在下一页上设置选项卡标题。但是,当我刷新页面时,列表的范围丢失了,并且选项卡头引发了异常,导致页面无法显示信息。即使刷新第二页,是否可以保留上一个屏幕上单击了哪个对象的信息? 问题答案: 您可以使用角度本地存储 角度本地存储 示例如何使用它: 使用本地存储的示例