ZhihuDaily

1. 安裝過程以及項目介紹

安裝

根據熱心群眾阿偉反應，使用

 npm install
npm run serve

介紹

本項目根據2022年4月-5月知乎日報IOS端內容復刻，僅供學習參考，不用於盈利。

2. 頁面邏輯

分為pages以及components兩個部分

2.1 index.vue

本頁面為主頁，在路由組件中地址為'/'。包含headContent.vue (頂部) swipe.vue (新聞列表) newsList.vue (新聞列表)

headContent.vue點擊頭像可以跳轉swipe.vue (側邊欄)

swipe.vue以及newsList.vue跳轉newsDetail.vue (新聞詳情頁面)

2.2 swipe.vue

本頁面為側邊欄，可以進入我的收藏collect.vue

2.3 collect.vue

本頁面為收藏夾，包含若干收藏內容，點擊可進入newsDetail.vue (新聞詳情頁面)

2.4 newsDetail.vue

可以由各種方式進入，包含newsMenu.vue (功能欄)以及share.vue (分享頁面)

newsMenu.vue包含點贊/收藏/評論/分享四個功能評論會跳轉到comment.vue分享會觸發share.vue

2.5 comment.vue

評論頁面，包含長評論以及短評論，點擊底部可以跳轉writeComment.vue頁面

2.6 writeComment.vue

writeComment.vue頁面可以編寫評論，點擊發布以後跳回到comment.vue

3.功能點整理

3.1 headContent.vue

日期的顯示，頭像的顯示以及跳轉頁面，無難點

3.2 swipe.vue

手寫輪播圖實現自動（每隔4S切換）以及左滑右滑切換

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來實現下拉到底部觸發獲取過去日期的新聞使用this.date.setDate(this.date.getDate() - 1)計算日期

4.2 newsMenu.vue

...

5.後續的想法

在已有項目基礎上，增加後端的功能，等學會了node.js就做一下

5.1 增加登錄功能

5.2 使用數據庫存儲用戶的點贊、收藏

5.3 ...