Post Top Ad

Your Ad Spot

jueves, 14 de mayo de 2020

Desarrollando con VueJS y PHP

En este tutorial, utilizaremos VueJS y PHP para construir una herramienta de densidad de palabras clave realmente genial. 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 gustar cómo usar vuejs en laravel . Veamos cómo podemos hacer esto, debería ser divertido.

Declarar 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 el 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 usará como la cadena de plantilla. Nuestra propiedad de accesorios es un objeto, que en este caso contiene propiedades, datos y columnas. Los valores de estas propiedades son matrices, y los rellenaremos 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. Aquí está ocurriendo un poco de magia, ya que Vue 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 usar 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.

Presente un formulario para ingresar un pajar y palabras clave para buscar

En este paso, utilizaremos una combinación simple de HTML y PHP para presentar un formulario para el que podamos 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 cualquier información que recopilemos al archivo PHP llamado substr_count.php. En nuestro caso, esta es literalmente una aplicación de página única, 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 isset PHP 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 querySelector cuando se antepone 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á los datos que presentamos al usuario. En nuestro caso, tenemos una mesa simple con un estilo de arranque. Notarás que las etiquetas th y tr tienen un marcado especial. Este es el marcado de VueJS que puede convertir nuestro HTML simple en marcado capaz de procesamiento lógico. En la etiqueta th, usamos v-for para recorrer cualquier dato disponible, darle un buen estilo de puntero manual, adjuntar un controlador de clic que activa el método sortBy (), aplicar una clase activa si la tabla actual está activa, escribe con mayúscula la primera letra y determina si el orden 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 utiliza el 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 usando 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 referenciarlo con estas etiquetas HTML personalizadas de esta manera.

Rellene los datos que pueblan el componente

En este paso, 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 completemos en el formulario y enviemos a la aplicación. De hecho, tenemos dos casos aquí, si los datos enviados dan como resultado varios términos y recuentos, se toma la primera rama. Si solo se encuentra un término y un recuento, tomamos la segunda rama.

Probar 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 plazo

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


Ordenar por conteo

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

Desarrollando con VueJS y PHP Resumen

Este fue un pequeño experimento divertido con la piratería de una aplicación aleatoria en VueJS y PHP trabajando en concierto. ¡Por favor comparte si te gustó!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas