26-vue-users_page experiencia personal del proyecto

1. Proyectar imágenes de visualización

Inserte la descripción de la imagen aquí

2. Experiencia

   2.1 determinar los medios de comunicación, para averiguar la relación entre los componentes - suscripción y publicación de
   análisis de noticias : el área de búsqueda (componente de búsqueda) y un área de visualización (componente principal), que pertenece a los componentes de los hermanos , comunicación sobre el uso de suscripción y difusión de información , de esta forma, la información se puede transmitir directamente. (Si usa el método de accesorios, debe pasarlos capa por capa a través de sus componentes principales, lo cual es problemático).

   2.2 Al suscribirse y publicar mensajes, se deben aclarar dos preguntas: ¿Quién publicará los mensajes? ¿Quién publicará la noticia?
  Análisis: El componente de búsqueda necesita ingresar información del usuario, hacer clic en buscar y luego pasar la información de entrada al componente principal. El componente principal es realizar la solicitud de datos ajax y mostrarlos en el área de visualización (componente principal).
   Conclusión: El componente de búsqueda publica mensajes (eventos de activación) y el componente principal se suscribe a los mensajes (escucha el evento y ejecuta la lógica correspondiente). El
  componente de búsqueda, evento de activación de clic: el mensaje publicado debe escribirse en el evento de clic, y el evento de clic debe escribirse en los métodos.
  El componente principal que escucha los mensajes de suscripción de eventos debe escribirse en la parte montada.
 
  2.3 Al usar Ajax, se deben aclarar dos preguntas: ¿En qué componente se envía? ¿Cuándo enviar?
  En este proyecto, se debe enviar una solicitud ajax en el componente mian, y los datos devueltos deben mostrarse en el componente principal (área de visualización); la solicitud ajax debe realizarse después de que el usuario haga clic en el botón de búsqueda (después de que el componente mian se suscribe al mensaje de suscripción) (correspondiente El código debe estar escrito en el gancho montado)

 

3. Método de matriz utilizado

3.1 El método del mapa en la matriz:

3.1.1 Comprensión

  Para extraer atributos individuales de cada elemento de objeto en una matriz y colocarlos en la misma posición de subíndice que un objeto, use el método de mapa de la matriz. (La cantidad de elementos del objeto en la matriz existente y la matriz que se devolverá es la misma, pero los nombres de los atributos en el objeto del elemento no son los mismos)

3.1.2 Ejemplo de código

// 数组中的map方法:从一个数组中的每个对象元素中抽取个别属性,作为一个对象放在相同的下标位置,要用数组的map方法。(已有数组和要返回的数组  两者的对象元素个数相同,但元素对象里面的属性名不相同)
const users = result.items.map(item => ({  //item是数组中对象元素
	name:item.login,  //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)
	url:item.html_url,
	avatar_url:item.avatar_url
})

   Métodos de matriz de uso común: filter () map () reduce () find (). Los dos primeros métodos devolverán una nueva matriz.

Supongo que te gusta

Origin blog.csdn.net/A_Bow/article/details/113823052
Recomendado
Clasificación