Post Top Ad

Your Ad Spot

martes, 22 de septiembre de 2020

Desarrollando con VueJS y PHP

 


En este tutorial, usaremos VueJS y PHP para construir una herramienta de densidad de palabras clave realmente interesante. En el lado de Vue, haremos uso de componentes, plantillas y elementos raíz, y más. Usaremos PHP para generar el formulario que necesitamos, así como para manejar el procesamiento del formulario, además de hacer uso de la función substr_count () para proporcionar los datos que necesitamos. También te puede interesar cómo usar vuejs en laravelVeamos cómo podemos hacer esto, debería ser divertido.


Declare el componente Vue

El primer paso que daremos es declarar un componente para nuestra aplicación. En este caso, estamos creando un keywordcountercomponente como se muestra en el primer argumento pasado al .component()método. Pasamos un objeto como segundo parámetro a este método. Tiene propiedades de templatepropsdata, y methodsLa plantilla es una cadena que sirve como marcado real para el componente VueEn este ejemplo, comienza con un hashtag, lo que significa que Vue tratará esta cadena como un querySelector para el cual ese innerHTML se utilizará como cadena de plantilla. Nuestra propiedad props es un objeto, que en este caso contiene propiedades, datos y columnas. Los valores de estas propiedades son matrices, y los llenaremos dinámicamente un poco más adelante. La propiedad de datos contiene una función, o más bien hace referencia a una función. Hay un poco de magia sucediendo aquí, ya que Vue realmente convierte cualquier propiedad en getters y setters, que es lo que le da al marco su naturaleza reactiva. Finalmente, tenemos la propiedad de métodos, que es un objeto que contiene métodos para ser usados ​​en la instancia de Vue. Es un medio para mantener toda su funcionalidad ordenada y ordenada. Los métodos en la propiedad de métodos tienen su contexto establecido en la instancia de Vue.


Presentar un formulario para ingresar a un pajar y palabras clave para buscar

En este paso usaremos una combinación simple de HTML y PHP para presentar un formulario para el cual podemos recopilar algunos datos. En primer lugar, tenemos un elemento de formulario con la acción establecida en substr_count.php y el método es post. Lo que esto significa es que usaremos el método post http para enviar los datos que recopilemos al archivo PHP llamado substr_count.php. En nuestro caso, esta es literalmente una aplicación de una sola página, por lo que todos los fragmentos de esta página se pueden ensamblar para crear su propio ejemplo de trabajo. Dentro de la etiqueta del formulario, tenemos un área de texto que aceptará los datos que se conocerán como pajar, y una entrada de texto que recopilará una lista de palabras clave separadas por comas que analizaremos en los datos del pajar. Nuestras entradas hacen uso de la función PHP isset para repoblar las entradas en cada prueba sucesiva de datos. De esta manera, no tendría que volver a ingresar toda la información en el formulario para buscar, por ejemplo, un conjunto diferente de palabras clave. Finalmente tenemos un simple botón que nos permite enviar el formulario.


Definir la plantilla de plantilla de contador de palabras clave

En la sección anterior, donde hablamos sobre la plantilla de cadena y cómo se usa como un querySelector cuando tiene un prefijo con un hashtag. A continuación, ahora nos encontramos haciendo uso de<script type="x-template">para definir nuestra plantilla. Así es como el componente encuentra su plantilla. Esta sección aquí contiene el marcado y la lógica que definirán los datos que presentamos al usuario. En nuestro caso, tenemos una tabla simple con un estilo de arranque. Notará que las etiquetas th y tr tienen un marcado especial. Este es el marcado de VueJS que puede convertir nuestro HTML simple en un marcado capaz de procesamiento lógico. En la etiqueta th, usamos v-for para recorrer cualquier dato disponible, darle un estilo agradable de puntero de mano, adjuntar un controlador de clic que activa el método sortBy (), aplicar una clase activa si la tabla actual está activa, escriba en mayúscula la primera letra y determine si el tipo es ascendente o descendente. En resumen, este marcado nos permite hacer clic en el encabezado de la tabla para ordenar por esa columna. Cuando ejecutamos nuestra pequeña aplicación,

Notarás que la etiqueta tr también hace uso del marcado personalizado de Vue. Lo que está haciendo allí es llenar dinámicamente cada fila de la tabla con dos elementos td. Uno para el término de búsqueda y otro para el número de veces o el recuento de la frecuencia con la que ese término de búsqueda apareció en el pajar. Detrás de escena, en realidad estamos haciendo uso de substr_count () para encontrar estos datos para su uso, luego usamos Vue para mostrar los resultados en una hermosa tabla interactiva con capacidades de clasificación.


Definir el elemento raíz

Este marcado corresponde al nombre que le dimos al componente que registramos en el primer paso. Ahora podemos hacer referencia a él con estas etiquetas HTML personalizadas así.


Complete los datos que pueblan el componente

En este paso, en realidad tenemos que usar PHP para generar partes del script en nuestras páginas, ya que estos son los datos que serán dinámicos en función de la información que completamos en el formulario y enviamos a la aplicación. De hecho, tenemos dos casos aquí, si los datos enviados dan como resultado varios términos y cuentan, se toma la primera rama. Si solo se encuentra un término y un recuento, tomamos la segunda rama.


Probando nuestra aplicación

Finalmente, estamos listos para probar nuestra pequeña aplicación. Ingrese un montón de texto en el área de texto y una colección de términos separados por comas en el campo de entrada de texto, luego haga clic en enviar.


Ordenar por término

Después de enviar los datos a nuestra aplicación, podemos hacer clic en el encabezado de la tabla Término para ordenar nuestros resultados a través del nombre del Término.
ordenar por término



Ordenar por recuento

Después de enviar los datos a nuestra aplicación, podemos hacer clic en el encabezado de la tabla Recuento para ordenar nuestros resultados por recuento.
ordenar por conteo

Resumen de desarrollo con VueJS y PHP

Este fue un pequeño experimento divertido con el pirateo de una aplicación aleatoria en VueJS y PHP trabajando en conjunto. ¡Comparte si te gustó!



No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas