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.
Requisitos previos
Antes de comenzar, asegúrate de tener instalado lo siguiente en tu sistema:
- PHP (versión 8.0 o superior)
- Composer
- Node.js y npm
- MySQL o cualquier otro sistema de gestión de bases de datos que prefieras
Paso 1: Configuración del entorno de Laravel
Instalación de Laravel
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.
Configuración de la base de datos
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.
Migraciones
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
Paso 2: Crear la API en Laravel
Controlador
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();
}Rutas API
Abre routes/api.php y define las rutas para las publicaciones:
use App\Http\Controllers\PostController;
Route::apiResource('posts', PostController::class);Paso 3: Configuración de Vue.js
Instalar Vue.js
Primero, vamos a instalar Vue.js en el proyecto. Cambia al directorio blog y ejecuta:
npm install npm install vue@next vue-router
Estructura de archivos
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>Integrar Vue.js en Laravel
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>Compilar los activos
Ahora, compila los activos de Vue.js utilizando:
npm run dev
Paso 4: Ejecutar el proyecto
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.
Conclusió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.
Recursos adicionales
¡Buena suerte con tu proyecto!
