前后端分离应用跨域请求laravel和vue

后端laravel操作:
参考页面:https://laravelacademy.org/post/9273.html
安装
首先在mishop终端通过 Composer 安装扩展包:
composer require barryvdh/laravel-cors
使用
在 app/Http/Kernel.php 的 $middleware 数组中添加 HandleCors 中间件：

    protected $middleware = [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ];

配置
在终端继续输入命令:
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
命令完成之后 ,会在config文件夹下面生成一个cors.php文件夹
路由
在routes/api.php里面添加路由,

   Route::namespace('Api')->group(function () {
       //首页
       Route::get('/', 'HomeController@index');
});

控制器
在终端新建控制器:php artisan make:controller Api/HomeController
然后新建方法,将数据发送给前端

public function index()
    {
        $products = Product::all();
        $ads = Ad::all();
        $categories = Category::all();
        return response()->json(compact('products','ads','categories'));
    }

打印
浏览器输入:http://127.0.0.1:8000/api 就可以查询打印的数据
后端操作传值结束

<script>
    // @ is an alias to /src
    import Footer from '@/components/shared/Footer.vue'

    export default {
        name: 'home',
        components: {
            Footer
        },
        data() {
            return {
                data:[]
            }
        },
        //初始化
        created() {
            this.init();
        },
        updated() {
            $('.flexslider').flexslider({
                animation: "slide",
                directionNav: false
            });
        },
        methods: {
            init: function () {
                this.axios.get(`http://127.0.0.1:8000/api`).then((res) => {
                 this.data = res.data
                })
            }
        }
    }
</script>

数据全部在data里面,模版里面 从data里取值即可
需要循环取值的话,标签里面写 v-for="product in data.products"
图片写法不同<img class="ico" :src="product.image">
if语句:
<img class="tag " v-if="product.is_new ==1" src="assets/img/new.png">
<img class="tag " v-else src="assets/img/hot.png">