Laravel+Vue实现无按钮实时自动搜索报500错误问题排查

直接导致500的核心原因 #

• 路由顺序错误
  Laravel路由按照注册顺序从上到下匹配，你先注册了Route::resource资源路由，资源路由自带的inscripcioneswebs/{id}路由会优先匹配请求，把路径里的buscador当做资源ID参数传入默认的show方法，根本不会走到你自定义的buscador控制器方法，触发逻辑错误。
• 查询方法调用错误
  控制器的查询逻辑中，paginate(10)本身已经执行查询返回分页结果集，后面额外链式调用->get()会调用不存在的方法/触发查询逻辑异常，直接抛出500错误。
• 视图文件拼写不匹配（概率触发）
  你贴出的blade模板文件名为incripcioneswebs.blade.php，控制器中返回的视图路径是inscripcioneswebs.inscripcioneswebs，文件名比路径少了首字母后的s（in开头对比ins开头），如果实际文件确实拼写错误，会触发视图不存在的500错误。

修复方案 #

1. 调整路由注册顺序 #

把自定义的搜索路由移到资源路由之前，修改routes/web.php：

// 自定义路由优先注册
Route::get('inscripcioneswebs/buscador', 'InscripcionesWebController@buscador');
Route::resource('inscripcioneswebs', InscripcionesWebController::class);

2. 修正控制器查询逻辑 #

删除paginate()后多余的->get()调用，修改控制器中的buscador方法：

public function buscador(Request $request)
{
    $buscador = $request->buscador;

    $inscripcioneswebs = Inscripciones_Web::select('INS_WEB_ID')
                ->where('INS_WEB_ID', 'LIKE', '%' . $buscador . '%')
                ->paginate(10);

    return view('inscripcioneswebs.inscripcioneswebs')->with('inscripcioneswebs', $inscripcioneswebs);
}

3. 修正视图文件名（如果存在拼写错误） #

把blade模板文件名从incripcioneswebs.blade.php改为inscripcioneswebs.blade.php，放到resources/views/inscripcioneswebs/目录下，和控制器返回的视图路径保持一致。

4. 前端逻辑优化（非500原因，但影响功能正常使用） #

原JS代码每次请求用+=拼接返回内容，会导致搜索结果重复叠加，把+=改为=直接覆盖结果容器内容即可，修改inscripcionweb.js：

new Vue({
    el: '#inscripcionweb',
    mounted: function() {
        document.getElementById("buscador").addEventListener("keyup", function() {
            fetch(`/inscripcioneswebs/buscador?buscador=${document.getElementById("buscador").value}`, {
                method: 'get'
            })
            .then(response => response.text())
            .then(html => {
                // 改为直接赋值，避免重复拼接内容
                document.getElementById("resultados").innerHTML = html
            })
            .catch(error => console.log(error))
        })
    },
});

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