如何配置我的 Laravel 应用程序来制作动态布局？

Question

我正在制作一个 Laravel 10 项目来尝试制作动态布局。 我的主要布局是标题与左侧导航栏粘在一起，其余内容是其他刀片模板，带有

@extends('layouts.app')

和

@section('content')

。

我的问题是我需要制作“其余内容”动态布局。

• 一列 class="col-3" 将

  <ul>

  显示为类别。
• 其他列class="col-3"显示无，显示第一列中选择的类别的产品列表，此列开始显示无，我们按一个类别我想刷新此列并出现所选类别的所有项目。
• 3Column class="col" 填充其余内容并做出一些响应式，此部分专门显示第 2 列中所选产品的信息。

---

我尝试在我创建的js文件中创建一个ajax帖子，但我无法获取传递信息的动态路由，我不知道如何仅重新加载我需要的部分，例如，如果我按1列（类别），刷新仅产品，而不是整个页面。

使用 javascript ajax 方法并传递 crsf 令牌，我收到“不允许的方法”错误

我也尝试过，使用

products.show

变量调用控制器中的

$id

方法来获取category_id

我正在考虑它可能的隐藏和显示部分，并且不要在javascript中使用ajax请求。

任何人有任何想法都可以给我发一些指南。

PD：我在 BBDD 中的所有表都带有外键，试图进行约束和级联更新

如果您需要更多，请告诉我。我不需要代码，我需要一个指南来完成这个过程，使用 js post 请求或仅使用 Laravel Blades 和路由（如果可能的话）。

Answer 1

制作一个刀片模板，仅包含加载类别的第一列以及第二列和第三列的骨架。

<div>
  <div class="categories">
    @foreach($categories as $category)
      ...
    @endforeach
  </div>
  <div class="products"></div>
  <div class="details"></div> 
</div>

现在在类别上注册一个“单击”事件，并进行 ajax 调用以获取该类别的项目并用它们填充第二列的骨架。

$(`.category`).click(fn(e) => ...)

对第三列执行相同操作。