ZhihuDaily

1。インストールプロセスとプロジェクトの紹介

インストール

熱狂的な人々の反応によると、

 npm install
npm run serve

導入

このプロジェクトは、2022年4月から5月まで毎日Zhihu側のiOS側の内容に基づいて再現されています。これは、参照のみを学習するためであり、利益には使用されていません。

2。ページロジック

ページとコンポーネントの2つの部分に分かれています

2.1 index.vue

このページはホームページで、アドレスはルーティングコンポーネントの「/」です。 headcontent.vue （top） swipe.vue （ニュースリスト） newslist.vue （ニュースリスト）が含まれています

headcontent.vueアバターをクリックしてスワイプにジャンプする（サイドバー）

swipe.vue and newslist.vue newsdetail.vueにジャンプする（ニュース詳細ページ）

2.2 Swipe.Vue

このページはサイドバーです、あなたは私のお気に入りのcollect.vueを入力できます

2.3 collect.vue

このページはお気に入りで、いくつかのお気に入りのコンテンツが含まれています。クリックしてnewsdetail.vue （ニュースの詳細ページ）を入力します

2.4 NewsDetail.Vue

newsmenu.vue （function bar）やshare.vue （share page）など、さまざまな方法でアクセスできます。

NewsMenu.vueには、いいね、コレクション、コメント、共有の4つの機能が含まれています。コメントはコメントにジャンプします

2.5 comment.vue

コメントページ、長いコメントや短いコメントを含む、下部をクリックしてwriteComment.vueページにジャンプします

2.6 WriteComment.Vue

writecomment.vueページにコメントを書くことができます。[投稿]をクリックして[ジャンプ]コメントに戻って戻ってきます。

3。機能ポイントソート

3.1 headcontent.vue

日付の表示、アバターの表示とジャンプページ、困難はありません

3.2 Swipe.Vue

手書きのカルーセル図は、自動（4秒ごとに切り替える）と左右のスワイプスイッチングを実現します

3.3 NewsList.Vue

ニュースリスト、スワイプダウンは、Element-UIの無限のスクロールコンポーネントを使用して、過去数日間のニュースコンテンツを表示します

3.4 collect.vue

ページのお気に入りのボタンをクリックすると、対応するニュースコンテンツが私のお気に入りのページに表示されます。

3.5 Newsmenu.vue

クリックして気に入ったり、コメントを集めたり共有したり、リフレッシュした後は失わないでください。

3.6 share.vue

クリックした後、共有ページがポップアップし、その背後の背景が灰色になります。背景をクリックするか、[キャンセル]をクリックすると、[共有]ページが消えます。

3.7 comment.vue

コメントを見せて、コメント、更新、消えずに終了します

3.8 WriteComment.Vue

1. 携帯電話をクリックしてからズームインしないでください
2. コンテンツがある場合にのみ、コメントして投稿できます。コメントコンテンツがあると、投稿ボタンの色が変更されます。
3. 投稿した後、 comment.vueに戻り、コメントの長さに応じて長いコメントと短いコメントを入れます

4。実装

説明のために、より重要な実装を選択してください

4.1 NewsList.Vue

element-uiのv-infinite-scrollを使用して下部に引き下げて過去の日付のニュースをトリガーして、過去の日付のニュースを取得します。

4.2 Newsmenu.vue

...

5。フォローアップの考え

既存のプロジェクトに基づいて、node.jsを学習した後、バックエンド関数を追加して実行します

5.1ログイン機能を追加しました

5.2データベースを使用して、ユーザーのいいね！とコレクションを保存します

5.3 ...