Problemas centrales en el proyecto (empaquetado de componentes, solicitudes de red, funciones comerciales, optimización del rendimiento)

Lógica de encapsulación de los componentes de la tabla:  

Encapsule la lógica js general del componente Table dentro del componente para lograr la reutilización de la lógica ; 

Exponga algunas interfaces (propiedades) al exterior y pase datos o métodos al componente a través de la interfaz para controlar dinámicamente la representación y las funciones del componente de la tabla, asegurando la flexibilidad y la capacidad de configuración del componente ; 

La configuración de las columnas de la tabla se encapsula en un módulo independiente y se exporta para que la utilicen los componentes de la tabla, lo que mejora la legibilidad y el mantenimiento del código .

Solicitud de red:

1. ¿Cómo gestionar las solicitudes de red en el proyecto?

Encapsulación secundaria de solicitudes: tiempo de espera de solicitud establecido globalmente, URL base, interceptor de solicitud establecido, interceptor de respuesta establecido.

Administrar solicitudes por módulo: un archivo js administra múltiples solicitudes de un módulo funcional, cada solicitud se encapsula en una función independiente y se exporta para llamadas de componentes

1. ¿Cómo resolver las solicitudes de dominio cruzado en el proyecto?  

En el entorno de desarrollo: use proxy proxy.

En un entorno de producción: la configuración de back-end permite el acceso entre dominios o el proxy de configuración de nginx de back-end.

Funciones de negocio:

1. ¿Cómo se inicia sesión?, ¿Cuál es la lógica de inicio de sesión?
   1. Al iniciar sesión por primera vez, el front-end (cliente) llama a la interfaz de inicio de sesión del back-end (servidor) y envía el nombre de usuario y la contraseña.
   2. El backend (servidor) recibe la solicitud (cliente), verifica el nombre de usuario y la contraseña y devuelve un token al frontend (cliente) si la verificación es exitosa
   3. El front-end (cliente) obtiene el token, lo almacena en localStorage o vuex y salta a la página de enrutamiento
   4. Cada vez que el front-end (cliente) salta a la ruta, juzga si hay un token en localStroage, si no, salta a la página de inicio de sesión y, si lo hace, salta a la página de enrutamiento correspondiente.
   5. Cada vez que el front-end (cliente) llama a la interfaz de back-end (servidor) en el componente, se debe agregar el token al encabezado de la solicitud.
   6. El backend (servidor) juzga si hay un token en el encabezado de la solicitud. Si hay un token, obtendrá el token y lo verificará. Si la verificación es exitosa, devolverá datos. Si la verificación falla (por ejemplo, : token caducado), devolverá 401. Si no hay ningún token en el encabezado de la solicitud, devolverá 401.
   7. Si el front-end (cliente) obtiene el código de estado 401, borre la información del token y salte a la página de inicio de sesión

1. ¿Cuál es la idea de implementación de la gestión de autoridades?¿Autoridad a nivel de ruta?¿Autoridad a nivel de botón?

La importancia de la gestión de autoridad de front-end:

1. Reducir la posibilidad de operación ilegal
2. Elimine las solicitudes innecesarias tanto como sea posible para reducir la presión sobre el servidor
3. Mejorar la experiencia del usuario

La idea del control de permisos de front-end:

1. Control de menú: en la solicitud de inicio de sesión, se obtendrán los datos del permiso. El permiso debe compartirse entre varios componentes, por lo que los datos se pueden guardar a través de vuex y se mostrará el menú correspondiente. Los datos se perderán cuando se cierre la página. actualizado, por lo que los datos de permisos se conservarán en el almacenamiento.
2. Control de interfaz: si el usuario no inicia sesión e ingresa manualmente la dirección URL, debe bloquearse y redirigirse a la página de inicio de sesión, lo que se puede lograr a través de enrutamiento de guardias de navegación. El enrutamiento dinámico permite que las interfaces sin permisos no existan en las reglas de enrutamiento.
3. Control de botón: se pueden agregar metadatos a las reglas de enrutamiento, las reglas de enrutamiento actuales y los metadatos almacenados en las reglas de enrutamiento se pueden obtener a través del objeto de enrutamiento, y las instrucciones personalizadas pueden realizar el control del botón
4. Control de solicitud y respuesta: el uso de la intercepción de solicitud y la intercepción de respuesta, para solicitudes de tipo 401, salta uniformemente a la página de inicio de sesión, y el método de solicitud acepta descanso

1. ¿Cómo implementar el inicio de sesión único (sso)?    

Inicio de sesión único, SSO Nombre completo en inglés Inicio de sesión único.

  En sistemas de aplicaciones múltiples, solo necesita iniciar sesión una vez para acceder a otros subsistemas de aplicaciones de confianza mutua.

   Hay dos formas para que el servidor web autentique a los usuarios que han iniciado sesión:

 Basado en la cookie de sesión

