Creación de un API RESTFUL GET, POST, PUT, DELETE en Vue.js 3 y PHP primera parte

Cómo implementar un sistema de usuarios con sus peticiones GET, POST, PUT, DELETE en Vue.js y PHP.

Introducción

Un sistema de usuarios es una funcionalidad común en muchas aplicaciones web, que permite registrar, autenticar, autorizar y gestionar a los usuarios que acceden a la aplicación. Un sistema de usuarios requiere de una base de datos para almacenar la información de los usuarios, y de una API para comunicarse con la base de datos desde el lado del cliente.

En este artículo, vamos a ver cómo implementar un sistema de usuarios con sus peticiones GET, POST, PUT, DELETE en Vue.js y PHP. Vue.js es un framework de JavaScript que nos permite crear interfaces de usuario reactivas y modulares, usando componentes y directivas. PHP es un lenguaje de programación que nos permite crear scripts del lado del servidor, que pueden interactuar con una base de datos MySQL y generar respuestas en formato JSON.

Requisitos previos

1. Para seguir este artículo, se necesita tener instalado y configurado lo siguiente:
2. Visual Studio Code o cualquier otro editor de código.
3. Node.js y npm para instalar las dependencias de Vue.js.
4. Vue CLI para crear el proyecto de Vue.js.
5. XAMPP o cualquier otro servidor web con PHP y MySQL.
6. Postman o cualquier otra herramienta para probar la API.

Creación del proyecto de Vue.js

Lo primero que vamos a hacer es crear el proyecto de Vue.js usando el Vue CLI. Para ello, abrimos una terminal y ejecutamos el siguiente comando:

vue create vue-php-users

Este comando nos pedirá que elijamos algunas opciones de configuración, como el modo de instalación, las características que queremos incluir, el linter/formateador, etc. Podemos elegir las opciones que más nos convengan, o simplemente aceptar las opciones por defecto.

Una vez creado el proyecto, nos movemos al directorio del proyecto y ejecutamos el siguiente comando para iniciar el servidor de desarrollo:

cd vue-php-users
npm run serve

Este comando nos mostrará la dirección y el puerto donde se está ejecutando el servidor, que por defecto será http://localhost:8080. Si abrimos esta dirección en el navegador, veremos la página de bienvenida de Vue.js.

Creación de la base de datos y la tabla de usuarios

Lo siguiente que vamos a hacer es crear la base de datos y la tabla de usuarios que vamos a usar para el sistema de usuarios. Para ello, abrimos el panel de control de XAMPP y activamos los servicios de Apache y MySQL. Luego, abrimos el navegador y accedemos a http://localhost/phpmyadmin, que es la interfaz web para administrar las bases de datos de MySQL.

En la página de phpMyAdmin, hacemos clic en el botón Nueva, que se encuentra en el panel izquierdo, para crear una nueva base de datos. Le ponemos el nombre que queramos, por ejemplo, vue_php_users, y hacemos clic en el botón Crear.

Una vez creada la base de datos, hacemos clic en su nombre en el panel izquierdo, y luego en el botón SQL, que se encuentra en la parte superior, para ejecutar una consulta SQL. En el campo de texto que aparece, escribimos la siguiente consulta para crear la tabla de usuarios:

CREATE TABLE users (
 id INT(11) NOT NULL AUTO_INCREMENT,
 name VARCHAR(255) NOT NULL,
 email VARCHAR(255) NOT NULL UNIQUE,
 password VARCHAR(255) NOT NULL,
 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
 updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (id)
);

Esta consulta crea una tabla llamada users, con los siguientes campos:

1. id: un número entero que identifica de forma única a cada usuario, y que se genera automáticamente al insertar un nuevo usuario.
2. name: una cadena de texto que almacena el nombre del usuario, y que no puede ser nula.
3. email: una cadena de texto que almacena el correo electrónico del usuario, que no puede ser nulo ni repetido.
4. password: una cadena de texto que almacena la contraseña del usuario, que no puede ser nula.
5. created_at: una marca de tiempo que almacena la fecha y hora de creación del usuario, que se asigna automáticamente al insertar un nuevo usuario. updated_at: una marca de tiempo que almacena la fecha y hora de actualización del usuario, que se asigna automáticamente al actualizar un usuario existente.

