Laravel API客户端：Blade用JS还是控制器请求数据？

针对你的问题，两种方案各有适用场景，结合小型项目的特点，下面直接拆解核心区别和最优实践：

两种方案的核心差异 #

• Blade内嵌fetch()：属于前端异步交互模式，页面无需刷新，但大量JS逻辑会让Blade文件臃肿，前后端代码混杂，后期维护成本上升。
• 控制器用Http::get()/Http::delete()：属于后端代理调用的服务端渲染模式，页面会刷新，但业务逻辑集中在控制器，Blade仅负责视图渲染，代码结构更清晰。

小型项目的最优选择：控制器Http调用 #

对于小型项目（单人或小团队维护），优先选择后端控制器代理API请求，原因如下：

1. 代码结构更整洁：Blade只做视图渲染，API调用、数据处理等逻辑全部放在控制器，避免Blade文件变成前后端代码的混合体。
2. 维护成本更低：不用兼顾前后端分离的代码组织规则，统一在后端调试、修改，降低心智负担。
3. 安全性更优：后端调用API可以隐藏敏感信息（如API密钥、内部请求头），不会暴露在前端JS代码中。
4. 开发效率更高：无需编写异步回调、前端状态处理逻辑，直接在控制器拿到数据后传给Blade渲染，代码量更少。

举个控制器调用API的示例：

// 控制器方法
public function index()
{
    // 后端调用API拿发票列表
    $response = Http::get(config('services.api.url') . '/invoices');
    $invoices = $response->json();
    
    return view('invoices.index', compact('invoices'));
}

public function destroy(Invoice $invoice)
{
    // 后端调用API删除发票
    Http::delete(config('services.api.url') . "/invoices/{$invoice->id}");
    
    return redirect()->back()->with('success', '发票删除成功');
}

Blade文件仅负责渲染：

<!-- 发票列表 -->
@foreach($invoices as $invoice)
    <div class="invoice-item">
        <span>{{ $invoice->number }}</span>
        <!-- 普通表单提交，无需JS -->
        <form action="{{ route('invoices.destroy', $invoice) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">删除</button>
        </form>
    </div>
@endforeach

折中方案：保留动态交互但抽离JS代码 #

如果你需要部分无刷新的动态交互（比如删除后不刷新页面），可以保留fetch()调用，但不要把JS内嵌在Blade里，而是抽离到单独的JS文件中：

1. 创建单独的JS文件：resources/js/invoices.js

// 抽离的JS逻辑
document.querySelectorAll('.delete-invoice-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
        e.preventDefault();
        const invoiceId = btn.dataset.invoiceId;
        
        await fetch(`/api/invoices/${invoiceId}`, { method: 'DELETE' });
        // 局部更新页面，无需刷新
        btn.closest('.invoice-item').remove();
    });
});

2. 在Blade中引入该JS文件：

@vite('resources/js/invoices.js')

<!-- 渲染删除按钮 -->
<button class="delete-invoice-btn" data-invoice-id="{{ $invoice->id }}">删除</button>

这种方式既保留了动态交互，又避免了Blade文件的杂乱，适合需要少量前端交互的小型项目。

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