Llenar una tabla con datos JSON con Vue.js, PHP y MySQL
Vue.js es un framework en Javascript que sirve para hacer mejores aplicaciones, Vue.js es versátil, reactivo y progresivo, veremos mas poco a poco.
Pueden descargar y saber mas de Vue.js en su pagina oficial.
En este ejemplo les voy a mostrar como hacer llenar una tabla HTML con datos que estan en la base de datos.
El ejemplo esta dividido en 4 archivos de los que hablaremos paso a paso.
Vue.min.js
El archivo vue.min.js lo obtenemos al descargar Vue.js.
Schema.sql
El archivo schema.sql contiene la tabla y datos para que el ejemplo funcione.
[code language=”sql”] create database contacts;use contacts;
create table contact(
id int not null auto_increment primary key,
name varchar(255),
lastname varchar(255),
phone varchar(255)
);
insert into contact(name,lastname,phone) value ("John","Doe","1234");
insert into contact(name,lastname,phone) value ("Jane","Doe","4321");
insert into contact(name,lastname,phone) value ("John","Smith","7890");
[/code]
Contactos.php
El archivo contactos.php contiene la conexión a la base de datos, y devuelve un JSON con los datos que se cargaran en la pagina.
Aquí les dejo la explicacion.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| * Convertir datos de la tabla contact en JSON | |
| * Powered by @evilnapsis | |
| */ | |
| $con = new mysqli("localhost","root","","contacts"); | |
| if($con){ | |
| $sql = "select * from contact"; | |
| $query = $con->query($sql); | |
| $data = array(); | |
| while($r = $query->fetch_assoc()){ | |
| $data[] = $r; | |
| } | |
| echo json_encode(array("contactos"=>$data)); | |
| } | |
| ?> |
Index.html
El archivo index.html contiene toda la magia.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by Evilnapsis http://evilnapsis.com –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ejemplo Vue.js</title> | |
| <script type="text/javascript" src="vue.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Ejemplo de Listar Datos con Vue.js</h1> | |
| <div id="app" class="container"> | |
| <table border="1"> | |
| <thead> | |
| <th>Id</th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Telefono</th> | |
| </thead> | |
| <tr v-for="data in all_data "> | |
| <td>{{data.id}}</td> | |
| <td>{{data.name}}</td> | |
| <td>{{data.lastname}}</td> | |
| <td>{{data.phone}}</td> | |
| </tr> | |
| </ul> | |
| </div> | |
| <script> | |
| var app = new Vue({ | |
| el: "#app", | |
| data: { | |
| all_data:[] | |
| }, | |
| created: function(){ | |
| console.log("Iniciando …"); | |
| this.get_contacts(); | |
| }, | |
| methods:{ | |
| get_contacts: function(){ | |
| fetch("./contactos.php") | |
| .then(response=>response.json()) | |
| .then(json=>{this.all_data=json.contactos}) | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Este es el código, donde se hace uso de Vue.js para mostrar la tabla.
Resultado
Descarga
A continuación te dejo un link de descarga de Google Drive.
[sociallocker]Link: https://drive.google.com/open?id=1Il0MUgPj0Heh1yfhQhUhH1NVMegJrYy0
[/sociallocker]No olviden suscribirse y apoyarnos.