HTTP es un protocolo sin estado. En algunos escenarios de aplicación, es necesario conocer el estado del usuario que ha iniciado sesión, por lo que se utiliza el mecanismo de sesión. La información de la sesión del usuario se almacena en el servidor de aplicaciones, y parte de la información de la sesión (como el ID de la sesión, el ID de la sesión) se almacena en la cookie del navegador del cliente. En la comunicación posterior con el servidor, el navegador llevará información relevante y el servidor puede obtener el estado de inicio de sesión del usuario consultando la información de sesión almacenada.

 basado en token

Los tokens, generalmente denominados JWT (JSON Web Tokens), son identidades de usuario e información relacionada almacenada en formato JSON, que se codifican en cadenas usando base64 después de haber sido firmados por una clave en el lado del servidor. Debido a que el JWT está firmado por el servidor, el cliente solo puede verificarlo y no puede cambiarlo. Una vez que el servidor autentica al usuario, envía el token al cliente. Cuando el cliente se comunique con el servidor, llevará el token con autenticación de Bearer en el encabezado del mensaje, y el servidor lo verificará después de recibirlo. A diferencia de la administración de sesiones basada en cookies, los tokens no tienen estado y el servidor en sí no almacena el estado del usuario. La propiedad de información de identidad autónoma del token hace que su aplicación sea más elástica y fácil de expandir.

1. Al acceder a la página, el inicio de sesión caduca repentinamente y salta a la página de inicio de sesión. ¿Cómo saltar a la página anterior después de que el inicio de sesión sea exitoso?

1. Cuando la dirección se redirige a la página de inicio de sesión, use un parámetro para guardar la dirección de la página antes de la redirección, por ejemplo: redirigir
2. En la página de inicio de sesión, primero obtenga la ruta de redirección guardada;
3. Después de un inicio de sesión exitoso, juzgue si hay una dirección de redirección y salte a la dirección de redirección si existe

Optimización del rendimiento:

1. ¿Dónde se ha optimizado en el proyecto?: reutilización de código, rendimiento, velocidad de acceso.
   1. v-if y v-show distinguen escenarios de uso:

(v-if es una representación condicional real, que se destruye y reconstruye durante el proceso de cambio, y v-show es equivalente al cambio de atributo de visualización en CSS)

1. 1. Calculado y reloj distinguir escenarios de uso:

(Calculado es un atributo computado. Si el valor del atributo dependiente cambia, su valor se recalculará la próxima vez que se obtenga el valor de computado. El reloj tiene más que ver con la observación).

1. 1. Optimización del rendimiento de lista larga:

A veces, nuestros componentes son pura visualización de datos, no habrá cambios, por lo que no es necesario que Vue secuestre nuestros datos. Un objeto se puede congelar mediante el método Object.freeze, una vez que el objeto se congela, ya no se modificará

1. 1. Destrucción de eventos:

Cuando se destruye un componente de Vue, limpiará automáticamente su conexión con otras instancias, pero solo para los eventos del componente en sí. Si se utilizan métodos como addEventListense en JS, no se destruirán automáticamente. Necesitamos eliminar manualmente los oyentes de estos eventos en el componente para evitar pérdidas de memoria.

1. 1. Lazy loading de recursos de imagen:

Para páginas con demasiadas imágenes, para acelerar la carga de la página, podemos esperar hasta que la página se desplace al área visible antes de cargar. Puede usar vue-lazyload en el proyecto. Luego cambie el src de la etiqueta img a v-lazy en el archivo vue, y cambie el modo de visualización de la imagen a visualización de carga diferida:

1. 1. Enrutamiento de carga diferida (implementado en (3. Enrutamiento Vuex)):

Vue es una aplicación de una sola página, y se importarán muchas rutas, por lo que el archivo después del empaquetado del paquete web es muy grande. Cuando hay demasiados recursos cargados, la página aparecerá en pantalla blanca, para que podamos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código. , el componente correspondiente se carga cuando se accede a la ruta.

1. 1. Los complementos de terceros se introducen a pedido:

Con la ayuda de babel-plugin-component. Introducir los componentes requeridos bajo demanda para lograr el propósito de reducir el tamaño del proyecto.

1. 1. Optimice el rendimiento de la lista infinita:

Si hay una lista muy larga o que se desplaza infinitamente, debe usar la tecnología de ventanas para optimizar el rendimiento y solo necesita renderizar el contenido de una pequeña parte del área, lo que reduce el tiempo para volver a renderizar componentes y crear nodos dom.

1. 1. Renderizado del lado del servidor SSR/pre-renderizado:

mejor SEO

Tiempo de llegada más rápido para el contenido (antes de que el pliegue se cargue más rápido)