在SQL查询完成前加载带占位符的Laravel视图

当然可以！这种场景下，异步加载数据+先渲染占位符是提升用户体验的绝佳方案，完全能解决你说的“服务器无响应”的感知问题。下面结合你的现有代码，一步步教你实现：

1. 调整路由，新增数据接口 #

首先需要添加一个专门返回统计数据的API路由，用来异步获取缓存后的查询结果：

// web.php route
Route::get('/results', 'ProgramController@showResults');
// 新增异步获取数据的路由
Route::get('/results/data', 'ProgramController@getResultsData');

2. 修改控制器逻辑 #

拆分原来的方法：一个负责快速返回视图（不等待SQL查询），另一个专门处理数据查询并返回JSON格式结果：

// ProgramController
public function showResults() {
    // 直接返回视图，无需等待SQL查询完成
    return view ('backend.results');
}

public function getResultsData() {
    // 保留原有的缓存逻辑
    $vw = Cache::remember('vwResultsCache',3,function(){
        return DB::table('vwResults')->first();
    });
    
    // 返回JSON格式的数据供前端调用
    return response()->json([
        'count1' => $vw->count1,
        'count2' => $vw->count2,
        'count3' => $vw->count3
    ]);
}

3. 更新视图，添加占位符和异步加载脚本 #

在视图中先展示友好的占位内容，然后通过JavaScript异步请求数据并更新页面：

<!-- backend.results view -->
<span> Welcome to the page</span>
<tbody>
<tr>
    <!-- 先显示加载占位符 -->
    <td id="count1">加载中...</td>
    <td id="count2">加载中...</td>
    <td id="count3">加载中...</td>
</tr>
</tbody>

<script>
// 页面加载完成后触发异步请求
document.addEventListener('DOMContentLoaded', function() {
    // 请求数据接口
    fetch('/results/data')
        .then(response => response.json())
        .then(data => {
            // 用返回的数据更新页面内容
            document.getElementById('count1').textContent = data.count1;
            document.getElementById('count2').textContent = data.count2;
            document.getElementById('count3').textContent = data.count3;
        })
        .catch(error => {
            // 处理请求失败的情况，给用户友好提示
            console.error('数据加载失败:', error);
            const cells = ['count1', 'count2', 'count3'];
            cells.forEach(id => {
                document.getElementById(id).textContent = '加载失败，请刷新重试';
            });
        });
});
</script>

额外优化小技巧 #

• 可以给占位符加个CSS加载动画（比如旋转的小图标），让用户更直观感知到正在加载
• 如果缓存时间较长，可考虑在前端用localStorage做二次缓存，避免重复请求
• 对于网络较差的场景，可添加重试逻辑

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