Cómo mostrar un mensaje flash usando Vue.js en Laravel
Un mensaje flash es un tipo de mensaje de texto que aparece inmediatamente en la pantalla del teléfono móvil del destinatario sin que el usuario tenga que realizar ninguna acción para leerlo. También se conoce como SMS de clase 0 o mensaje emergente.
Los mensajes flash generalmente se usan para enviar información urgente o urgente, como una notificación de que se ha realizado un pago o un recordatorio sobre una próxima cita. También se pueden utilizar para enviar mensajes promocionales, como un código de descuento o el anuncio de un nuevo producto.
En este tutorial, aprenderemos cómo mostrar mensajes flash con componentes Vue.js en aplicaciones Laravel. Para mostrar mensajes Flash usando Vue.js en Laravel seguimos estos pasos.
Tabla de contenido
- Paso 1: Instale la aplicación Laravel 8
- Paso 2: Conexión de la aplicación a la base de datos
- Paso 3: Crear modelo y migración
- Paso 4: Configuración de NPM
- Paso 5: Agregar rutas
- Paso 6: Crear controlador por comando
- Paso 7: Crear componente Vue
- Paso 8: Registre la aplicación Vue
- Paso 9: ejecutar el servidor de desarrollo
Paso 1: Instale la aplicación Laravel 8
Ejecute el siguiente comando en la terminal para instalar la última aplicación de laravel:
composer create-project --prefer-dist laravel/laravel blog Paso 2: Conexión de la aplicación a la base de datos
Visite el directorio raíz de su proyecto y abra el archivo .env . Luego configure la credencial de la base de datos en el archivo .env de la siguiente manera:
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 herePaso 3: Hacer modelo y migración
Ejecute el siguiente comando en la terminal para hacer el modelo y la migración:
php artisan make:model Post -mEste comando creará un nombre de modelo post.php y también creará un archivo de migración para la tabla de publicaciones .
Ahora abra el archivo de migración create_postss_table.php desde la base de datos>migraciones y reemplace la función up() con el siguiente código:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}A continuación, migre la tabla con el siguiente comando:
php artisan migratePaso 4: Configuración de NPM
Configure Vue e instale las dependencias de Vue mediante NPM. Así que ejecute el siguiente comando en el símbolo del sistema:
php artisan preset vueInstale todas las dependencias de Vue:
npm installPaso 5: Agregar rutas
Visite la carpeta de rutas y abra el archivo web.php y agregue las siguientes rutas a su archivo:
rutas/web.php
use App\Http\Controllers\PostController;
Route::get('post', function () {
return view('post');
});
Route::post('store', [PostController::class, 'store']);Paso 6: Crear controlador por comando
Ejecute el siguiente comando para crear un controlador por un artesano:
php artisan make:controller PostControllerDespués de eso, vaya app\Http\Controllers y abra el archivo PostController.php . Luego actualice el siguiente código en su archivo PostController.php :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Use App\Models\Post;
class PostController extends Controller
{
public function store(Request $request)
{
$insert['title'] = $request->get('title');
$insert['description'] = $request->get('description');
$check = Post::insertGetId($insert);
return response()->json($check);
}
}Paso 7: Crear componente Vue
Siguiente paso, vaya a resources/assets/js/components la carpeta y cree un archivo llamado Post.vue .
Y actualice el siguiente código en su archivo de componentes Post.vue :
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header"> Laravel Vue js Flash Message Example </div>
<div class="card-body">
<form @submit="formStore">
<strong> Title:</strong>
<input type="text" class="form-control" v-model="title">
<strong> Description:</strong>
<textarea class="form-control" v-model="description"> </textarea>
<button class="btn btn-success"> Submit</button>
</form>
<strong> Output:</strong>
<pre>
{{output}}
</pre>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data() {
return {
title: '',
description: '',
output: ''
};
},
methods: {
formStore(e) {
e.preventDefault();
let currentObj = this;
axios.post('/store', {
title: this.title,
description: this.description
})
.then(function (response) {
currentObj.output = response.data;
flash('Post Created Successfully', 'success');
})
.catch(function (error) {
currentObj.output = error;
});
}
}
}
</script> Luego, cree un nuevo componente llamado flash.vue y actualice el siguiente código en el archivo flash.vue :
<template>
<div class="alert alert-success spacing" role="alert" v-show="show">
{{ body }}
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {
show : false,
body : ''
}
},
created() {
if(this.message) {
this.flash(this.message)
}
window.events.$on('flash',(message) => this.flash(message))
},
methods: {
flash(message) {
this.show = true
this.body = message
setTimeout(() => {
this.hide()
},3000)
},
hide() {
this.show = false
}
}
}
</script>
<style>
.spacing {
position: fixed;
right: 25px;
bottom: 25px;
}
</style>Ahora abra resources/assets/js/app.js e incluya el componente Post.vue y Flash.vue de la siguiente manera:
require('./bootstrap');
window.Vue = require('vue');
window.events = new Vue();
window.flash = function(message) {
window.events.$emit('flash',message);
}
Vue.component('post-component', require('./components/Post.vue'));
Vue.component('flash', require('./components/Flash.vue'));
const app = new Vue({
el: '#app'
});Paso 8: Registre la aplicación Vue
En este paso, debe crear un archivo de vista de hoja para definir la aplicación de Vue. Vaya a resources/views la carpeta y cree un archivo llamado post.blade.php . Luego actualice el siguiente código en el archivo post.blade.php :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 8 Vue Flash Message Example - laratutorials.com</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<flash message=""></flash>
<post-component></post-component>
</div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>Paso 9: ejecutar el servidor de desarrollo
Abra la terminal o cmd y ejecute el siguiente comando para iniciar el servidor de desarrollo:
npm run dev
or
npm run watchEn este tutorial, ha aprendido a mostrar un mensaje flash con Vue js en aplicaciones laravel.