Morioh
Login
中條 美冬

中條 美冬

11 months ago

Vue.jsを使用してLaravel 8アプリにフクロウカルーセルを実装する方法

Owl Carousel は、レスポンシブなカルーセル スライダーを作成できる jQuery プラグインです。これは、スライドショー、製品ギャラリー、その他の種類のインタラクティブ コンテンツを作成する場合によく使用される選択肢です。

このチュートリアルでは、Vue.js を使用して Laravel 8 アプリに Owl Carousel を実装する方法を学びます。Vue.js を使用して Laravel 8 アプリケーションに Owl Carousel を実装するには、次の手順に従います。

目次

  • ステップ 1: Laravel 8 アプリをインストールする
  • ステップ 2: アプリをデータベースに接続する
  • ステップ 3: モデルの作成と移行
  • ステップ 4: Vue Js の NPM モジュール構成
  • ステップ 5: ルートを追加する
  • ステップ 6: コマンドによるコントローラーの作成
  • ステップ 7: Vue コンポーネントを作成する
  • ステップ 8: ブレード ビューを作成し、Vue コンポーネントを初期化する
  • ステップ 9: 開発サーバーを実行する

ステップ 1: Laravel 8 アプリをインストールする

このステップでは、laravel の最新アプリケーションセットアップをインストールする必要があるため、ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。

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

ステップ 2: アプリをデータベースに接続する

laravel の新しいアプリケーションが正常にインストールされたら、プロジェクトのルート ディレクトリに移動し、.env ファイルを開きます。次に、次のように.env ファイルでデータベース資格情報を設定します。

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

ステップ 3: モデルの作成と移行

次のステップでは、次のコマンドを実行する必要があります。

php artisan make:model Slider -m

このコマンドは、モデル名slider.php を1 つ作成し、スライダーテーブル用の移行ファイルも 1 つ作成します。

ここで、 database>migrationsから create_sliders_table.php 移行ファイルを開き  、  up() 関数を次のコードに置き換えます。

<?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');
    }
}

次に、以下のコマンドを使用してテーブルを移行します。

php artisan migrate

次に、 app/Models/Slider.phpに移動し、次のようにSlider.phpモデルに次のコードを更新します。

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

ステップ 4: Vue Js の NPM モジュール構成

NPM を使用して Vue をセットアップし、Vue の依存関係をインストールする必要があります。そこで、コマンドプロンプトで次のコマンドを実行します。

php artisan preset vue

すべての Vue 依存関係をインストールします。

npm install

その後、以下のコマンドを使用して、owl carousel の依存関係をインストールします。

npm i -s vue-owl-carousel

ステップ 5: ルートを追加する

次のステップでは、routesフォルダーに移動してweb.phpファイルを開き、次のルートをファイルに追加します。

ルート/web.php

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

ステップ 6: コマンドによるコントローラーの作成

次のステップでは、コマンド プロンプトを開き、次のコマンドを実行して、職人によってコントローラーを作成します。

php artisan make:controller SliderController

その後、  SliderController.phpapp\Http\Controllersファイルに移動し て開きます。次に、次のコードをSliderController.phpファイルに更新します。

<?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);
         
    }
}

ステップ 7: Vue コンポーネントを作成する

次のステップでは、フォルダーに移動し 、 SliderComponent.vueresources/assets/js/components というファイルを作成します 。

ここで、 SliderComponent.vueコンポーネント ファイルに次のコードを更新します。

<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>

次に、 次のようにSliderComponent.vueresources/assets/js/app.jsコンポーネントを開いて 組み込みます  。

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

ステップ 8: ブレード ビューを作成し、Vue コンポーネントを初期化する

この手順では、リソース/ビューに移動し、layoutsという名前のフォルダーを 1 つ作成します。このフォルダー内に、app.blade.phpファイルという名前のブレード ビュー ファイルを 1 つ作成します。

次に、resources/views/layoutsに移動し、app.blade.phpファイルを開きます。次に、次のコードをapp.blade.phpファイルに更新します。

<!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>

次に、resource/views/に移動し、welocome.blade.phpを開きます。次に、次のコードを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

ステップ 9: 開発サーバーを実行する

ターミナルで次のコマンドを実行して、開発サーバーを起動します。

npm run dev
or 
npm run watch

このチュートリアルでは、laravel アプリの複数の項目に対して vue js で owl carousel slider を使用する方法を学びました。

1.30 GEEK