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.

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");

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.

Index.html

El archivo index.html contiene toda la magia.

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.

No olviden suscribirse y apoyarnos.

Leave a Comment

Your email address will not be published. Required fields are marked *