Javascript 组织vue.js组件和Laravel后端的正确方法是什么

我有以下网站主页模板：

---

如您所见，此页面上有多个滑块。我知道每个滑块都是一个

vue.js

组件。因此，每个组件都会请求通过Post方法从服务器获取JSON数据。在我的

IndexPageController

中，我将有很多方法来实现这一点。接下来，我需要为每个滑块提供资源。这条路对吗

应该是这样的。组件是一个独立的实体，它不会影响其他外部组件。您可以请求组件收集所需的所有资源。没有其他Vue.js组件关心这些资源。您还可以在一个组件上创建不同的操作，它不会向其他组件反映任何内容。可以在组件内部执行任何操作

要解决复杂的结构，可以创建子组件，子组件可以包含另一个子组件，依此类推

您可以将服务器请求逻辑放入创建的钩子，甚至装入的钩子。由于请求总是异步的，所以需要等待组件从服务器获取所有数据。在此之前，在元素上使用一些加载器来直观地显示正在加载的内容。当你得到数据时，你知道你必须做什么

---

根据您的图片，您的整个滑块将是一个组件。滑块中的每张卡也是一个组件。在卡组件上使用v-for，动态生成多张卡。您还可以在卡组件中包含其他组件。这样你可以简化你的逻辑。如果使用单文件Vue组件（.Vue文件），效果会更好.

既然您有多个滑块，并且所有滑块都以相同的行为工作，而不是为模板的每个部分制作多个滑块组件，那么在图片中，您将得到三个滑块组件为什么不创建一个滑块组件，并将其作为道具从中提取数据的源传递给它然后使用

Axios

或

VueResource

从下面的源代码检查示例中获取数据

//test.blade.php

<div id="app">
    <slider-component :source="{{$source}}"></slider-component>
</div>

//$source is a variable you compacted it (passed it) to blade view on render
//it could be the endpoint you want to fetch data from 
//for example if you want to pull hot-deals items it could be "/products/hot-deals"
//if you want it to be most viewed items then "/products/most-viewed" and so on
//for sure you have to register routes in your app that matches these end points

这是产品控制器

use App\Models\Product;

class ProductController extends Controller {

    public function hotDeals(){
        //query your product model to select the hot-deals items for example
        return Product::where('price' , '<=' , 100);
    }
}

使用App\Models\Product；
类ProductController扩展控制器{
公共功能热卖（）{
//查询您的产品型号以选择热门交易项目，例如
退货产品：：where（'price'，谢谢您的回答！！我想问一下服务器上的文件结构（在Laravel中）。我将为一个组件创建一个资源。是否正确？您的后端结构不必与Vue组件做任何事情。您只需从Vue组件发出请求，然后从服务器接收响应。但返回的数据必须为JSON格式。您可以使用Axios自动将响应转换为JSON格式。确定）我从vue js的角度理解它），但从Laravel的角度看，哪种方式更有用？你怎么看？谢谢你的回答！以及我如何组织Laravel方面的代码？
//routes/web.php
Route::get('/products/hot-deals" , "ProductController@hotDeals");

use App\Models\Product;

class ProductController extends Controller {

    public function hotDeals(){
        //query your product model to select the hot-deals items for example
        return Product::where('price' , '<=' , 100);
    }
}