react drag

Plataforma visual de arrasto e solteira de front-end

fundo

(Este projeto é o design de graduação do autor)

Através de pesquisas relacionadas sobre sistemas de edição visual, pensando em cenários de negócios, abstração e divisão de componentes, etc. Estamos comprometidos em resolver os problemas de poucos desenvolvedores de front-end, mais demandas de páginas, requisitos mais repetitivos e baixa reutilização. Implemente um sistema baseado na plataforma de visualização front-end baseada em ReacT. A plataforma pode fornecer aos usuários a função de editar visualmente páginas de front-end e gerar códigos de reação correspondentes. Para os técnicos, está disponível para criar uma plataforma universal de construção de páginas.

Design do sistema

A parte front-end deste sistema usa a tecnologia React como estrutura de exibição. O sistema usa a estrutura UMI para controle de roteamento e usa o DV para gerenciamento de estado. O front-end depende do Node.js como a camada intermediária para renderizar no servidor, melhorando ainda mais a velocidade de renderização da primeira tela da página. Na peça de exibição front-end, ela é concluída através de páginas, layouts e componentes. Na seção de gerenciamento de estado, coopere com os modelos e conecte as visualizações aos dados através do Connect no DVA. Ao mesmo tempo, para solicitações de front-end, elas são implementadas através da camada de serviços. Coloque alguns métodos comumente usados no UTILS como conjuntos de ferramentas. Coloque variáveis com significados especiais em comum.

Função geral

Os módulos deste sistema incluem principalmente cinco módulos principais: gerenciamento de usuários, gerenciamento organizacional, edição de arrastar e soltar de página, visualização e exportação de páginas e gerenciamento de componentes. Entre eles, como o JWT é usado como método de autenticação de login frontal e traseiro, o módulo de autenticação do usuário é adicionado. O processo funcional principal do sistema é que o usuário faz login no sistema, entra na área de edição da página visual, seleciona componentes para editar, salva a página no servidor, cria código relevante e pacotes para gerar pacotes compactados correspondentes.

Execute a plataforma

• Instalar dependências relacionadas npm i
• Execute o código de segundo plano
• Início do fio

Exibição de efeito

• Página arrastar
• Square componente
• Visualização de código
• Organization Square

Função

• Conecte-se
• registrar
• Página (componente) Edição
  • Copiar componentes
  • Excluir componentes
  • Combinação de componentes, gerar modelos de componentes
  • Modificar propriedades
• Visualização de código
• Square componente
  • Dividido em componentes pessoais, componentes organizacionais e componentes públicos e exibir diferentes componentes de acordo com diferentes permissões
  • Componentes de visualização
  • Editar componentes
• Gestão organizacional
  • Inscreva -se para a organização
  • Gerenciar lista de aplicativos, concordar ou rejeitar