Morioh
Login
André Schürrle

André Schürrle

11 months ago

So implementieren Sie Owl Carousel in der Laravel 8-App mit Vue.js

Owl Carousel ist ein jQuery-Plugin, mit dem Sie reaktionsfähige Karussell-Schieberegler erstellen können. Es ist eine beliebte Wahl zum Erstellen von Diashows, Produktgalerien und anderen Arten interaktiver Inhalte.

In diesem Tutorial erfahren Sie, wie Sie Owl Carousel in einer Laravel 8-App mit Vue.js implementieren. Um Owl Carousel in der Laravel 8-Anwendung mit Vue.js zu implementieren, führen wir die folgenden Schritte aus.

Inhaltsverzeichnis

  • Schritt 1: Installieren Sie die Laravel 8-App
  • Schritt 2: App mit Datenbank verbinden
  • Schritt 3: Modell erstellen und migrieren
  • Schritt 4: NPM-Modulkonfiguration für Vue Js
  • Schritt 5: Routen hinzufügen
  • Schritt 6: Controller per Befehl erstellen
  • Schritt 7: Vue-Komponente erstellen
  • Schritt 8: Blade-Ansichten erstellen und Vue-Komponenten initialisieren
  • Schritt 9: Entwicklungsserver ausführen

Schritt 1: Installieren Sie die Laravel 8-App

In diesem Schritt müssen Sie das neueste Anwendungs-Setup von Laravel installieren. Öffnen Sie also Ihr Terminal ODER die Eingabeaufforderung und führen Sie den folgenden Befehl aus:

 composer create-project --prefer-dist laravel/laravel blog

Schritt 2: App mit Datenbank verbinden

Nachdem Sie die neue Laravel-Anwendung erfolgreich installiert haben, gehen Sie in das Stammverzeichnis Ihres Projekts und öffnen Sie die .env-Datei . Richten Sie dann die Datenbankanmeldeinformationen wie folgt in der .env-Datei ein:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Schritt 3: Modell erstellen und migrieren

Im nächsten Schritt müssen Sie den folgenden Befehl ausführen:

php artisan make:model Slider -m

Dieser Befehl erstellt einen Modellnamen „slider.php“ und außerdem eine Migrationsdatei für die Slider- Tabelle.

Öffnen Sie nun die Migrationsdatei „create_sliders_table.php“ unter „  Datenbank > Migrationen“  und ersetzen Sie  die Funktion „up()“  durch den folgenden Code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSlidersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('sliders', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('path');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('sliders');
    }
}

Als nächstes migrieren Sie die Tabelle mit dem folgenden Befehl:

php artisan migrate

Navigieren Sie als Nächstes zu app/Models/Slider.php und aktualisieren Sie den folgenden Code wie folgt in Ihr Slider.php- Modell:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Slider extends Model
{
    use HasFactory;
 
    protected $guarded = [];
 
}

Schritt 4: NPM-Modulkonfiguration für Vue Js

Sie müssen Vue einrichten und Vue-Abhängigkeiten mithilfe von NPM installieren. Führen Sie also den folgenden Befehl an der Eingabeaufforderung aus:

php artisan preset vue

Installieren Sie alle Vue-Abhängigkeiten:

npm install

Anschließend installieren Sie die Owl-Carousel-Abhängigkeiten mit dem folgenden Befehl:

npm i -s vue-owl-carousel

Schritt 5: Routen hinzufügen

Gehen Sie im nächsten Schritt zum Ordner „Routen“ , öffnen Sie die Datei „web.php “ und fügen Sie die folgenden Routen zu Ihrer Datei hinzu:

Routen/web.php

use App\Http\Controllers\SliderController;
 
Route::get('slider', [SliderController::class, 'index']);

Schritt 6: Controller per Befehl erstellen

Öffnen Sie im nächsten Schritt Ihre Eingabeaufforderung und führen Sie den folgenden Befehl aus, um einen Controller von einem Handwerker zu erstellen:

php artisan make:controller SliderController

Gehen Sie danach zur  Datei SliderController.phpapp\Http\Controllers  und öffnen Sie sie . Aktualisieren Sie dann den folgenden Code in Ihrer SliderController.php- Datei:

<?php 
 
namespace App\Http\Controllers;
 
use App\Models\Slider;
 
use Illuminate\Http\Request;
 
class SliderController extends Controller
{
    public function index(Request $request)
    {
        $sliderImg = Slider::get();
        return response()->json($sliderImg);
         
    }
}

Schritt 7: Vue-Komponente erstellen

Gehen Sie im nächsten Schritt zum  resources/assets/js/components Ordner und erstellen Sie eine Datei mit dem Namen  SliderComponent.vue .

Aktualisieren Sie nun den folgenden Code in Ihrer SliderComponent.vue- Komponentendatei:

<template>
    <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
               <carousel>
                <img class="img-fluid" v-for="(img, index) in images" :src="img.path" :key="index">
               </carousel>
          </div>
        </div>
    </div>
</template>
<script>
import carousel from "vue-owl-carousel";
export default {
  components: {
    carousel
  },
  name: "Owl Carousel",
  props: {
    msg: String
  },
  data() {
      return {
          images: []
      }
  },
  created() {
      this.axios
          .get('http://localhost:8000/slider')
          .then(response => {
              this.images = response.data;
          });
  }
};
</script>

Öffnen Sie nun  die Komponente SliderComponent.vueresources/assets/js/app.js  und fügen Sie sie   wie folgt ein:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('slider-component', require('./components/SliderComponent.vue').default);
const app = new Vue({
    el: '#app',
});

Schritt 8: Blade-Ansichten erstellen und Vue-Komponenten initialisieren

Navigieren Sie in diesem Schritt zu resources/views und erstellen Sie einen Ordner mit dem Namen „layouts“ . Erstellen Sie in diesem Ordner eine Blade-Ansichtsdatei mit dem Namen app.blade.php .

Navigieren Sie als Nächstes zu resources/views/layouts und öffnen Sie die Datei app.blade.php . Aktualisieren Sie dann den folgenden Code wie folgt in Ihre app.blade.php- Datei:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 Vue JS Owl Carousel Slider Example</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Navigieren Sie als Nächstes zu resources/views/ und öffnen Sie welocome.blade.php . Aktualisieren Sie dann den folgenden Code wie folgt in Ihre Datei „welcome.blade.php“ :

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue JS Owl Carousel Slider Example</div>
                     
                <div class="card-body">
                  <slider-component></slider-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

Schritt 9: Entwicklungsserver ausführen

Führen Sie den folgenden Befehl auf dem Terminal aus, um den Entwicklungsserver zu starten:

npm run dev
or 
npm run watch

In diesem Tutorial haben Sie gelernt, wie Sie den Eulen-Karussell-Schieberegler mit Vue JS für mehrere Elemente in Laravel-Apps verwenden.

1.05 GEEK