Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial De Ejemplo De Deslizador De Carrusel De Búho De Laravel 8 Vue JS

En este artículo, le explicaremos cómo crear el ejemplo de control deslizante de carrusel de Vue js Owl en laravel 8 (Tutorial de ejemplo de control deslizante de carrusel de búho de Laravel 8 Vue JS). Podemos crear fácilmente un control deslizante de carrusel usando el paquete vue js npm. entonces, en este ejemplo, instalaremos el paquete npm vue-owl-carousel.

A veces, necesitamos un control deslizante para compartir nuestra historia o cartera en el sitio web porque la ayuda del control deslizante para el usuario puede comprender fácilmente nuestra historia.

Ahora, sigamos los pasos a continuación sobre cómo crear un control deslizante de carrusel de búhos.

Visión general

Paso 1: Instalar laravel
Paso 2: Establecer la configuración de la base de datos
Paso 3: Crear tabla mediante la migración
Paso 4: Crear un modelo y controlador
Paso 5: Instalar Vue
Paso 6: Crear ruta
Paso 7: Crear componente y actualizar app.js
Paso 8: Actualizar Blade Files
Paso 9: Ejecute nuestra aplicación Laravel
Paso 1: Instale laravel

Instala el laravel usando el siguiente comando.

Paso 2: Establecer la configuración de la base de datos

Después de la instalación completa de laravel. tenemos que configurar la base de datos. ahora abriremos el archivo .env y cambiaremos el nombre de la base de datos, el nombre de usuario y la contraseña en el archivo .env. Vea los cambios a continuación en un archivo .env.

Paso 3: Crear tabla usando la migración
Ahora, necesitamos crear una migración. por lo que a continuación usaremos el comando crear la migración de la tabla de reservas.
Cree la tabla usando el siguiente comando.

Después de completar la migración. necesitamos los siguientes cambios en el archivo database / migrations / create_bookings_table.

Ejecute el siguiente comando. después de los cambios del archivo anterior.

Paso 4: crear un modelo y un controlador

Ahora, crearemos el controlador y el modelo usando el siguiente comando y pegaremos el siguiente código en este controlador.

SliderController.php

Slider.php

Paso 5: Instale Vue
En este paso, vaya al directorio del proyecto usando el símbolo del sistema. después de eso, instalaremos Vue js en laravel 8 y ejecutaremos el paquete vue-owl-carousel.

Paso 6: crear ruta

Agregue el siguiente código de ruta en el archivo "routes / web.php".

Paso 7: Cree el componente y actualice los recursos de app.js
/ js / components / SliderComponent.vue

resources / js / app.js

Paso 8: Actualice los archivos Blade
Por último, primero debemos crear el archivo app.blade.php en "resources / views / layouts /" y actualizar el archivo welcome.blade.php en el directorio "resources / views /". para que pueda ver el siguiente código.
recursos / vistas / diseños / app.blade.php

welcome.blade.php

Paso 9: Ejecutar nuestra aplicación Laravel
Podemos iniciar el servidor y ejecutar este ejemplo usando el siguiente comando.

Ahora ejecutaremos nuestro ejemplo usando la siguiente URL en el navegador.

Publicar un comentario

0 Comentarios