ZhihuDaily

1. Proceso de instalación e introducción del proyecto

Instalar

Según la reacción de personas entusiastas,

 npm install
npm run serve

introducir

Este proyecto se replica en función del contenido del lado iOS de Zhihu diariamente de abril a mayo de 2022. Es solo para aprender referencia y no se usa para obtener ganancias.

2. Lógica de página

Se divide en dos partes: páginas y componentes

2.1 índice.vue

Esta página es la página de inicio, y la dirección está '/' en el componente de enrutamiento. Contiene HeadContent.Vue (Top) Swipe.vue (Lista de noticias) NewsList.Vue (Lista de noticias)

Headcontent.vue Haga clic en el avatar para saltar a Swipe.vue (barra lateral)

Swipe.vue y NewsList.Vue Jump a NewsDetail.Vue (página de detalles de noticias)

2.2 deslizamiento.vue

Esta página es una barra lateral, puedes ingresar a mis favoritos .

2.3 coleccionar.vue

Esta página es una de las favoritas, que contiene varios contenidos favoritos. Haga clic para ingresar a NewsDetail.vue (página de detalles de noticias)

2.4 Newsdetail.vue

Se puede acceder de varias maneras, incluido Newsmenu.vue (barra de funciones) y Share.vue (página compartida)

Newsmenu.vue contiene cuatro funciones: me gusta, colecciones, comentarios y compartir. Los comentarios saltarán a comentar.vue compartir y disparar compartir.vue

2.5 comentario.vue

Página de comentarios, incluidos comentarios largos y comentarios cortos, haga clic en la parte inferior para saltar a la página de escritura.

2.6 Writecomment.vue

Puede escribir comentarios en la página WriteComment.vue , haga clic en Publicar y regrese a Comentar.

3. Clasificación de puntos funcionales

3.1 CONTENENCIO. VUE

Visualización de fechas, visualización de avatares y páginas de salto, sin dificultad

3.2 deslizamiento.vue

Los diagramas de carrusel escritos a mano se dan cuenta de automáticamente (cambiando cada 4s) y el cambio de deslizamiento izquierdo y derecho

3.3 LISTA.VUE

Lista de noticias, Sliping Down mostrará contenido de noticias de los últimos días, utilizando el componente de desplazamiento infinito de Element-Ui

3.4 Collect.vue

Haga clic en el botón Favoritos en la página, y el contenido de noticias correspondiente aparecerá en mi página de favoritos, actualizar sin perder

3.5 Newsmenu.vue

Puede hacer clic para que me guste, recopilar y compartir comentarios, y no lo pierda después de refrescarse.

3.6 share.vue

Después de hacer clic, aparece la página de intercambio, y el fondo detrás de ella se vuelve gris. Haga clic en el fondo o haga clic en Cancelar y desaparece la página de intercambio.

3.7 comentario.vue

Mostrar comentarios, como comentarios, refrescar y salir sin desaparecer

3.8 Writecomment.vue

1. No se acerque después de hacer clic en el teléfono móvil
2. Solo cuando hay contenido puede comentar y publicar. Cuando hay contenido de comentarios, el color del botón de publicación cambiará.
3. Después de publicar, vuelve a comentar. Vue y ponga comentarios largos y comentarios cortos de acuerdo con la duración de los comentarios

4. Implementación

Seleccione algunas implementaciones más importantes para explicación

4.1 LLIST

Use V-Infinite-Scroll en Element-UI para bajar hacia la parte inferior para activar la noticia de las fechas pasadas para obtener noticias de las fechas pasadas Use esto.date.setdate (this.date.getDate ()-1) para calcular las fechas

4.2 Newsmenu.vue

...

5. Pensamientos de seguimiento

Sobre la base de proyectos existentes, agregue funciones de backend y hágalo después de haber aprendido Node.js

5.1 Función de inicio de sesión agregada

5.2 Use la base de datos para almacenar me gusta y colecciones de usuarios

5.3 ...