ZhihuDaily

1. Processo de instalação e introdução do projeto

Instalar

De acordo com a reação de pessoas entusiasmadas,

 npm install
npm run serve

introduzir

Este projeto é replicado com base no conteúdo do lado iOS de Zhihu diariamente de abril a maio de 2022. É apenas para aprendizado de referência e não é usado para lucro.

2. Lógica da página

É dividido em duas partes: páginas e componentes

2.1 index.vue

Esta página é a página inicial e o endereço está '/' no componente de roteamento. Contém Headcontent.vue (em cima) Swipe.vue (lista de notícias) Lista de notícias.vue (lista de notícias)

Headcontent.Vue Clique no avatar para pular para deslizar.vue (barra lateral)

Swipe.Vue e NewsList.vue salte para NewsDetail.vue (página de detalhes de notícias)

2.2 Swipe.vue

Esta página é uma barra lateral, você pode inserir meus favoritos colecionar.vue

2.3 Colete.vue

Esta página é a favorita, que contém vários conteúdos favoritos. Clique para inserir newsdetail.vue (página de detalhes de notícias)

2.4 NewsDetail.vue

Pode ser acessado de várias maneiras, incluindo jornalistas.vue (barra de função) e share.vue (página de compartilhamento)

Newsmenu.vue contém quatro funções: curtidas, coleções, comentários e compartilhamento. Comentários pularão para comentar.vue share and trigger share.vue

2.5 Comentário.vue

Página de comentários, incluindo comentários longos e comentários curtos, clique na parte inferior para pular para o writecomment.vue página

2.6 WRITECOMMENT.VUE

Você pode escrever comentários na página WriteComment.vue , clique em Publicar e voltar para comentar.vue

3. Classificação de pontos funcionais

3.1 Headcontent.vue

Exibição de datas, exibição de avatares e páginas de salto, sem dificuldade

3.2 Swipe.vue

Os diagramas de carrossel manuscritos realizam -se automático (alternando a cada 4s) e troca de deslizamento esquerdo e direito

3.3 Lista de notícias.vue

Lista de notícias, deslizar para baixo mostrará conteúdo de notícias dos últimos dias, usando o componente de rolagem infinita do elemento UI

3.4 Colete.vue

Clique no botão Favoritos na página, e o conteúdo de notícias correspondente aparecerá na minha página dos favoritos, atualize sem perder

3.5 Newsmenu.vue

Você pode clicar para curtir, coletar e compartilhar comentários e não o perca depois de refrescante.

3.6 Share.vue

Depois de clicar, a página de compartilhamento aparece e o plano de fundo por trás dela fica cinza. Clique no plano de fundo ou clique em Cancelar e a página de compartilhamento desaparece.

3.7 Comment.vue

Mostre comentários, como comentários, atualização e saída sem desaparecer

3.8 writecomment.vue

1. Não diminua o zoom depois de clicar no telefone celular
2. Somente quando houver conteúdo, você pode comentar e postar. Quando houver conteúdo de comentários, a cor do botão de postagem mudará.
3. Após postar, volte para comentar.

4. Implementação

Selecione algumas implementações mais importantes para explicação

4.1 Lista de notícias.vue

Use V-Infinite-roll em elemento-Ui para puxar para o fundo para acionar as notícias das datas anteriores para obter notícias de datas anteriores, use isso.date.setDate (this.date.getdate ()-1) para calcular as datas

4.2 Newsmenu.vue

...

5. Pensamentos de acompanhamento

Com base em projetos existentes, adicione funções de back -end e faça isso depois de aprender o Node.js

5.1 Função de login adicionada

5.2 Use o banco de dados para armazenar curtidas e coleções de usuários

5.3 ...