Construir un blog puede ser una tarea emocionante y educativa. En este tutorial, te guiaremos a través del proceso de crear un blog desde cero utilizando Laravel 11 para el backend y Vue.js para el frontend. Este enfoque te permitirá aprovechar las capacidades robustas de Laravel para el manejo de datos y la API, mientras disfrutas de la naturaleza reactiva y moderna de Vue.js en el cliente.
Antes de comenzar, asegúrate de tener instalado lo siguiente en tu sistema:
Abre tu terminal y ejecuta el siguiente comando para instalar Laravel:
composer create-project --prefer-dist laravel/laravel blog
Esto creará un nuevo proyecto de Laravel en un directorio llamado blog.
Abre el archivo .env en la raíz de tu proyecto y configura las variables de conexión de la base de datos:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nombre_de_tu_base_de_datos DB_USERNAME=tu_usuario DB_PASSWORD=tu_contraseña
Asegúrate de crear una base de datos con el nombre que hayas especificado.
Laravel utiliza migraciones para gestionar esquemas de base de datos. Para nuestro blog, necesitaremos una tabla para las publicaciones. Crea una migración con el siguiente comando:
php artisan make:migration create_posts_table --create=posts
Abre la migración recién creada en database/migrations y edítala para que se vea así:
public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('content'); $table->timestamps(); }); }
Ejecuta la migración:
php artisan migrate
Ahora, necesitamos un controlador para manejar las operaciones CRUD. Crea un controlador llamado PostController:
php artisan make:controller PostController
Edita el controlador en app/Http/Controllers/PostController.php y añade los métodos necesarios:
use App\Models\Post; public function index() { return Post::all(); } public function store(Request $request) { $validated = $request->validate([ 'title' => 'required|max:255', 'content' => 'required', ]); return Post::create($validated); } public function show(Post $post) { return $post; } public function update(Request $request, Post $post) { $validated = $request->validate([ 'title' => 'required|max:255', 'content' => 'required', ]); $post->update($validated); return $post; } public function destroy(Post $post) { $post->delete(); return response()->noContent(); }
Abre routes/api.php y define las rutas para las publicaciones:
use App\Http\Controllers\PostController; Route::apiResource('posts', PostController::class);
Primero, vamos a instalar Vue.js en el proyecto. Cambia al directorio blog y ejecuta:
npm install npm install vue@next vue-router
Crea la estructura de archivos para Vue.js en resources/js/components. Dentro de esta carpeta, crea un archivo llamado PostComponent.vue y otro llamado App.vue.
PostComponent.vue
<template> <div> <h2>{{ post.title }}</h2> <p>{{ post.content }}</p> </div> </template> <script> export default { props: ['post'], } </script>
App.vue
<template> <div> <h1>Blog</h1> <PostComponent v-for="post in posts" :key="post.id" :post="post" /> </div> </template> <script> import PostComponent from './components/PostComponent.vue'; export default { components: { PostComponent }, data() { return { posts: [], } }, mounted() { fetch('http://localhost:8000/api/posts') .then(response => response.json()) .then(data => { this.posts = data; }); }, } </script>
Para asegurarte de que Vue.js se ejecute correctamente, abre resources/js/app.js y añade:
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
Luego, en la vista principal de Laravel, resources/views/welcome.blade.php, añade el siguiente código en el lugar deseado:
<div id="app"></div> <script src="{{ mix('js/app.js') }}"></script>
Ahora, compila los activos de Vue.js utilizando:
npm run dev
Asegúrate de que el servidor de Laravel esté en funcionamiento ejecutando:
php artisan serve
Esto levantará el servidor en http://localhost:8000. Ahora, abre tu navegador y accede a esta dirección para ver tu blog en acción.
Has construido un blog básico utilizando Laravel 11 y Vue.js. Este tutorial te ha presentado una guía clara sobre cómo configurar un backend robusto y un frontend interactivo. Desde aquí, puedes seguir mejorando tu blog añadiendo características como la autenticación de usuarios, comentarios y la paginación.
¡Buena suerte con tu proyecto!
Page loaded in 25.00 ms