¿Cómo empezó todo?
Soy un desarrollador front-end, pero me esfuerzo por el desarrollo, decidí escribir una aplicación fullstack y
convertirme en millonario para obtener una experiencia invaluable.
Entonces, comencé a planificar el backend, elegí MongoDB para el almacenamiento de datos y estaba listo para planificar la estructura y las relaciones de campo.
Pero me encontré con la falta de un editor de esquemas simple y suficientemente funcional sin adornos para las bases de datos NoSQL.
- no? ¡Así que haré negocios, encontraré una biblioteca y completaré la interfaz!
La idea de Fullstack quedó en un segundo plano y comencé a estudiar el editor más simple de esquemas de bases de datos.
- Ingenuo ... - pero me di cuenta de esto un poco más tarde.
Búsquedas
En primer lugar, las bibliotecas de este tipo se pagan en su mayoría y requieren muchas.
En segundo lugar, los que son gratuitos no brillan con la funcionalidad o están llenos de errores.
En el tercero no se encontrará MxGraph. Prácticamente no se menciona en Internet, aunque el excelente servicio draw.io está escrito en él y, en sí mismo, es una herramienta muy conveniente para visualizar y editar datos.
Sumisión
Creo que todos han oído hablar de
Vue.js , pero por si acaso, esto es JavaScript, un marco para crear interfaces de usuario de estilo reactivo.
MxGraph es una biblioteca para visualizar y editar diversos procesos, flujo de trabajo y BPM, visualización de bases de datos, mapeo de redes y telecomunicaciones, aplicaciones de mapeo y SIG, diagramas UML, circuitos electrónicos, VLSI, CAD, redes financieras y sociales, organigramas y mucho más.
Compatibilidad
MxGraph es una herramienta bastante antigua (pero no obsoleta), por lo que una simple instalación npm en un proyecto Vue aquí no nos dará compatibilidad total. Por lo tanto, tuve que desenterrar la red y abrir la producción de bicicletas.
Soluciones sufridas encontradas
Importar e incrustar en un componente Vue se ve así:
<script> import mxgraph from 'mxgraph';
¿Por qué creaste las variables y luego también las registraste en la ventana?
El hecho es que webpack cambia el nombre de las variables durante el ensamblaje y posteriormente mxgraph no puede encontrarlas. Por lo tanto, especialmente para mxgraph, los pongo en un objeto global.
Además, no se olvide de la configuración, especialmente cuando use las interfaces mxEditor integradas, de lo contrario habrá problemas con el contenido de la biblioteca.
¿Y por qué la variable editor salió de vue?
Durante la operación, no siempre podremos acceder a la variable vue debido al contexto de los métodos mxgraph. Y tomarlos en variables globales ahorrará mucho tiempo y un par de puñados de nervios.
Objetos de datos personalizados ¿por qué otra vez en la ventana?
Mxgraph usa prototipos para crear nuevos objetos de datos. También deben escribirse en la ventana; de lo contrario, habrá problemas con la importación / exportación integrada de esquemas.
El desarrollo posterior fue más fácil y ya no encontré problemas con el acceso a los objetos.
No creo que este enfoque sea ideal, y me alegrará si alguien ofrece una alternativa a esta solución de compatibilidad.Y que paso
Una pequeña aplicación para modelar esquemas de bases de datos:
nosqldbm.ruLo que me ayuda a visualizar un esquema de base de datos aproximado para futuros proyectos.
Gracias por leer mi primera publicación, espero que te haya interesado.
Ejemplo completo de gitRepositorioSelección MxGraphRepositorioPequeña guíaDocumentos de APIEjemplos