如何在Laravel中使用单个清除按钮清空通知屏及弹窗滚动条通知

1. 前端通知栏新增清空按钮 #

在现有通知弹窗的HTML结构中添加清空按钮，示例结构如下：

<!-- 通知弹窗头部区域 -->
<div class="notification-header">
  <span>系统通知</span>
  <!-- 新增一键清空按钮 -->
  <button id="clear-all-notice" class="btn btn-sm btn-outline-secondary">清空全部</button>
</div>
<!-- 滚动通知列表容器 -->
<div class="notice-list-scroll" id="notice-container">
  <!-- 原有通知项示例 -->
  <div class="notice-item">预支薪资申请已通过</div>
  <div class="notice-item">直播请求已通过</div>
</div>

2. 前端jQuery绑定点击事件 #

绑定按钮点击逻辑，先即时清空前端展示内容，再请求后端同步删除数据库数据：

$(document).ready(function(){
  $('#clear-all-notice').click(function(){
    // 立即清空前端通知列表，用户无感知延迟
    $('#notice-container').empty();
    // 同步清除右上角未读角标（如果有）
    $('.notice-unread-badge').text(0).hide();

    // AJAX请求后端删除当前用户的所有通知
    $.ajax({
      url: '/notice/clear-all',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}' // Laravel POST请求必填csrf令牌
      },
      success: function(res){
        if(res.code === 200){
          // 可选：添加轻量成功提示
          toastr.success('所有通知已清空');
        }
      },
      error: function(){
        toastr.error('操作失败，请刷新后重试');
      }
    })
  })
})

3. 后端Laravel接口实现 #

3.1 新增路由 #

在routes/web.php中添加接口路由：

Route::post('/notice/clear-all', 'NotificationController@clearAll');

3.2 新增控制器处理逻辑 #

如果使用自定义通知模型，示例代码如下：

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Notification; // 替换为你自己的通知模型

class NotificationController extends Controller
{
    public function __construct()
    {
        // 登录校验，仅登录用户可操作
        $this->middleware('auth');
    }

    public function clearAll(Request $request)
    {
        // 删除当前登录用户的所有通知
        Notification::where('user_id', auth()->id())->delete();

        return response()->json([
            'code' => 200,
            'msg' => '清空成功'
        ]);
    }
}

如果你使用Laravel自带的数据库通知系统，把删除逻辑替换为以下代码即可：

\Illuminate\Notifications\DatabaseNotification::where('notifiable_id', auth()->id())->delete();

注意事项 #

• 如果不需要物理删除通知仅做前端隐藏，可以给通知表新增is_hidden tinyint类型字段，把删除逻辑替换为update(['is_hidden' => 1])，后续查询通知时过滤该字段即可保留历史数据
• 如果你的CRM有多端同步需求，可以在清空逻辑后加websocket推送，同步其他端的通知状态，无多端需求的场景下上述代码可直接使用

内容的提问来源于stack exchange，提问作者rahul singh