Hacemos clic en el botón Continuar para ejecutar la consulta y crear la tabla de usuarios. Podemos ver la estructura y los datos de la tabla en el panel izquierdo, haciendo clic en su nombre.

Creación de la API con PHP

Ahora que tenemos la base de datos y la tabla de usuarios, vamos a crear la API con PHP que nos permitirá comunicarnos con la base de datos desde el lado del cliente. La API tendrá los siguientes endpoints:

1. GET /api/users: para obtener la lista de todos los usuarios. GET /api/users/:id: para obtener los datos de un usuario por su id.
2. POST /api/users: para crear un nuevo usuario.
3. PUT /api/users/:id: para actualizar los datos de un usuario por su id.
4. DELETE /api/users/:id: para eliminar un usuario por su id.

Para crear la API, vamos a usar el patrón de diseño MVC (Modelo-Vista-Controlador), que nos permite separar la lógica de la aplicación en tres capas:

1. Modelo: se encarga de la interacción con la base de datos, realizando las consultas y devolviendo los resultados.
2. Vista: se encarga de la presentación de los datos, generando la respuesta en el formato adecuado, como JSON o XML.
3. Controlador: se encarga de la lógica de negocio, recibiendo las peticiones, validando los datos, llamando al modelo y enviando la vista.

Para implementar el patrón MVC, vamos a crear una estructura de directorios y archivos dentro de la carpeta del proyecto de Vue.js. Para ello, abrimos el explorador de archivos y creamos una nueva carpeta llamada backend, que contendrá el código de la API. Dentro de la carpeta backend, creamos las siguientes subcarpetas y archivos:

1. config: contiene el archivo de configuración de la base de datos. database.php: contiene el código para conectar a la base de datos y obtener una instancia de la clase PDO (PHP Data Objects).
2. models: contiene los archivos de los modelos de la aplicación. user.php: contiene el código del modelo de usuario, con los atributos, el constructor y los métodos para realizar las operaciones CRUD.
3. controllers: contiene los archivos de los controladores de la aplicación. userController.php: contiene el código del controlador de usuario, con los métodos para manejar las peticiones y llamar al modelo y a la vista.
4. views: contiene los archivos de las vistas de la aplicación. userView.php: contiene el código de la vista de usuario, con el método para generar la respuesta en formato JSON.
5. .htaccess: contiene el código para reescribir las URLs y redirigir las peticiones al archivo
6. index.php. index.php: contiene el código para procesar las peticiones y llamar al controlador adecuado.

A continuación, vamos a ver el código de cada uno de estos archivos.

config/database.php

Este archivo contiene el código para conectar a la base de datos y obtener una instancia de la clase PDO, que nos permite ejecutar consultas SQL de forma segura y eficiente. El código es el siguiente:

<?php
class Database
{
 // Propiedades para almacenar los datos de conexión
 private $host = "localhost";
 private $db_name = "vue_php_users";
 private $username = "root";
 private $password = "";
 private $conn;
 // Método para obtener la conexión
 public function getConnection()
 {
 // Inicializar la conexión a null
 $this->conn = null;
 try {
 // Crear una nueva instancia de PDO con los datos de conexión
 $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password); // Establecer el modo de error a excepción
 $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 } catch (PDOException $exception) {
 // Mostrar el mensaje de error si ocurre una excepción
 echo "Connection error: " . $exception->getMessage();
 }
 // Devolver la conexión
 return $this->conn;
 }
}

models/user.php

Este archivo contiene el código del modelo de usuario, con los atributos, el constructor y los métodos para realizar las operaciones CRUD. El código es el siguiente:

Continuara en el siguiente articulo. 💕