Get it on Google Play

Ejemplo de uso de Vue.js con PHP

27-08-2017
 

Vue.js es el n-ésimo framework para el desarrollo de aplicaciones Javascript. En este caso prometen ser el ‘killer’ de Angular y React aportando como función diferenciadora que esta diseñado para ser progresivo(Que no te obliga a cargar toda la aplicación al inicio).

La verdad es que Vue.js me gusta mucho porque tiene pinta de ser bastante mas compatible con librerías tipo Google Chart o similar que las anteriores alternativas, y eso es bueno. Además, la estructura del código también tiene pinta de ser mas amigable.

Vamos a ver un ejemplo de formulario que guarda datos(Nombre y Teléfono) en la sesión del usuario(De esta manera nos ahorramos tener que configurar BBDD, etc.):

Vue.js Sample App

Vue.js Sample App

Como en artículos anteriores la gente pedía que colgase el código, tenéis el código disponible en mi cuenta de GitHub https://github.com/acoronadoc/vue-js-sample. Espero que lo disfrutéis :D.

Vamos a ver el ejemplo:

Código HTML de la aplicación Vue.js

		<div id='vueapp'>
			<div>
				<p>
					Nombre: <input v-model="nombre" />
				</p>
				<p>
					Tel&eacute;fono: <input v-model="telefono" />
				</p>
				<p>
					<button v-on:click="enviar">Enviar</button>
				</p>
			</div>

			<h2>Listado de registros</h2>
			<div>
				<div v-for="r in regs">
					<div>{{ r.nombre }}, {{ r.telefono }}</div>
				</div>
			</div>
		</div>

		<!-- Importamos Vue.js (Siempre al final) -->
		<script src="https://unpkg.com/vue"></script>
		<script src="https://unpkg.com/vue-resource"></script>

		<!-- Importamos nuestra aplicación -->
		<script src="./app.js"></script>

Nuestra aplicación Vue.js utilizará el DIV que tenemos con Id ‘vueapp’. Vemos como en Vue.js también usamos ‘Declarative Rendering'(Renderizado Declarativo). En el código vemos como:

  • En las cajas de texto del formulario les declaramos que variable del modelo tienen relacionada usando el atributo de vue.js ‘v-model’.
  • En el botón de enviar le declaramos el evento de vue.js ‘v-on:click’ para que ejecute el método ‘enviar'(Veremos después como lo declaramos).
  • Declaramos un bucle utilizando el atributo ‘v-for’ para que liste todo el listado de nombres y telefonos en la sesión del usuario
  • Importamos Vue.js y el fichero app.js(Con nuestra aplicación) al final de la etiqueta ‘body’.

Aplicación Javascript

Vamos a ver ahora nuestra aplicación Javascript(app.js):

var app = new Vue({
  el: '#vueapp',
  data: {
	nombre: '',
	telefono: '',
	regs: []
  	},
  methods: {

	reloadList: function() {
 		this.$http.get('data.php').then(function(response){
        		this.regs = response.body;
      		}, function(){
	        	alert('Error!');
      		});
		},

	enviar: function() {
		this.$http.post('data.php',{ 
			nombre: this.nombre, 
			telefono: this.telefono 
			}).then(function(response){
        			this.regs = response.body;
				this.nombre="";
				this.telefono="";
      				});
		}

	},
  created: function() {
	this.reloadList();
	}
});

Aquí es donde está la ‘chicha’ de la aplicación. Vamos a comentar un poco el código:

  • La aplicación Vue.js se declara mediante la instanciación de una classe Vue donde le describimos mediante un objeto JSON: ‘var app = new Vue({
    ‘.
  • Con el atributo ‘el: ‘#vueapp’ le indicamos cual va a ser el elemento HTML principal de la aplicación. En este caso el DIV con Id ‘vueapp’.
  • Con el atributo ‘data’ le definimos todos los atributos que formarán el modelo de la aplicación. Fijaros que luego haremos uso de ellos con ‘this.atributo’ dentro de los métodos o directamente en el código HTML.
  • Con el atributo ‘methods’ le definimos todos los métodos(O funciones) que tendrá nuestra aplicación. En este caso el método ‘reloadList’ para cargar la lista de registros y el método ‘enviar’ que se llama cuando se le da al botón enviar.
  • También definimos el atributo ‘created’, que es una función que se ejecutará una vez Vue.js haya creado el objeto.

Controlador PHP

Finalmente ya solo nos queda explicar el controlador(data.php) al que llama nuestra aplicación Javascript para guardar y devolver el listado de registros. Como hemos comentado antes es muy senzillo y se limita a guardar y leer los datos de la sesión del usuario:

<?php
/* Inicializamos la sesión y le añadimos 'data' en caso que no lo tenga ya */
session_start();
if ( !isSet($_SESSION['data']) ) $_SESSION['data']=array();

/* Leemos los parámetros enviados por post */
$post = json_decode(file_get_contents('php://input'), true);

/* Si de los parámetros enviados encontramos 'nombre' añadimos el registro a la sesión */
if ( isSet( $post["nombre"] ) ) {
	array_push( $_SESSION['data'], array( "nombre"=>$post["nombre"], "telefono"=>$post["telefono"] ) );
	}

/* Devolvemos el listado de datos de la sesión. */
echo json_encode( $_SESSION['data'] );
?>

Para mas información sobre Vue.js os recomiendo leer la documentación oficial que esta muy bién: https://vuejs.org/v2/guide/.

 

Comments

One Response to “Ejemplo de uso de Vue.js con PHP”
  1. proferay says:

    Muy bueno. Estoy buscando justamente ese “traspaso” entre php y VUE.js para una aplicación sencilla que debo realizar y que veo que es mucho más dinámico VUE.js y más legible en cuanto al código.
    Me gustaría saber cómo comunicarse con una base de datos MySQL mediante PHP en un ejemplo similar al que publicaste.
    Estoy detrás de info sobre ese punto específico. Sé cómo hacer la conexión a la BD pero me trabo al armar el objeto JSON como se debe…
    No me animo del todo a probar con AXIOS.

Leave a Reply