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.


<?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));
}
?>

view raw

contactos.php

hosted with ❤ by GitHub

Index.html

El archivo index.html contiene toda la magia.


<!– 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>

view raw

vue-table1.html

hosted with ❤ by GitHub

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.

Leave a comment