ZhihuDaily

1. Processus d'installation et introduction du projet

Installer

Selon la réaction des gens enthousiastes,

 npm install
npm run serve

introduire

Ce projet est reproduit sur la base du contenu du côté iOS de Zhihu quotidiennement d'avril à mai 2022. Il est pour l'apprentissage de référence uniquement et n'est pas utilisé à but lucratif.

2. Logique de la page

Il est divisé en deux parties: pages et composants

2.1 Index.Vue

Cette page est la page d'accueil, et l'adresse est «/» dans le composant de routage. Contient HeadContent.Vue (Top) Swipe.Vue (Liste d'actualités) Newslist.Vue (Liste d'actualités)

HeadContent.Vue Cliquez sur l'avatar pour sauter pour Swipe.Vue (barre latérale)

swipe.vue et newslist.vue saut à newtail.vue (page de détails)

2.2 Swipe.Vue

Cette page est une barre latérale, vous pouvez entrer mes favoris Collect.vue

2.3 Collect.Vue

Cette page est un favori, qui contient plusieurs contenus préférés. Cliquez pour entrer dans Newsdetail.vue (page des informations sur les nouvelles)

2.4 Newsdetail.vue

Il est accessible de diverses manières, notamment NewsMenu.vue (Function Bar) et Share.vue (PARE PARTER)

NewsMenu.vue contient quatre fonctions: likes, collections, commentaires et partage. Les commentaires sauteront pour commenter.vue partager et déclencher un partage.vue

2.5 commentaire.Vue

La page de commentaire, y compris les longs commentaires et les courts commentaires, cliquez sur le bas pour passer à la page écrite.Vue

2.6 écrit.

Vous pouvez écrire des commentaires sur la page WriteComment.vue , cliquez sur Poster et sautez en commentaire.vue

3. Tri des points fonctionnels

3.1 Headcontent.Vue

Affichage des dates, affichage des avatars et des pages de saut, sans difficulté

3.2 Swipe.Vue

Les diagrammes de carrousel manuscrits se rendent compte automatique (commutation tous les 4) et commutation de glissement gauche et droite

3.3 Newslist.Vue

La liste des nouvelles, Swiping Down montrera le contenu des actualités des derniers jours, en utilisant le composant de défilement infini d'Element-UI

3.4 Collect.Vue

Cliquez sur le bouton Favoris de la page et le contenu d'actualités correspondant apparaîtra sur ma page Favoris, actualiser sans perdre

3.5 NewsMenu.vue

Vous pouvez cliquer pour aimer, collecter et partager des commentaires, et ne pas le perdre après rafraîchir.

3.6 Share.Vue

Après avoir cliqué, la page de partage apparaît et l'arrière-plan derrière lui devient gris. Cliquez sur l'arrière-plan ou cliquez sur Annuler et la page de partage disparaît.

3.7 commentaire.vue

Montrer des commentaires, comme les commentaires, actualiser et sortir sans disparaître

3.8 écrit.Vue

1. Ne zoomez pas après avoir cliqué sur le téléphone mobile
2. Ce n'est que lorsqu'il y a du contenu que vous pouvez commenter et publier. Lorsqu'il y a du contenu de commentaires, la couleur du bouton Post changera.
3. Après avoir publié, retournez à commentaire.vue et mettez de longs commentaires et commentaires courts selon la durée des commentaires

4. Implémentation

Sélectionnez des implémentations plus importantes pour l'explication

4.1 Newslist.Vue

Utilisez le V-infinite-Scroll dans Element-UI pour vous entraîner vers le bas pour déclencher les nouvelles des dates passées pour obtenir des nouvelles des dates passées, utilisez ce.date.setDate (this.date.getDate () - 1) pour calculer les dates

4.2 NewsMenu.vue

...

5. Réflexions de suivi

Sur la base des projets existants, ajoutez des fonctions backend et faites-le après avoir appris Node.js

5.1 Fonction de connexion ajoutée

5.2 Utilisez la base de données pour stocker les goûts et les collections des utilisateurs

5.3 ...