Morioh
Login
Duck Hwan

Duck Hwan

11 months ago

Vue.js를 사용하여 Laravel 8 앱에서 Owl Carousel을 구현하는 방법

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를 생성 하고 슬라이더 테이블 에 대한 하나의 마이그레이션 파일도 생성합니다 .

이제 데이터베이스>마이그레이션 에서 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단계: 경로 추가

다음 단계에서 route 폴더로 이동하여 web.php 파일을 열고 파일에 다음 경로를 추가합니다.

경로/web.php

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

6단계: 명령으로 컨트롤러 만들기

다음 단계에서는 명령 프롬프트를 열고 다음 명령을 실행하여 장인이 컨트롤러를 만듭니다.

php artisan make:controller SliderController

그런 다음  SliderController.php 파일 로 이동하여 app\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 라는 하나의 폴더를 만듭니다 . 이 폴더 안에 app.blade.php 파일이라는 하나의 블레이드 보기 파일을 만듭니다.

다음으로 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>

다음으로 resources/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 슬라이더를 사용하는 방법을 배웠습니다.

1.55 GEEK