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;
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:
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.
0 Comentarios
Dejanos tu comentario para seguir mejorando!