Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

PHP con Vue.js y MySQL: Tutorial de CRUD de la API REST

 En este tutorial, crearemos una aplicación RESTful CRUD con PHP y MySQL en el backend y Vue.js en el frontend. También usaremos Axios para enviar solicitudes Ajax a PHP desde Vue.

La biblioteca Vue.js, el cliente Axios y la tecnología Ajax le permiten obtener y mostrar datos en su aplicación sin la necesidad de actualizar toda la página cada vez.

Para la base de datos usaremos MySQL, la base de datos más popular utilizada por los desarrolladores de PHP.

Creando la base de datos MySQL

En su terminal, inicie el cliente MySQL usando:

mysql -u root -p

Ingrese su contraseña cuando se le solicite y presione Enter.

A continuación, cree una base de datos utilizando la siguiente declaración SQL:

mysql> create database vuedb;

A continuación, cree la siguiente tabla SQL en su vuedbbase de datos:

mysql> use vuedb;
mysql> CREATE TABLE `contacts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `city` varchar(100),
  `country` varchar(100),
  `job` varchar(100)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

PHP Vue.js MySQL

Cree la aplicación PHP y MySQL CRUD

Ahora, creemos una aplicación PHP y MySQL CRUD. Abra una nueva terminal, navegue hasta su directorio de trabajo y luego cree una carpeta para su proyecto:

$ cd ~/demos
$ mkdir php-vuejs-crud

A continuación, navegue en la carpeta de su proyecto y agregue un index.phparchivo:

$ cd php-vuejs-crud
$ touch index.php

Abra el index.phparchivo y agregue el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP| MySQL | Vue.js | Axios Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
</body>
</html>

Primero incluimos Vue.js y Axios de sus CDN.

A continuación, en el cuerpo del documento, agregue un <table>para mostrar los datos obtenidos:

<h1>Contact Management</h1>
<div id='vueapp'>

<table border='1' width='100%' style='border-collapse: collapse;'>
   <tr>
     <th>Name</th>
     <th>Email</th>
     <th>Country</th>
     <th>City</th>
     <th>Job</th>

   </tr>

   <tr v-for='contact in contacts'>
     <td>{{ contact.name }}</td>
     <td>{{ contact.email }}</td>
     <td>{{ contact.country }}</td>
     <td>{{ contact.city }}</td>
     <td>{{ contact.job }}</td>
   </tr>
 </table>

Usamos la v-fordirectiva para iterar sobre la matriz de contactos y mostrar cada contacto.

A continuación, agregue una <form>etiqueta:

</br>

    <form>
      <label>Name</label>
      <input type="text" name="name" v-model="name">
</br>
      <label>Email</label>
      <input type="email" name="email" v-model="email">
      </br>
      <label>Country</label>
      <input type="text" name="country" v-model="country">
      </br>
      <label>City</label>
      <input type="text" name="city" v-model="city">
      </br>
      <label>Job</label>
      <input type="text" name="job" v-model="job">
      </br>
      <input type="button" @click="createContact()" value="Add">
    </form>

</div>

Usamos la v-modeldirectiva para vincular los campos de entrada a sus variables correspondientes en la instancia de Vue que crearemos a continuación. Y usamos el @clickevento para vincular el evento de clic del botón al createContact()método que se definirá en la instancia de Vue.

A continuación, agregue una <script>etiqueta y cree una aplicación Vue:

<script>
var app = new Vue({
  el: '#vueapp',
  data: {
      name: '',
      email: '',
      country: '',
      city: '',
      job: '',
      contacts: []
  },
  mounted: function () {
    console.log('Hello from Vue!')
    this.getContacts()
  },

  methods: {
    getContacts: function(){
    },
    createContact: function(){
    },
    resetForm: function(){
    }
  }
})    
</script>
</body>
</html>    

Declaramos tres métodos, ¡implementémoslos!

El getContacts()método obtiene contactos desde el punto final de PHP usando Axios:

    getContacts: function(){
        axios.get('api/contacts.php')
        .then(function (response) {
            console.log(response.data);
            app.contacts = response.data;

        })
        .catch(function (error) {
            console.log(error);
        });
    }

Los createContact()métodos crean un nuevo contacto en la base de datos MySQL enviando una solicitud POST con Axios y FormData :

    createContact: function(){
        console.log("Create contact!")

        let formData = new FormData();
        console.log("name:", this.name)
        formData.append('name', this.name)
        formData.append('email', this.email)
        formData.append('city', this.city)
        formData.append('country', this.country)
        formData.append('job', this.job)

        var contact = {};
        formData.forEach(function(value, key){
            contact[key] = value;
        });

        axios({
            method: 'post',
            url: 'api/contacts.php',
            data: formData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
        })
        .then(function (response) {
            //handle success
            console.log(response)
            app.contacts.push(contact)
            app.resetForm();
        })
        .catch(function (response) {
            //handle error
            console.log(response)
        });
    }

El resetForm()método restablece el formulario:

    resetForm: function(){
        this.name = '';
        this.email = '';
        this.country = '';
        this.city = '';
        this.job = '';
    }

Crear un punto final de API

Ahora, creemos un punto final que proporcione datos de contactos en formato JSON a nuestra interfaz de Vue.

Cree una carpeta api dentro de la carpeta raíz de su proyecto:

$ mkdir api

Navegue dentro de la apicarpeta y cree un contacts.phparchivo y agregue el siguiente contenido:

<?php
$host = "localhost"; 
$user = "root"; 
$password = "YOUR_MYSQL_DB_PASSWORD"; 
$dbname = "vuedb"; 
$id = '';

$con = mysqli_connect($host, $user, $password,$dbname);

$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));
//$input = json_decode(file_get_contents('php://input'),true);


if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}


switch ($method) {
    case 'GET':
      $id = $_GET['id'];
      $sql = "select * from contacts".($id?" where id=$id":''); 
      break;
    case 'POST':
      $name = $_POST["name"];
      $email = $_POST["email"];
      $country = $_POST["country"];
      $city = $_POST["city"];
      $job = $_POST["job"];

      $sql = "insert into contacts (name, email, city, country, job) values ('$name', '$email', '$city', '$country', '$job')"; 
      break;
}

// run SQL statement
$result = mysqli_query($con,$sql);

// die if SQL statement failed
if (!$result) {
  http_response_code(404);
  die(mysqli_error($con));
}

if ($method == 'GET') {
    if (!$id) echo '[';
    for ($i=0 ; $i<mysqli_num_rows($result) ; $i++) {
      echo ($i>0?',':'').json_encode(mysqli_fetch_object($result));
    }
    if (!$id) echo ']';
  } elseif ($method == 'POST') {
    echo json_encode($result);
  } else {
    echo mysqli_affected_rows($con);
  }

$con->close();

Finalmente, puede servir su aplicación PHP usando el siguiente comando desde la raíz de su proyecto:

$ php -S 127.0.0.1:8080

Esta es una captura de pantalla de la aplicación, luego de publicar algunos datos usando el formulario:

PHP Vue.js REST API CRUD

Para el mismo estilo, agregue el siguiente CSS:

Conclusión

En este tutorial, usamos PHP, MySQL, Vue.js y Axios para crear una aplicación de ejemplo CRUD API REST simple.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas