PIXEL FACEBOOK
logo-blanco

Cree rápidamente SPA complejos con vue-element-admin

Lo que vas a encontrar...

La arquitectura de aplicaciones de una sola página (SPA) ha sido una de las tendencias más importantes en el desarrollo web desde hace bastante tiempo. Como desarrolladores, los marcos de JavaScript como Angular, React, Svelte y Vue.js le permiten generar un SPA mediante una interfaz de línea de comandos (CLI). Algunos casos en los que puede necesitar un SPA incluyen:

  • Cuando crea una aplicación de comercio electrónico como Jumia o un servicio de transmisión de películas como Netflix
  • En términos más generales, cuando crea un panel de administración

Los paneles de administración son complejos ya que manejan consultas de red, gráficos, comunicación en tiempo real, tablas de datos, componentes de interfaz de usuario, etc. Debido a su complejidad, los equipos de desarrolladores tienden a comprar plantillas prefabricadas y personalizarlas.

Pero si es un desarrollador front-end que trabaja principalmente con Vue.js, vue-element-admin es una de las mejores plantillas de administración de Vue gratuitas y de código abierto disponibles. En este artículo, aprenderemos a usar vue-element-admin y exploraremos algunas de sus características.

Saltar hacia adelante:

¿Qué es vue-element-admin?

vue-element-admin es el predecesor de vue-admin-template. Esta es una solución de front-end lista para producción para interfaces de administración que utiliza el kit de herramientas element-ui. Esta plantilla tiene muchas características complejas que puede usar para tableros de nivel empresarial.

Exploremos algunas de las características principales de este proyecto.

Autenticación

Un panel de administración debe tener una función de inicio de sesión para verificar a un usuario. En vue-admin-template, la acción de inicio de sesión enviará los detalles del usuario (nombre de usuario y contraseña) al servidor, y el servidor devolverá un token, que se almacenará en una cookie:

Autorización

Otra característica importante de un panel de administración es la definición de roles y permisos de usuario. En este modelo, el rol de usuario se obtiene del token devuelto por el servidor. El rol del usuario determina a qué ruta puede acceder. Esto se calcula dinámicamente:

El fragmento de código anterior muestra cómo se implementan los permisos a nivel de página en esta plantilla. Los usuarios con diferentes permisos verán diferentes barras laterales y solo podrán ingresar a un número limitado de páginas. Es posible que prefiera personalizar esto si su tabla de rutas se genera dinámicamente en el backend.

Componentes de la interfaz de usuario

Como se mencionó anteriormente, vue-element-admin utiliza el kit de herramientas de interfaz de usuario element-ui. Los paneles de administración requieren muchos componentes reutilizables y esta plantilla proporciona más de 25 componentes de interfaz de usuario, incluidos DragSelect, ErrorDialog, MarkdownEditor, Pagination, Charts, etc.

Componente de diseño

Uno de los primeros componentes o vistas que implementará al crear un tablero es el componente Diseño. vue-element-admin consta de:

  • una barra lateral
  • Una barra de navegación
  • EtiquetasVer
  • Contenido

El diseño de una página se define en la configuración del enrutador:

Esta configuración facilita la personalización de la barra lateral para que coincida con el rol del usuario.

Solicitudes de red

Los paneles de administración consumen una gran cantidad de puntos finales de API de back-end, por lo que es importante tener un flujo organizado. vue-element-admin maneja esto de manera muy clara y concisa, así que vamos a desglosarlo.

Primero, tenemos una utilidad de consulta que envuelve axios. request maneja todos los POST, GET y otros parámetros de solicitud; solicitar encabezados; y mensajes de error. Las solicitudes de API son módulos en src/api; una consulta típica se ve así:

A continuación, el módulo de red se importa a las acciones de vue-store, así:

Gráficos

Los tableros contienen muchos gráficos para diferentes formularios y datos. Este es otro requisito común. Esta plantilla recomienda Apache ECharts, una biblioteca de visualización JavaScript potente, fácil de usar y flexible.

Personalmente, prefiero esta biblioteca a otras bibliotecas de gráficos debido a su amplia galería, que resulta útil cuando se implementan gráficos para clientes que no están seguros de cómo quieren representar los datos. No profundizaremos en los gráficos electrónicos en este artículo; Puedes ver su documentación aquí.

Construyendo con vue-admin-template

Hasta ahora hemos explorado las funciones de vue-admin-template; Avancemos y mostremos cómo iniciar rápidamente un panel de administración con la plantilla.

condiciones previas

Asegúrese de haber instalado lo siguiente:

Este proyecto también utiliza un servidor simulado, implementado con mockjs. Puede encontrar la implementación simulada en ~/mock.

Después de clonar el repositorio, ejecute npm install para instalar las dependencias del proyecto. Navegue a src/router y edite index.js con este fragmento de código:

Instalación del enrutador Vue

Este proyecto usa Vue Router 3. Aquí tenemos dos tipos de rutas: asyncRoutes y constantRoutes.

Las rutas constantes son globales; cada usuario tiene acceso a estas rutas, mientras que las rutas asincrónicas se cargan dinámicamente según el rol del usuario. Una ruta de administración típica se verá así:

Luego dirígete a src/dashboard/views/index y modifica el código con esto:

Adición de componentes de interfaz de usuario

Si ha trabajado anteriormente con element-ui, estos componentes de la interfaz de usuario le resultarán muy familiares. Arriba presentamos un nuevo componente de vista, PostTable. Vamos a darle cuerpo a esto.

Cree un nuevo archivo Vue llamado PostTable.vue en src/views/dashboard/admin/components y agregue estas líneas de código:

Finalmente, en nuestra tabla de enrutamiento, definimos la ruta @/views/posts/index; vamos a crearlo Cree un post/index.vue en el directorio de vistas y agregue estas líneas de código:

Impresionante. Ahora ejecute su servidor de desarrollo con npm run dev:

Nuestra aplicación de demostración, lanzada con npm run devNuestra aplicación de demostración, lanzada con npm run dev

Haga clic en Acceso y deberías ver algo como esto:

Nuestro panel posterior al inicio de sesiónNuestro panel posterior al inicio de sesión

Este es el tablero de inicio. Haga clic en Publicacionesy deberías ver algo como esto:

La vista Publicaciones de nuestro tableroLa vista Publicaciones de nuestro tablero

Suena como un panel de publicación de blog, ¿verdad? vue-element-admin también proporciona editores como TinyMCE y MarkdownEditor como componentes, para que pueda integrarlos directamente en este tablero.

Obtenga más información sobre vue-element-admin en su documentación aquí.

Conclusión

Los paneles de administración son una de las tareas inevitables en las que trabajará como desarrollador frontend. vue-element-admin proporciona una plantilla de código abierto y completamente gratuita para que pueda iniciar fácilmente un tablero. Los flujos de trabajo, el directorio de proyectos y la configuración de enrutamiento son lo suficientemente estándar para las aplicaciones de una sola página de nivel empresarial.

En este artículo, exploramos las características principales de vue-element-admin y luego creamos un panel de administración de publicaciones de blog.

Experimente sus aplicaciones Vue como lo hace un usuario

La depuración de aplicaciones Vue.js puede ser difícil, especialmente cuando hay docenas o incluso cientos de mutaciones durante una sesión de usuario. Si desea monitorear y rastrear las mutaciones de Vue para todos sus usuarios en producción, pruebe LogRocket. Banner de prueba gratuita de LogRocket Dashboardhttps://logrocket.com/regístrate/

LogRocket es como un DVR para aplicaciones web y móviles, literalmente graba todo lo que sucede en sus aplicaciones Vue, incluidas las solicitudes de red, los errores de JavaScript, los problemas de rendimiento y más. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar el estado en el que se encontraba su aplicación cuando ocurrió un problema.

El complemento LogRocket Vuex registra las mutaciones de Vuex en la consola de LogRocket, brindándole contexto sobre lo que provocó un error y en qué estado se encontraba la aplicación cuando ocurrió un problema.

Modernice la forma en que depura sus aplicaciones Vue: comience a monitorear de forma gratuita.

Fuente

Facebook
Twitter
LinkedIn
WhatsApp

Deja una respuesta

Artículos Relacionados

Síguenos