react drag

Plataforma de arrastre y caída visual frontal

fondo

(Este proyecto es el diseño de graduación del autor)

A través de investigaciones relacionadas sobre sistemas de edición visual, pensando en escenarios comerciales, abstracción y división de componentes, etc. Estamos comprometidos a resolver los problemas de pocos desarrolladores front-end, más demandas de páginas, requisitos más repetitivos y baja reutilización. Implemente un sistema basado en la plataforma de visualización frontal basada en React. La plataforma puede proporcionar a los usuarios la función de editar visualmente las páginas front-end y generar los códigos React correspondientes. Para los técnicos, está disponible para crear una plataforma de construcción de páginas universal.

Diseño del sistema

La parte front-end de este sistema utiliza la tecnología React como marco View. El sistema utiliza el marco UMI para el control de enrutamiento y utiliza DV para la gestión del estado. El front-end se basa en Node.js como la capa media para representar en el servidor, mejorando aún más la velocidad de representación de la primera pantalla de la página. En la parte de pantalla frontal, se completa a través de páginas, diseños y componentes. En la sección de gestión estatal, coopere con los modelos y conecte las vistas a los datos a través de Connect en DVA. Al mismo tiempo, para las solicitudes de front-end, se implementan a través de la capa de servicios. Coloque algunos métodos de uso común en UTIS como Toolsets. Poner variables con significados especiales en común.

Función general

Los módulos de este sistema incluyen principalmente cinco módulos principales: gestión de usuarios, gestión organizacional, edición de arrastre y caída de página, vista previa y exportación de páginas, y gestión de componentes. Entre ellos, dado que JWT se usa como el método de autenticación de inicio de sesión delantera y trasera, se agrega el módulo de autenticación del usuario. El proceso funcional central del sistema es que el usuario inicia sesión en el sistema, ingresa al área de edición de la página visual, selecciona componentes para editar, guarda la página al servidor, construye código relevante y paquetes para generar los paquetes comprimidos correspondientes.

Ejecutar la plataforma

• Instalar dependencias relacionadas NPM I
• Ejecutar el código de fondo
• Inicio del hilo

Visualización de efectos

• Arrastrar la página
• Cuadrado de componentes
• Vista previa del código
• Cuadrado de la organización

Función

• Acceso
• registro
• Página (componente) Edición
  • Copiar componentes
  • Eliminar componentes
  • Combinación de componentes, generar plantillas de componentes
  • Modificar propiedades
• Vista previa del código
• Cuadrado de componentes
  • Dividido en componentes personales, componentes organizacionales y componentes públicos, y muestran diferentes componentes de acuerdo con diferentes permisos
  • Componentes de vista previa
  • Editar componentes
• Gestión organizacional
  • Solicitar la organización
  • Administrar la lista de aplicaciones, acordar o rechazar