Como tudo começou?
Sou desenvolvedor front-end, mas busco o desenvolvimento. Decidi escrever um aplicativo fullstack e me
tornar milionário para obter uma experiência inestimável.
Então, comecei a planejar o back-end, escolhi o MongoDB para armazenamento de dados e estava pronto para planejar a estrutura e os relacionamentos de campo.
Mas me deparei com a falta de um editor de esquema simples e suficientemente funcional, sem frescuras para os bancos de dados NoSQL.
Não? Então, eu vou fazer negócios, encontrar uma biblioteca e preencher a interface!
A ideia do Fullstack foi colocada em segundo plano e comecei a estudar o editor mais simples de esquemas de banco de dados.
- Ingênuo ... - mas percebi isso um pouco mais tarde.
Pesquisas
Em primeiro lugar, as bibliotecas desse tipo são pagas e exigem muitas delas!
Em segundo lugar, aqueles que são gratuitos não brilham com funcionalidade ou estão cheios de bugs!
No terceiro não será para MxGraph encontrado. Praticamente não é mencionado na Internet, embora o excelente serviço draw.io esteja escrito nele e por si só seja uma ferramenta muito conveniente para visualizar e editar dados.
Submissão
Acho que todo mundo já ouviu falar do
Vue.js , mas por precaução - isso é JavaScript - uma estrutura para criar interfaces de usuário de estilo reativo.
O MxGraph é uma biblioteca para visualização e edição de vários processos, fluxo de trabalho e BPM, visualização de banco de dados, redes e telecomunicações de mapeamento, aplicativos de mapeamento e GIS, diagramas UML, circuitos eletrônicos, VLSI, CAD, redes sociais e financeiras, organogramas e muito mais.
Compatibilidade
O MxGraph é uma ferramenta bastante antiga (mas não obsoleta); portanto, uma simples instalação do npm em um projeto Vue aqui não nos dará total compatibilidade. Portanto, tive que desenterrar a rede e abrir a produção de bicicletas.
Soluções sofridas encontradas
A importação e a incorporação em um componente do Vue são assim:
<script> import mxgraph from 'mxgraph';
Por que você criou as variáveis e depois as registrou na janela ?!
O fato é que o webpack renomeia as variáveis durante a montagem e o mxgraph posteriormente não pode encontrá-las. Portanto, especialmente para mxgraph, eu os coloquei em um objeto global.
Também não se esqueça da configuração - especialmente ao usar as interfaces mxEditor internas, caso contrário, haverá problemas com o conteúdo da biblioteca.
E por que a variável editor saiu do vue ?!
Durante a operação, nem sempre podemos acessar a variável vue devido ao contexto dos métodos mxgraph. E levá-los para variáveis globais economizará seriamente tempo e alguns punhados de nervos.
Objetos de dados personalizados, por que novamente na janela ?!
O Mxgraph usa protótipos para criar novos objetos de dados. Eles também precisam ser gravados na janela - caso contrário, haverá problemas com a importação / exportação interna de esquemas.
O desenvolvimento foi mais fácil e eu não encontrei mais problemas com o acesso a objetos.
Não acho que essa abordagem seja ideal e ficarei feliz se alguém oferecer uma alternativa a essa solução de compatibilidade.E o que aconteceu?
Um pequeno aplicativo para modelar esquemas de banco de dados:
nosqldbm.ruO que me ajuda a visualizar um esquema aproximado do banco de dados para projetos futuros.
Obrigado por ler minha primeira publicação, espero que você esteja interessado.
Exemplo completo de gitRepositórioSeleção MxGraphRepositórioPequeno guiaDocumentos da APIExemplos